zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Übungswebseite verbessern und responsive machen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 12.07.2018, 23:37
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 77
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 12.07.2018, 23:49
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 103
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Sailor56 Beitrag anzeigen
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
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 12.07.2018, 23:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Sailor56 Beitrag anzeigen
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 ??
Mit Zitat antworten
  #14 (permalink)  
Alt 12.07.2018, 23:55
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von basti1012 Beitrag anzeigen
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!
Mit Zitat antworten
  #15 (permalink)  
Alt 13.07.2018, 07:38
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 77
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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/
Mit Zitat antworten
  #16 (permalink)  
Alt 13.07.2018, 08:05
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 77
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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 !
Mit Zitat antworten
  #17 (permalink)  
Alt 13.07.2018, 08:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Sailor56 Beitrag anzeigen
... 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
Mit Zitat antworten
  #18 (permalink)  
Alt 14.07.2018, 23:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von sabrina79 Beitrag anzeigen
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>


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

}
Mit Zitat antworten
  #19 (permalink)  
Alt 15.07.2018, 02:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 103
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 15.07.2018, 09:55
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 77
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:57 Uhr.