Übungswebseite verbessern und responsive machen - Seite 2

Sailor56 · #11 (**permalink**) 12.07.2018, 22:37

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;
}

basti1012 · #12 (**permalink**) 12.07.2018, 22:49

Zitat:

Zitat von Sailor56

Den JavaScript Teil, den du da oben im Code hast, kannst du getrost löschen - der hat keinerlei Wirkung. Der Button funktioniert auch ohne!

Da hätte ich eigentlich auch druf achten können.
SORRY @Sabrina79

sabrina79 · #13 (**permalink**) 12.07.2018, 22:53

Zitat:

Zitat von Sailor56

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;
}

hab auch noch

justify-content:space-evenly;

eingefügt!

)
gibt es auch einen Befehl für die vertikale gleichmässige Ausrichtung innerhalb der #dishes ID ??

sabrina79 · #14 (**permalink**) 12.07.2018, 22:55

Zitat:

Zitat von basti1012

Da hätte ich eigentlich auch druf achten können.
SORRY @Sabrina79

schwer bei so viel chaos sich auf alles zu konzentrieren

bin allen sehr dankbar , dass ihr euch die zeit nehmt um zu helfen!

Sailor56 · #15 (**permalink**) 13.07.2018, 06:38

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/

Sailor56 · #16 (**permalink**) 13.07.2018, 07:05

Zitat:

hab auch noch

justify-content:space-evenly;

eingefügt! )

... ups... ja! Mir ist da gerade was aufgefallen. Hab dir versehentlich bei den Formatierungen für .row das Format
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

!

sabrina79 · #17 (**permalink**) 13.07.2018, 07:43

Zitat:

Zitat von Sailor56

... ups... ja! Mir ist da gerade was aufgefallen. Hab dir versehentlich bei den Formatierungen für .row das Format
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

!

Danke

werde mich übers Wochenende da mal einlesen und auf der Seite einbauen , und dann nochmal die codes hier posten

sabrina79 · #18 (**permalink**) 14.07.2018, 22:21

Zitat:

Zitat von sabrina79

Danke

werde mich übers Wochenende da mal einlesen und auf der Seite einbauen , und dann nochmal die codes hier posten

hallo nochmal, habe mich fleissig in die flexbox Befehle eingelesen und in meiner Seite versucht umzusetzen.
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>


<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"> 
<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>


<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>


<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>


<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>


<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 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> 

</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) {

}

basti1012 · #19 (**permalink**) 15.07.2018, 01:01

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;}

wird zu

Code:

.socialmedia >a{
  padding:20px;
}

Du benutzt bei fast jeden Element margin: 0 auto;
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;

in

Code:

font-weight:500;

oder wenniger,weil die dicke Schrift ja mehr Platz brauch.
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

Sailor56 · #20 (**permalink**) 15.07.2018, 08:55

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;
}

Durch 'border-box' legst du fest, dass bei Größenangaben der ganze Container gemeint ist - also Inhalt, Padding und Border.
Du sagst also zB

HTML-Code:

.kiste {
   width: 25%;
   border: 1px solid #000;
   padding: 5px;
}

dann kannst du sicher sein, dass .kiste auch nur 25% breit ist und genau 4x.kiste nebeneinander Platz haben (4*25% = 100%), denn border und padding sind in der Breite enthalten.
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;
}

Man könnte das auch einfacher lösen, aber dann wäre die hübsche Optik mit den gleichen Abständen zwischen den Menüpunkten nicht mehr gegeben.

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>

Hier packst du 6 Elemente nebeneinander in einen Flexcontainer. Erst die 3 Bilder und rechts daneben noch die zugehörigen 'Unterschriften'... oder sollen das Überschriften sein?
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 dann das zugehörige CSS ggf entsprechen anpassen, dass es hübsch aussieht.

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;
}

Damit die Links sich auch a.) richtig zentrieren und b.) die ganze Breite haben, um sich an unterschiedliche Displaybreiten anzupassen.

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>

Halte ich für ziemlichen Quatsch - viel zu kompliziert!
Mach es einfacher:

HTML-Code:

<article class="up">
   <a href="#up">
      <img src="images/up.png" alt="site-up">
   </a>
</article>

Und im CSS für .up

HTML-Code:

.up{
   width: 100%;
   text-align: center;
}

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!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ä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