|
|||
[QUOTE=basti1012;552561]Das mit den 3 gleichgroßen Video Link verstehe ich nicht ganz.
Das mit dem Videolink war so gemeint: alle drei Elemente sollten gleich hoch sein, und die Abstände dazwischen gleichmässig! Screenshot als Anhang dabei Geändert von sabrina79 (15.07.2018 um 11:06 Uhr) |
Sponsored Links |
|
|||
ZITAT: Wenn ich noch näher hinschauen würde, würde ich bestimmt noch mehr 'Kleinigkeiten' entdecken, die zu verbessern wären - aber du bist wohl auf einem guten Weg und dein Übungsprojekt macht einen guten Eindruck!
Vielen lieben Dank für die ganzen tollen Tips. Werde mich gleich ans umsetzen machen. Und zwecks Kleinigkeiten: Gerade die Kleinigkeiten machen eine gute ( perfekte) Seite aus, welche ich gerne erreichen möchte ( scheitert nur leider an momentaner Unwissenheit! Möchte das alles aber gerne lernen und danke nochmal vielmals für die Hilfen dafür ) Geändert von sabrina79 (15.07.2018 um 11:08 Uhr) |
Sponsored Links |
|
|||
[QUOTE=sabrina79;552563]
Zitat:
Du solltest dich von dem Gedanken lösen, dass du vor deinem Bildschirm sitzt und das alles irgendwie so hinfummelst, dass es irgendwie passt... ein bisschen Margin hier und ein bisschen Padding da ... und schon sieht es so aus, wie du es gerne hättest! Hehe... aber auch nur auf deinem Bildschirm. Für die restlichen 90% der Leute, die deine Seite besuchen passt aber genau das nicht. In deinem speziellen Fall kommen da auch noch ein paar ganz ausschlaggebende Komplikationen dazu: Das Video läuft in einem IFrame und hat vorgegebene Maße. HTML-Code:
<iframe src="https://player.vimeo.com/video/75396408" width="660" height="450" frameborder="0" class="link"></iframe> Dazu kommt dann noch, dass dein rechter Container Text beinhaltet! Die Größe dieses Containers richtet sich nach dessen Inhalt und Text hat nun mal die Eigenart, dass er Zeilenumbrüche erzeugt, wenn die Breite abnimmt - die Höhe wächst also bei abnehmender Breite. Und dann hast du auch noch ein Bild dazwischen eingefügt... hmmm... auch wieder vorgegebene Proportionen. Du wirst da Kompromisse machen müssen und dir vor allem Gedanken dazu machen müssen, wie sich denn deine Seite verhalten soll, wenn die Bildschirmbreite sich ändert (responsive). Mache dazu mal einen Plan, dann kann man dir ggf. weiter helfen. |
|
|||
[QUOTE=Sailor56;552565]
Zitat:
Fand halt rein das Layout schön und habe nicht die Problematik die dahinter steckt bedacht. Der Videolink muss von mir aus keine feste breite haben ( war so vorgegeben) , falls das weiterhilft. meinst ich sollte den videopink einzeln in der Spalte lassen?! |
|
|||
Zitat:
Wenn das Video dann an die 'Ränder' stößt, muss man es eben in einer @media runterskalieren. Das sollte allerdings kein großes Problem sein. |
|
|||
Zitat:
und darunter zwei Textblöcke und dazwischen das `divider`bild. das divider Bild nimmt aber ( in der Breite) immer den gleichen Raum ein wie die Textblöcke! werde langsam immer mehr verwirrt ... was ist denn da falsch? |
|
|||
... und die dishes ID hat es während der letzten Änderungen auch irgendwie zerschossen
ist bestimmt nur ein kleiner Befehl mit grosser Wirkung, aber komme da nicht drauf! und will jetzt nicht alles wieder mehr durcheinander machen! |
|
|||
Das ist mit Sicherheit nur eine Kleinigkeit... hast du dieses 'box-sizing' eingebaut?
Dann prüfe mal, ob du bei den width-Angaben zu deinen Elementen dieses auch berücksichtigt hast... 4 Elemente in einer Reihe = 25%... 3 Elemente ~33%.... 2 Elemente 50%. Das da mit den Breitenangaben etwas nicht stimmt, sieht man ja an dem Problem mit dem Trenner. mach da mal links und rechts 40% und das Bild dann 10%. Sonst musst du nochmal den Code posten (nutze dann bitte diese 'HTML Code' Einfügung). Kann ja auch sein, dass du im CSS deine Selektoren etwas gezielter ansprechen musst. Also zB #dishes .forthpic statt nur .forthpic ist aber jetzt nur zur Veranschaulichung als Beispiel, ist aber an den Stellen, wo es komisch aussieht überprüfenswert, damit sich de CSS Angaben nicht gegenseitig aufheben. |
|
|||
Zitat:
Hallo da bin ich wieder, habe das mit dem videolink glaube ich ganz gut hinbekommen und die width angaben auch. Allerdings komme ich bei dem Bereich row3, third_pic nicht ans ziel. habe zwei screenshots angefügt. Die Ausrichtung oder abstände in dem Bereich wollen einfach nicht passen! Hier auch nochmal der aktuelle Code HTML-Code:
<!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"><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> <!--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> </div> </article> <article class="videotext"> <div class="row"> <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> <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"> <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> @charset "utf-8"; /* * CSS-Design * Online-Schule für Gestaltung: Webdesign-Kurs */ /* Reset * * * * * * * * */ *{ margin: 0; padding: 0; box-sizing: border-box; } 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{ width: 100%; margin: 0 auto; padding-top: 150px; } .socialmedia{ width: 100%; display: flex; margin: 0 auto; padding-top: 150px; padding-bottom: 150px; justify-content: center; } #footer{ width: 80%; display: flex; margin: 0 auto; background: #000; } .socialmedia >a{ padding:20px; } .up{ width: 100%; text-align: center; } 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; } /* 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: 20px; } .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-evenly; 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: 33%; } .fourth { width: 25%; color: #fff; padding-top: 30px; } /* Images * * * * * * * * */ .third_pic{ width: 33%; justify-content: center; } .column.fourthpic { width: 25%; min-width: 200px; } /* 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{ text-decoration: none; padding-bottom: 200px; text-align:center; text-transform: uppercase; color: #fff; font-size: 1.5rem; } .third_subline a:hover{ text-decoration: none; color: #444; } .fullmenu { width: 50%; 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; } .videotext{ width: 80%; margin: 0 auto; } .text_videolink{ width: 40%; padding: 20px; border-radius: 20px; background: #666; color: #fff; } .copyright{ width: 100%; background: #000; color: #fff; padding: 50px; text-align: center; 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) { } |
Sponsored Links |
|
|||
Kann das leider ohne die Bilder nicht wirklich testen. Es sieht aber so aus, als wären die <img> nicht zentriert.
Teste mal folgendes: HTML-Code:
.row3 a { text-align: center; } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
responsive Webseite | runner | CSS | 4 | 14.09.2015 22:45 |
Responsive Design funktioniert nur halbwegs | apattoo | CSS | 3 | 08.07.2015 11:13 |
Neuling in Responsive Design | DerPrakikant | CSS | 1 | 16.02.2015 10:23 |
Kundeninteresse an Responsive Layout | heiko_rs | Offtopic | 18 | 24.05.2013 14:37 |
Suche Responsive CSS Imageslideshow | Madmaxx89 | CSS | 3 | 29.01.2013 14:14 |