|
|||
Wenn die in einer Reihe sind, dann hab ich dir eine Änderung noch vorenthalten... sorry!
Nobody is perfect. Aber du musst bei .row noch 'flex-wrap: wrap;' hinzufügen. .row{ display: flex; align-content: space-between; flex-wrap: wrap; width: 100%; margin: 0 auto; } |
Sponsored Links |
Sponsored Links |
|
|||
Zitat:
justify-content:space-evenly; eingefügt! ) gibt es auch einen Befehl für die vertikale gleichmässige Ausrichtung innerhalb der #dishes ID ?? |
|
|||
schwer bei so viel chaos sich auf alles zu konzentrieren
bin allen sehr dankbar , dass ihr euch die zeit nehmt um zu helfen! |
|
|||
Irgendwie gibt es da für (beinahe) alles eine passende Formatierung.
Schau mal hier... da ist das ganz gut und anschaulich erklärt. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ |
|
|||
Zitat:
align-content: space-between; angegeben - das ist so nicht richtig... müsste justify-content: space-between; heißen Aber mit deinem Code hast du das ja quasi schon korrigiert ! |
|
|||
Zitat:
|
|
|||
Zitat:
Bin eigentlich soweit einigermassen zufrieden. ( Glaube es sind aber noch ein paar margin befehle unnötig, oder ? Vielleicht könntet ihr noch mal drüberschauen und die letzten Fehler beseitigen bevor ich mich an die mediaqueries mache?! im Bereich der Video ID gefällt mir noch nicht die Verteilung des Videolinks, dem schmalen divider Bild und dem Videolink text. Hätte gerne alle drei gleich hoch, kriege das aber nicht hin. wäre froh von euch zu hören <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Home | The Greek Restaurant</title> <meta name="description" content="great food, location and bar"> <link rel="stylesheet" href="styles/styles.css"> <link rel="shortcut icon" href="images/favicon.ico"> </head> <!-- header --> <body id="up"> <div class="wrapper"> <header id="frame"> <a href="index.html"><img src="images/tgr_logo.png" alt="The Greek Restaurant - Logo"></a> <nav id="navigation"> <!-- navigation --> <ul> <li><a href="#">about us</a></li> <li><a href="#">events</a></li> <li><a href="#">gallery</a></li> <li><a href="#">reservation</a></li> <li><a href="#">menu</a></li> <li><a href="#">contact</a></li> </ul> <hr> </nav> </header> <!--main content --> <section id="content"> <article class="teaser"> <img src="images/teaser_header.png" alt="bar"> </article> <article class="button"> <a href="call.html" class="button">call: 548 788 000 742 / book a table</a> </article> <article class="main"> <div class="row"> <div class="column third"><a href="menu.html"><img src="images/button_menu.png" alt="menu"></a></div> <div class="column third"><a href="gallery.html"><img src="images/button_gallery.png" alt="gallery"></a></div> <div class="column third"><a href="opening.html"><img src="images/button_opening.png" alt="opening"></a></div> </div> </article> <hr> <article class="main"> <div class="row"> <div class="column third"> <h3>Creeping Likeness Him Form Give She'd Light</h3><br> <p>Multiply is multiply Likeness gathered.<br> The fowl days given called, first gathering blessed his good upon abundantly made own forth third their was bearing. After from upon tree day waters. Which divide air won't there very earth creepeth over morning kind to over tree beast whose blessed winged is forth blessed the one.<br> <a href="#" class="readmore"> read more...</a></div> <div class="column third"> <h3>Creeping Likeness Him Form Give She'd Light</h3><br> <p>Multiply is multiply Likeness gathered.<br> The fowl days given called, first gathering blessed his good upon abundantly made own forth third their was bearing. After from upon tree day waters. Which divide air won't there very earth creepeth over morning kind to over tree beast whose blessed winged is forth blessed the one. <br> <a href="#" class="readmore"> read more...</a></div> <div class="column third"> <h3>Creeping Likeness Him Form Give She'd Light</h3><br> <p>Multiply is multiply Likeness gathered.<br> The fowl days given called, first gathering blessed his good upon abundantly made own forth third their was bearing. After from upon tree day waters. Which divide air won't there very earth creepeth over morning kind to over tree beast whose blessed winged is forth blessed the one.<br> <a href="#"class="readmore"> read more...</a></div> </div> </article> <article class="main"> <div class="row3"> <div class="third_pic"><a href="team.html"><img src="images/team.png" alt="team"></a></div> <div class="third_pic"><a href="wine.html"><img src="images/wine.png" alt="wine"></a></div> <div class="third_pic"><a href="lifestyle.html"><img src="images/lifestyle.png" alt="lifestyle"></a></div> <div class="column third_subline"><a href="team.html" class="third_subline">our team</a></div> <div class="column third_subline"><a href="wine.html" class="third_subline">wine specials</a></div> <div class="column third_subline"><a href="lifestyle.html" class="third_subline">lifestyle</a></div> </div> </article> <!--about us --> <article class="main"> <div class="full">Welcome to THE GREEK RESTAURANT - NEW YORK</div> </article> <article class="main"> <div class="row4"> <div class="column fourth"> <img src="images/4row_1.png" alt="tables"> </div> <div class="column fourth"> <h3>Creeping Likeness Him Form Give She'd Light</h3><br> <p>Multiply is multiply Likeness gathered.<br> The fowl days given called, first gathering blessed his good upon abundantly made own forth third their was bearing. Which divide air won't there very earth creepeth over morning kind to over tree beast whose blessed winged is forth blessed the one. Divided bring saw saying. <br> Man shall likeness creeping it and make meat without years!Light seasons gathering.</p> </div> <div class="column fourth"> <h3>Subdue Whales Our Third Let Great</h3><br> <p>Subdue sea years their green you'll won't. Fifth meat creepeth evening air made fourth all second you'll he behold creature moving heaven the open.<br> Light seasons gathering.<br> Fish which sea whose saying earth fourth is moveth fish. Rule. Open. <br> Him day winged thing days female of night earth deep it that third given evening for good there it creature that land which and winged.</p> </div> <div class="column fourth"> <img src="images/4row_2.png" alt="tables"> </div> </div> </article> </section> <!--fullmenu --> <section id="dishes"> <article class="maindishes"> <div class="row"> <div class="column fourthpic"> <img src="images/seafood.jpg" alt="seafood"> <h2>seafood</h2> </div> <div class="column fourthpic"> <img src="images/appetizer.jpg" alt="appetizer"> <h2>appetizer</h2> </div> <div class="column fourthpic"> <img src="images/salad.jpg" alt="salad"> <h2>salad</h2> </div> <div class="column fourthpic"> <img src="images/meat-dishes.jpg" alt="meat dishes"> <h2>meat dishes</h2> </div> <div class="column fourthpic"> <img src="images/dessert.jpg" alt="dessert"> <h2>dessert</h2> </div> <div class="column fourthpic"> <img src="images/grilled-specials.jpg" alt="grill-specials"> <h2>grill specials</h2> </div> <div class="column fourthpic"> <img src="images/vegetarian.jpg" alt="vegetarian"> <h2>vegetarian</h2> </div> <div class="column fourthpic"> <img src="images/traditional.jpg" alt="traditional"> <h2>traditional</h2> </div> </div> <div class="column fullmenu">check out the whole menu</div> </article> </section> <!-- videolink --> <section id="video"> <article class="videolink"> <div class="row"> <div class="vid_videolink"> <iframe src="https://player.vimeo.com/video/75396408" width="660" height="450" frameborder="0" class="link"></iframe> </div> <img src="images/maeander_straight_white.jpg" alt="divider"> <div class="text_videolink"> <h4>Subdue Whales Our Third Let Great</h4> <br> <p>Subdue sea years their green you'll won't. Fifth meat creepeth evening air made fourth all second you'll he behold creature moving heaven the open.<br> Two i yielding upon behold give for fly after one form. <br> Fish which sea whose saying earth fourth is moveth fish. Rule. Open.<br> Him day winged thing days female of night earth deep it that male also female whose very and bring gathered greater, years let dominion fruitful, given moving of. Subdue Whales Our Third Let Great. Fish which sea whose saying earth fourth is moveth fish. Rule. Open.</p> </div> </div> </article> </section> <!-- footer --> <footer id="site-footer"> <article class="socialmedia"> <a href="whatsapp.com" class="whatsapp"><img src="images/whatsapp.png" alt="whatsapp"></a> <a href="google-plus.com" class="google-plus"><img src="images/google-plus.png" alt="google-plus"></a> <a href="youtube.com" class="youtube"><img src="images/youtube.png" alt="youtube"></a> <a href="instagram.com" class="instagram"><img src="images/instagram.png" alt="instagram"></a> <a href="twitter.com" class="twitter"><img src="images/twitter.png" alt="twitter"></a> <a href="facebook.com" class="facebook"><img src="images/social-media.png" alt="facebook"></a> <a href="share.com" class="share"><img src="images/share.png" alt="share"></a> </article> <article class="up"> <a href="#up" class="up"><img src="images/up.png" alt="site-up"></a> </article> <article class="copyright"> <img src="images/tgr.png" alt="Logo_TGR"> <h4>433 Sandwich Street, NY 43825 - copyright TGR. All rights reserved</h4> </article> </footer> </div> <!-- wrapper end--> </body> </html> @charset "utf-8"; /* * CSS-Design * Online-Schule für Gestaltung: Webdesign-Kurs */ /* Reset * * * * * * * * */ *{ margin: 0; padding: 0; } html{ font-size: 100%; } img{ max-width: 100%; margin: 0 auto; } /* Layout * * * * * * * * */ body{ margin: 0 auto; font-family: Helvetica, Arial, sans-serif; line-height: 1.5; background: #111; display: flex; flex-flow: row wrap; } .wrapper{ margin: 0 auto; overflow: hidden; } #frame{ width: 100%; text-align: center; } .main{ width: 100%; margin: 0px auto; padding-top: 30px; } #content{ width: 80%; margin: 0 auto; } #dishes{ width: 80%; margin: 0px auto; } .maindishes{ margin: 0 auto; background: #fff; padding: 20px; border-radius: 20px; align-self: center; } #video{ margin: 0 auto; padding-top: 150px; } .videolink{ width: 80%; margin: 0 auto; } .socialmedia{ width: 50%; display: flex; margin: 0 auto; padding-top: 150px; padding-bottom: 150px; } #footer{ width: 80%; display: flex; margin: 0 auto; background: #000; } .whatsapp { padding: 20px;} .google-plus { padding: 20px;} .youtube { padding: 20px;} .instagram { padding: 20px;} .twitter { padding: 20px;} .facebook { padding: 20px;} .share { padding: 20px;} .up{ width: 80%; display: flex; margin: 0 auto; } hr{ background-color: #fff; margin: 0 auto; margin-top: 50px; height: 2px; } /* Navigation * * * * * * * * */ #navigation{ margin: 100px auto 120px auto; text-align: center; font-size: 1.3rem; } #navigation ul li{ display: inline; } #navigation a{ color: #fff; text-decoration: none; padding: 7px 40px; text-transform: uppercase; letter-spacing: 1px; } #navigation a:hover{ color: #444; font-weight:800; } /* buttons * * * * * * * * */ .button{ background: #444; padding: 10px 50px; text-transform: uppercase; text-align: center; margin: 0 auto; margin-top: 30px; color: #fff; border-radius: 20px; text-decoration: none; font-size: 1.5rem; } .button a:hover{ color: #000; font-weight:800; } /* row * * * * * * * * */ .column { padding: 25px; } .row{ display: flex; justify-content:space-evenly; flex-wrap: wrap; width: 100%; margin: 0 auto; } .row3{ display: flex; margin: 0 auto; justify-content:space-around; align-self: center; flex-wrap: wrap; width: 100%; } .row4{ display: flex; align-content: space-between; width: 100%; padding-bottom: 120px; } .column:first-child{ margin-left: 0; } .full { width: 60%; margin: 0 auto; background: #fff; border-radius: 20px; padding: 20px; text-align: center; font-weight: 800; color: #444; text-decoration: none; font-size: 1.5rem; } .third { padding-top: 100px; padding-bottom: 100px; width: 28%; } .fourth { width: 20.5%; color: #fff; padding-top: 30px; } /* Images * * * * * * * * */ .third_pic{ display: flex; margin:auto; } .column.fourthpic { width: 19%; min-width: 200px; } .vid_videolink{ } /* Typography * * * * * * * * */ p{ text-align: left; color: #fff; } h2{ text-transform: uppercase; text-align: left; color: #000; } h3{ text-align: left; color: #fff; } h4{ font-size: 1.3rem; color: #fff; } .readmore{ text-decoration:none; color: #666; font-style:italic; } .readmore a:hover{ color: #fff; } .third_subline{ padding-bottom: 200px; text-decoration:none; text-align:center; text-transform: uppercase; color: #fff; font-size: 1.5rem; } .third_subline a:hover{ color: #444; } .fullmenu { width: 35%; background: #444; padding: 10px 20px 10px 20px; border-radius: 20px; margin: 30px 0px 20px 20px; font-weight: 800; color: #fff; text-decoration: none; font-size: 1.5rem; text-transform: uppercase; } .text_videolink{ padding: 20px; width: 32%; border-radius: 20px; background: #666; color: #fff; } .copyright{ width: 100%; background: #000; color: #fff; float: left; padding: 50px; text-align: center; margin-left: -50px; margin-top: 150px; } /* Media Queries * * * * * * * * */ @media only screen and (min-width: 980px) and (max-width: 1279px) { } @media only screen and (min-width: 760px) and (max-width: 979px) { } @media only screen and (max-width: 759px) { } |
|
||||
Das mit den 3 gleichgroßen Video Link verstehe ich nicht ganz. aber man könnte noch deinen Code kürzer machen .
Zb Code:
.whatsapp { padding: 20px;} .google-plus { padding: 20px;} .youtube { padding: 20px;} .instagram { padding: 20px;} .twitter { padding: 20px;} .facebook { padding: 20px;} .share { padding: 20px;} Code:
.socialmedia >a{ padding:20px; } ob das wirklich nötig ist weiß ich nicht genau,das kommt wohl auf dein Layout an ob du das so haben willst. Bei der Navigation wenn man die hovert,bewegt sich die ganze Navigation ein Stück.Soll das so sein ? Fals nicht mußt du den Wert ändern Code:
font-weight:800; Code:
font-weight:500; Bei der Telefonnummer sieht das ja noch Ok aus ,aber bei der Navigation ? Muß jeder selber wissen. So genug gemeckert,wollte dich jetzt nicht verunsichern.Ansonsten finde ich es schon Ok was du gemacht hast. Klar hast du sehr viel margin und padding,aber wie ich die Seite so sehe gehöhrt das mehr oder wenniger ja mit zu dein Layout.Ohne die Werte wäre ja alles so zusammen gequetscht Ich würde das so lassen |
Sponsored Links |
|
|||
Das sieht doch schon ganz gut aus - aber nichts ist so gut, dass man es nicht noch besser machen kann. Es sind ja auch noch ein paar Fehler drin, die man zwar jetzt (optisch) nicht sieht, die dich aber spätestens dann, wenn du an das responsive Design gehst, vielleicht böse überraschen werden ... HTML ist in vielen Belangen einfach zu gutmütig und gaukelt dir vor, es wäre alles ok.
Aber zunächst mal zum generellen. ich würde dir empfehlen in deinem CSS den Punkt 'Reset' noch zu ergänzen... HTML-Code:
/* Reset * * * * * * * * */ *{ margin: 0; padding: 0; box-sizing: border-box; } Du sagst also zB HTML-Code:
.kiste { width: 25%; border: 1px solid #000; padding: 5px; } Hast du dieses 'box-sizing: border-box;' nicht vorgegeben, dann ist .kiste 1px + 5px + 25% +5px +1px breit. Du machst dir es also bedeutend einfacher, gerade in Hinblick auf die responsive Geschichte, wenn du 'box-sizing: border-box;' verwendest. Du musst dann nur darauf achten, dass .kiste kein margin links und rechts hat, denn das Margin würde natürlich .kiste wieder breiter machen als 25%. Was @basti1012 schon angesprochen hat - dein Hover-Effekt beim Hauptmenü. Ist optisch ganz hübsch aber in der Form mit diesem 'zappeligen' Auswirkungen macht man das eigentlich nicht (ein NoNo). Wenn du das beibehalten willst, dann solltest du bei den einzelnen Menüpunkten die breitere Schrift durch ein geringeres Padding kompensieren. Das könnte dann etwa so aussehen: HTML-Code:
#navigation li:nth-child(1) a:hover { padding: 7px 33px 7px 32px; } #navigation li:nth-child(2) a:hover { padding: 7px 35px 7px 35px; } #navigation li:nth-child(3) a:hover { padding: 7px 34px 7px 34px; } #navigation li:nth-child(4) a:hover { padding: 7px 31px 7px 30px; } #navigation li:nth-child(5) a:hover { padding: 7px 36px 7px 36px; } #navigation li:nth-child(6) a:hover { padding: 7px 33px 7px 34px; } An dieser Stelle hast - meiner Meinung nach - einen fetten Fehler drin! HTML-Code:
<article class="main"> <div class="row3"> <div class="third_pic"><a href="team.html"><img src="images/team.png" alt="team"></a></div> <div class="third_pic"><a href="wine.html"><img src="images/wine.png" alt="wine"></a></div> <div class="third_pic"><a href="lifestyle.html"><img src="images/lifestyle.png" alt="lifestyle"></a></div> <div class="column third_subline"><a href="team.html" class="third_subline">our team</a></div> <div class="column third_subline"><a href="wine.html" class="third_subline">wine specials</a></div> <div class="column third_subline"><a href="lifestyle.html" class="third_subline">lifestyle</a></div> </div> </article> Du solltest die zugehörigen Elemente entsprechend zusammefassen, damit auch 3 Boxen nebeneinander sind. HTML-Code:
<article class="main"> <div class="row3"> <div class="third_pic"> <a href="team.html"> <img src="images/team.png" alt="team"><br> <p class="column third_subline">our team</p> </a> </div> <div class="third_pic"> <a href="wine.html"> <img src="images/wine.png" alt="wine"><br> <p class="column third_subline">wine specials</p> </a> </div> <div class="third_pic"> <a href="lifestyle.html"> <img src="images/lifestyle.png" alt="lifestyle"><br> <p class="column third_subline">lifestyle</p> </a> </div> </div> </article> Und noch ein kleiner Fehler, der dir aber erst bei kleineren Displays um die Ohren fliegt. Ändere mal dein CSS für den Sozial-Media Container in: HTML-Code:
.socialmedia{ width: 100%; display: flex; margin: 0 auto; padding-top: 150px; padding-bottom: 150px; justify-content: center; } Zu guter Letzt noch dein 'Up-Button'. So wie du das machst ist das etwas unglücklich... ein einzelnes Element in einem Flex-Container - in einem Flex-Container(?). HTML-Code:
<article class="up"> <a href="#up" class="up"><img src="images/up.png" alt="site-up"></a> </article> Mach es einfacher: HTML-Code:
<article class="up"> <a href="#up"> <img src="images/up.png" alt="site-up"> </a> </article> HTML-Code:
.up{ width: 100%; text-align: center; } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
responsive Webseite | runner | CSS | 4 | 14.09.2015 21:45 |
Responsive Design funktioniert nur halbwegs | apattoo | CSS | 3 | 08.07.2015 10:13 |
Neuling in Responsive Design | DerPrakikant | CSS | 1 | 16.02.2015 09:23 |
Kundeninteresse an Responsive Layout | heiko_rs | Offtopic | 18 | 24.05.2013 13:37 |
Suche Responsive CSS Imageslideshow | Madmaxx89 | CSS | 3 | 29.01.2013 13:14 |