18.07.2018, 23:45
|
|||
|
|||
Zitat:
 Habe noch einige"Kleinigkeiten" geändert und bin mit dem layout soweit zufrieden! Könntet ihr bitte nochmal abschliessend drüberschauen, ob Fehler oder unnötige Anweisungen drin sind, welche mir dann bei den mediaqueries Probleme machen??!! Wäre wirklich sehr nett Denke irgendwie dass im Bereich .row4 irgendetwas nicht stimmt !!! (Wenn ich im responsive Modus durch die verschiedenen Browser und Bildauflösungen wechsele, sind die Ausrichtung und die Abstände in diesem Bereich NIE richtig angezeigt. Nur in dem normalen Modus auf meinem 13" Laptop! 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"> <h5> real taste real food </h5> <h6> passion for the perfect taste </h6> </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> <article class="videotext"> <div class="row"> <div class="text_videolink"> <h1> take view</h1> <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... </p> </div> <img src="images/view.png" alt="view"> <div class="text_videolink"> <h1> sky<br>line</h1> <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... </p> </div> </div> </article> <article class="main"> <div class="row"> <div class="column third"> <h3> The fowl days given called was bearing</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><br> </p> <img src="images/maeander_straight_white.png" alt="divider"> </div> <div class="column third"> <h3> After from upon tree day waters</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><br> </p> <img src="images/maeander_straight_white.png" alt="divider"> </div> <div class="column third"> <h3>Him Form Give She'd give 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><br> </p> <img src="images/maeander_straight_white.png" alt="divider"> </div> </div> </article> <article class="main"> <div class="truetaste"> <h5> the true taste of greece</h5> <p class="text_centerquote"> It is not the strongest of the species that survives, nor the most intelligent that survives. It is the one that is the most adaptable to change. <br>All changes, even the most longed for, <br>have their melancholy ... <br> <a href="#" class="discover"> ... discover</a> </p> </div> <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> <p class="text_center"> We are pleased to fill our guests with yummy food and taste ...</p> </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> <p class="text_center"> finest selection of red, rose and white wines, fitting to our deliscious meals ...</p> </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> <p class="text_center"> dining ist more than just eating, join our way of living on a trip through greece ...</p> </div> </div> </article> <!--about us --> <article class="main"> <div class="welcome"><img src="images/welcome_tgr.png" alt="tables"> </div> </article> <article class="main"> <div class="row4"> <div class="column fourth"> <img src="images/entrance.png" alt="entrance"> </div> <div class="column fourth"> <h1>Divided bring saw saying</h1> <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 ... </p> </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> <a href="#" class="column fullmenu"> check out the whole menu</a> </div> </article> </section> <!-- videolink --> <section id="video"> <article class="row"> <div class="videolink"> <p class="cultfood"> cult food</p> <p class="takeaview"> -take a view-</p> <iframe src="https://player.vimeo.com/video/75396408" width="660" height="450" frameborder="0" class="link"></iframe> </div> </article> </section> <hr> <!-- footer --> <footer id="site-footer"> <article class="copyright"> <img src="images/tgr.png" alt="Logo_TGR"> <p class="text_center_footer">Visa, MasterCard and restaurant vouchers. Transaction fee for payments by CC or food checks - The Greek Restaurant 2018 </p> </article> <article class="up"> <a href="#up"> <img src="images/up.png" alt="site-up"> </a> </article> <article class="socialmedia"> <a href="whatsapp.com" class="whatsapp"><img src="images/whatsapp.png" alt="whatsapp"></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="youtube.com" class="youtube"><img src="images/youtube.png" alt="youtube"></a> <a href="googleplus.com" class="googleplus"><img src="images/googleplus.png" alt="googleplus"></a> </article> </footer> </div> <!-- wrapper end--> </body> Code:
@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{
width: 100%;
margin: 0 auto;
background: #fff;
padding: 35px 20px 20px 20px;
align-self: center;
}
#video{
width: 100%;
margin: 0 auto;
padding-top: 100px;
}
.socialmedia{
width: 100%;
display: flex;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 40px;
justify-content: center;
}
#site-footer{
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background: #000;
}
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: #111;
padding: 10px 60px;
text-align: center;
margin: 0 auto;
margin-top: 30px;
color: #fff;
text-decoration: none;
font-weight:400;
}
.button a{
border: 1px solid #fff;
}
.button a:hover{
background: #fff;
color: #111;
font-weight:800;
}
a.discover{
background: #111;
color: #fff;
border: 1px solid #fff;
padding: 10px 60px 10px 60px;
line-height: 10rem;
text-decoration: none;
}
a.discover:hover{
background: #fff;
color: #111;
font-weight:800;
}
a.column.fullmenu:hover{
background: #fff;
color: #111;
border: 1px solid #111;
font-weight:800;
}
/* row * * * * * * * * */
.column {
padding: 20px;
}
.row{
display: flex;
justify-content:space-around;
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;
width: 100%;
padding-bottom: 120px;
}
.column:first-child{
margin-left: 0;
}
.third {
padding-top: 100px;
padding-bottom: 50px;
width: 33%;
}
.fourth{
color: #fff;
padding-top: 30px;
text-align: left;
width: 50%;
}
/* Images * * * * * * * * */
article.teaser{
background-image: url('teaser_header1.jpg');
background-repeat: no-repeat;
background-position: center;
}
.third_pic{
width: 33%;
padding-top: 120px;
}
.column.fourthpic {
width: 25%;
min-width: 200px;
text-align: center;
}
.row3 .third_pic {
text-align: center;
}
.row3 .third_pic a{
text-decoration: none;
}
.welcome{
text-align: center;
}
.socialmedia >a{
padding:30px;
}
.up{
width: 100%;
text-align: center;
}
/* Typography * * * * * * * * */
p{
text-align: left;
color: #fff;
}
h1{
font-size: 4.3rem;
font-weight:800;
color: #fff;
text-transform: uppercase;
text-align: left;
line-height: 4.3rem;
}
h2{
text-align: center;
color: #000;
}
h3{
text-align: left;
color: #fff;
font-size: 2rem;
}
h4{
font-size: 1.3rem;
color: #fff;
}
h5{
padding-top: 180px;
padding-bottom: 30px;
font-size: 4.3rem;
font-weight:800;
color: #fff;
text-transform: uppercase;
text-align: center;
}
p.cultfood{
padding-bottom: 10px;
font-size: 4.3rem;
font-weight:800;
color: #fff;
text-transform: uppercase;
text-align: center;
}
h6{
font-size: 1.5rem;
font-weight:100;
color: #fff;
text-transform: uppercase;
text-align: center;
letter-spacing: 5px;
padding-bottom: 200px;
}
p.takeaview{
font-size: 1.5rem;
font-weight:100;
color: #fff;
text-transform: uppercase;
text-align: center;
letter-spacing: 5px;
}
.third_subline{
text-decoration: none;
text-align:center;
color: #fff;
font-size: 2.3rem;
}
.third_subline a:hover{
text-decoration: none;
color: #444;
}
.text_center{
text-align: center;
padding: 10px 25px 200px 25px;
}
.text_center_footer{
text-align: center;
padding-top: 30px;
line-height: 2rem;
}
.text_centerquote{
text-align: center;
margin-bottom: 30px;
}
.fullmenu {
width: 33%;
font-weight: 800;
background: #111;
color: #fff;
text-decoration: none;
text-align: center;
margin-top: 50px;
margin-bottom: 20px;
}
.text_videolink{
width: 25%;
padding: 25px;
background: #111;
border: 1px solid #fff;
}
.copyright{
width: 100%;
background: #000;
color: #fff;
padding: 50px;
text-align: center;
}
/* 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 |
|
19.07.2018, 08:06
|
|||
|
|||
|
Diese Probleme, die du da im Bereich der Klasse 'row4' siehst, kann sicher ohne nähere Erläuterungen niemand nachvollziehen. Außer dir selbst sieht niemand die (vollständige) Seite mit den Bildern. Mit dem geposteten Code kann man maximal den Text und das generelle Layout sehen... für den Rest bräuchte man helleseherische Fähigkeiten.
Was mir nur auffällt, du hast gewaltig große font-size bei deinen Überschriften gewählt. Das wird dir auf jeden Fall Probleme bereiten, wenn es an das responsive Design geht, es sei denn, du beabsichtigst diese Schriftgröße dann auch entsprechend mit den MediaQueries zu reduzieren. Dann hast du in deinem CSS (noch) die Formatierung... HTML-Code:
.column:first-child {
margin-left: 0;
}
Dann hast du in deinem 'article.maindishes' einen Link '.. ckeck out..', dem du beim hovern eine 'border: 1px solid #111;' gibst. Das führt dann dazu, dass beim hovern der ganze div zappelt, weil die Höhe sich um 2px ändert. Du solltest hier dem Link (ohne hover) auch einen Rahmen geben - zB 'border: 1px solid #fff;' - dann ist das Zappeln weg.
|
| Sponsored Links |
|
19.07.2018, 14:42
|
|||
|
|||
|
Hab die zwei Sachen geändert
Wegen der großen Überschriften: Ich finde die im layout einfach super und würde sie gern lassen, auch wenn es beim responsive etwas mehr aufwand bedeutet ( Hoffe ihr helft mir trotzdem, falls ich mal den durchblick verliere) Zu dem anderen problem mit der Darstellung in verschiedenen Auflösungen hänge ich mal screenshots an vielleicht hilft das, kann das problem nicht so gut beschreiben!Habe die normale browseransicht 13" und zum vergleich die responsive Ansicht "1366x768" angefügt. (Die kleineren breiten müssen ja sowieso angepasst werden.) Vielleicht ist das ja auch normal ?!
|
|
19.07.2018, 14:49
|
|||
|
|||
|
Hätte auch noch eine allgemeine frage zu den mediaqueries, habe die bisher noch nicht benutzt.
Wie ist es denn am sinnvollsten strukturiert vorzugehen? von oben nach unten im layout, oder erst alle Bilder, Schriften, with-angaben oder die einzelnen breakpoints für sich? oh... und habt ihr eine Idee wie ich die navigation am schönsten und simpelsten umsetze? Dachte an einen button , in dem sich die Unterpunkte in kleineren breiten untereinander "sammeln" , und dann als dropdown Menü ausklappen. Hab mich schonmal umgesehen, aber versteh nicht ganz wo und was ich dazu schreiben muss!
|
|
19.07.2018, 15:16
|
|||
|
|||
|
Zitat:
... das Bild wird sich proportional verkleinern und der Text wird sich in der Höhe ausbreiten! Siehst du doch am besten an der Überschrift... die ist zweizeilig in der 'großen Ansicht', bricht dann um und wird dreizeilig.
|
|
19.07.2018, 15:20
|
|||
|
|||
|
Zitat:
bei den anderen abschnitten sieht es gut aus, kann ich das irgendwie besser machen ?
|
|
19.07.2018, 15:27
|
|||
|
|||
|
Zitat:
Hab mir bei ´adventures in responsive design` folgenden css code kopiert und eingefügt! Klappt aber nicht :/ HTML-Code:
.nav { width:100%; background-color: #fff; border-bottom: 1px solid #ccc; }
ul.simple-toggle { list-style: none; padding: 0px; margin: 0px; font-weight: bold; text-align: center; }
ul.simple-toggle li { display: inline-block; text-align: left; }
ul.simple-toggle li a { display: block; padding: 15px 10px; text-decoration: none; color: #444; }
ul.simple-toggle li a:hover { background-color: #ccc; }
.anchor-link { display: none; text-align: right; padding: 0 1em 0; text-align: center; padding: 10px 15px; color: #fff; background-color: #0084B4; text-decoration: none; margin: 3px; float: right; }
#mobile-nav { display:none; }
@media (max-width:48.000em){
ul.simple-toggle { display: none; }
.anchor-link, #mobile-nav { display: block; }
ul.open {
background-color: #F4F4F4;
box-shadow: 2px 2px 3px #444444;
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 5px;
top: 100%;
width: 70%;
z-index: 500;
}
ul.open li { display: block; list-style: none; text-align: center; }
ul.open li a { display: block; padding: 20px 10px; border-bottom: 1px solid #ccc; text-decoration: none; }
ul.open li a:hover { background-color: #ccc; color: #fff; }
}
liegt es vielleicht daran, dass bei mir die navigation in de ID "frame" drinliegt?? Geändert von sabrina79 (19.07.2018 um 15:29 Uhr)
|
|
19.07.2018, 15:56
|
|||
|
|||
|
Zitat:
Versuche doch einfach mal selbst einen Code zu entwickeln, der dir dein Menü nach deinen Vorstellungen responsive macht. CSS ist kein Hexenwerk.
|
|
19.07.2018, 16:10
|
|||
|
|||
|
Hier kann ich mich nur Sailor56 anschließen: Setze dich mit den Grundlagen von CSS auseinander (dafür ist doch auch diese Übungswebsite da). Du kannst nicht einfach CSS Code von irgendwo kopieren und erwarten, dass dieser auf magische Weise weiß, was zu tun ist.
|
| Sponsored Links |
|
19.07.2018, 16:46
|
|||
|
|||
|
Zitat:
Allgemein bin ich sehr stolz, was ich alles in den letzten 5 Monaten neben Arbeit und Familie schon gelernt habe. Werde das schon hinbekommen. Will es ja auch lernen und verstehen! Nochmals vielen dank für eure zeit und mühen
|
| Sponsored Links |
 |
|
|
Ä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 |
Linear-Darstellung
