Übungswebseite verbessern und responsive machen

sabrina79 · #1 (**permalink**) 11.07.2018, 21:55

Hallo nochmal, das ist der momentane Stand der Website, falls sich jemand die Mühe machen möchte.... (denke margin und float Befehle sind ziemlich durcheinander, und viel responsive ist die Seite auch noch nicht)

VIELEN LIEBEN DANK, für diejenigen die helfen möchten

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

<script type='text/javascript'>
//scroll up:
$('a.top').click(function () {
$('body,html').animate({scrollTop: 0}, 800);
return false;
});
</script>

</head>

<body>

<div class="wrapper">


<header id="frame">

<a href="index.html"><img src="images/tgr_logo.png" height="243" width="350" 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.</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.</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.</div>
</div>
</article>

<article class="main">
<div class="row">
<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>
</article>

<article class="main">
<div class="row">
<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>

<hr>

<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. 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.
Divided bring saw saying. <br> Man shall likeness creeping it and make meat without years!</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>

<div class="row">
<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">
<iframe src="https://player.vimeo.com/video/75396408" width="640" height="360" frameborder="0" class="link"></iframe>
<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" class="whatsapp"><img src="images/whatsapp.png" alt="whatsapp"></a>
<a href="google-plus" class="google-plus"><img src="images/google-plus.png" alt="google-plus"></a>
<a href="youtube" class="youtube"><img src="images/youtube.png" alt="youtube"></a>
<a href="instagram" class="instagram"><img src="images/instagram.png" alt="instagram"></a>
<a href="twitter" class="twitter"><img src="images/twitter.png" alt="twitter"></a>
<a href="facebook" class="facebook"><img src="images/social-media.png" alt="facebook"></a>
<a href="share" class="share"><img src="images/share.png" alt="share"></a>
</article>

<p><a class="up" href="#up"><img src=images/up.png></a></p>

<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{
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
background: #111;
}

.wrapper{

margin: 0 auto;
overflow: hidden;
}

#frame{
width: 100%;
display: block;
text-align: center;
margin-top:30px;
}

#main{
width: 80%;
float: left;
}

#content{
width: 80%;
margin: 0 auto;
}

#dishes{
width: 80%;
margin-left: 200px;
}

.maindishes{
margin: 0 auto;
background: #fff;
float: left;
border-radius: 20px;
}

#video{
width: 80%;
margin: 0 auto;
}

.socialmedia{
width: 100%;
float: left;
margin: 0 auto;
margin-top: 150px;
padding: 20px 0px;
text-align: center;
}

.whatsapp {
padding: 20px;
}
.google-plus {
padding: 20px;
}
.youtube {
padding: 20px;
}
.instagram {
padding: 20px;
}
.twitter {
padding: 20px;
}
.facebook {
padding: 20px;
}
.share {
padding: 20px;
}

#footer{
width: 100%;
float: left;
background: #000;
}

.copyright{
width: 100%;
background: #000;
color: #fff;
float: left;
padding: 50px;
text-align: center;
margin: clear;
margin-left: -50px;
margin-top: 150px;

}

.up{
float: left;
margin-left: 630px;
margin-top: 120px;
}

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

hr{
background-color: #fff;
margin: 0 auto;
margin-top: 50px;
height: 2px;
width: 80%;
}

/* Content * * * * * * * * */

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

/* Raster * * * * * * * * */

.column {
float: left;
padding: 25px;
}

.row{
width: 100%;
margin: 0 auto;
}

.row4{
width: 100%;
float: left;
margin-left: 5px;
padding-bottom: 120px;
}

.column:first-child{
margin-left: 0;
}

.full {
width: 92%;
background: #fff;
border-radius: 20px;
padding: 20px;
margin: 120px auto 0px auto;
text-align: center;
font-weight: 800;
color: #444;
text-decoration: none;
font-size: 1.5rem;
}

.fullmenu {
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;
}

.third {
width: 28%;
margin: 100px 0px 100px 15px;
}

.third_pic{
width: 28%;
float: left;
padding-left: 52px;
}

.third_subline{
width: 28%;
margin-left: 10px;
text-decoration:none;
text-transform: uppercase;
text-align: center;
color: #fff;
font-size: 1.5rem;
}

.third_subline a:hover{
color: #444;
}

.fourth {
width: 20.5%;
color: #fff;
margin-top: 30px;
}

h2{
text-transform: uppercase;
text-align: left;
color: #000;
}

h3{
text-align: left;
color: #fff;
}

p{
text-align: left;
color: #fff;
}

h4{
font-size: 1.3rem;
color: #fff;
}

.text_videolink{
margin-top: 150px;
margin-left: 30px;
float:left;
width: 38%;
padding: 21px;
border-radius: 20px;
background: #666;
color: #fff;
}

.link{
margin-top: 150px;
float:left;
width: 55%;

}

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

}

Sailor56 · #2 (**permalink**) 12.07.2018, 09:37

Oh neee.... sorry wenn ich das mal so sage - aber das ist oberscheußlich!
Als Erstes solltest du aus deinem CSS Eintrag...

HTML-Code:

#main{
width: 80%;
float: left;
}

folgendes machen

HTML-Code:

.main{
width: 100%;
margin: 0px auto;
}

weil die ID #main im ganzen Dokument nicht vorkommt (sondern nur die Klasse .main) und weil float hier sowieso fehl am Platz ist.
Dann solltest du bei deiner .column das float: left; löschen
und
aus deinen Klassen .row und .row4 folgendes machen.

HTML-Code:

.row{
  display: flex;
  align-content: space-between;
  width: 100%;
  margin: 0 auto;
}
.row4{
  display: flex;
  align-content: space-between;
  width: 100%;
  margin-left: 5px;  
  padding-bottom: 120px;
}

Tja... und dann schauen, was passiert und ggf noch weiter nach 'Fehlern' suchen.
In Sachen responsive Design ist da wohl aber noch ein weiter Weg... aber zunächst mal müssen die offensichtlichen Dinge beseitigt werden, bevor man sich um die weiteren Dinge kümmert.

sabrina79 · #3 (**permalink**) 12.07.2018, 19:12

Zitat:

Zitat von Sailor56

Oh neee.... sorry wenn ich das mal so sage - aber das ist oberscheußlich!
Als Erstes solltest du aus deinem CSS Eintrag...

HTML-Code:

#main{
width: 80%;
float: left;
}

folgendes machen

HTML-Code:

.main{
width: 100%;
margin: 0px auto;
}

weil die ID #main im ganzen Dokument nicht vorkommt (sondern nur die Klasse .main) und weil float hier sowieso fehl am Platz ist.
Dann solltest du bei deiner .column das float: left; löschen
und
aus deinen Klassen .row und .row4 folgendes machen.

HTML-Code:

.row{
  display: flex;
  align-content: space-between;
  width: 100%;
  margin: 0 auto;
}
.row4{
  display: flex;
  align-content: space-between;
  width: 100%;
  margin-left: 5px;  
  padding-bottom: 120px;
}

Tja... und dann schauen, was passiert und ggf noch weiter nach 'Fehlern' suchen.
In Sachen responsive Design ist da wohl aber noch ein weiter Weg... aber zunächst mal müssen die offensichtlichen Dinge beseitigt werden, bevor man sich um die weiteren Dinge kümmert.

Vielen Dank, dass du dir meine Seite angeschaut hast

Habe die Sachen geändert und es ist überraschenderweise nicht viel passiert (nichts am Layout kaputtgegangen)

Woran sollte ich denn jetzt als nächstes arbeiten ??

Sailor56 · #4 (**permalink**) 12.07.2018, 19:20

Ich hätte auch nicht erwartet, dass der Code was kaputt macht

!
Aber es sollte sich schon was an dem, wie es dargestellt wird verändert haben - hast du nichts festgestellt?
Poste deinen geänderten Code und sage, wo du Verbesserungsbedarf siehst?

basti1012 · #5 (**permalink**) 12.07.2018, 19:21

Vieleicht sollte man in den fall auch auf Flexbox umsteigen dann kann das ganze float da auch raus.
Du hast da ein Javascript drinne was jquery brauch ,aber leider kein Jquery eingebunden.
Die verlinkungen zu Twitter Facebook und co ,müssen die so aussehen?? Weil irgendwie fehlt da überall die länder endung ,aber ich weiß nicht ob das so sein muß ,denke aber nicht .

Sailor56 · #6 (**permalink**) 12.07.2018, 19:43

So sah die Seite vorher aus... mit deinem Code aus dem Anfangspost.

und so sollte sie mit den Änderungen aussehen.

... also ich sehe da schon eine Änderung.

Da ich keinen Zugriff zu den Bildern habe, sind die natürlich auch im Screenshot nicht vorhanden.

sabrina79 · #7 (**permalink**) 12.07.2018, 20:25

Zitat:

Zitat von Sailor56

So sah die Seite vorher aus... mit deinem Code aus dem Anfangspost.

und so sollte sie mit den Änderungen aussehen.

... also ich sehe da schon eine Änderung.

Da ich keinen Zugriff zu den Bildern habe, sind die natürlich auch im Screenshot nicht vorhanden.

ja, sehe natürlich Änderungen, hatte aber Angst dass alles kreuz und quer ist

Bin eigentlich grob mit dem aussehen zufrieden, habe aber bei fast allen divs und classes margin und padding befehle verwendet, damit es einigermassen einheitlich ausgerichtet ist!
denke dass ich damit aber beim verkleinern Probleme bekomme. Die Seite soll eben auch responsive sein!
weiss aber nicht wo ich anfangen soll auszubessern, insbesondere wenn ich flexbox befehle verwenden müsste.

Hier ist das aktuelle HTML und CSS

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

<script type='text/javascript'>
//scroll up:
$('a.top').click(function () {
$('body,html').animate({scrollTop: 0}, 800);
return false;
});
</script>

</head>

<body id="up">

<div class="wrapper">


<header id="frame">

<a href="index.html"><img src="images/tgr_logo.png" height="243" width="350" 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.</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.</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.</div>
</div>
</article>

<article class="main">
<div class="row">
<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>
</article>

<article class="main">
<div class="row">
<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>

<hr>

<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. 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.
Divided bring saw saying. <br> Man shall likeness creeping it and make meat without years!</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>

<div class="row">
<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">
<iframe src="https://player.vimeo.com/video/75396408" width="640" height="360" frameborder="0" class="link"></iframe>
<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" class="whatsapp"><img src="images/whatsapp.png" alt="whatsapp"></a>
<a href="google-plus" class="google-plus"><img src="images/google-plus.png" alt="google-plus"></a>
<a href="youtube" class="youtube"><img src="images/youtube.png" alt="youtube"></a>
<a href="instagram" class="instagram"><img src="images/instagram.png" alt="instagram"></a>
<a href="twitter" class="twitter"><img src="images/twitter.png" alt="twitter"></a>
<a href="facebook" class="facebook"><img src="images/social-media.png" alt="facebook"></a>
<a href="share" class="share"><img src="images/share.png" alt="share"></a>
</article>

<p><a class="up" href="#up"><img src=images/up.png></a></p>

<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{
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
background: #111;
}

.wrapper{

margin: 0 auto;
overflow: hidden;
}

#frame{
width: 100%;
display: block;
text-align: center;
margin-top:30px;
}

.main{
width: 100%;
margin: 0px auto;
}

#content{
width: 80%;
margin: 0 auto;
}

#dishes{
width: 80%;
margin-left: 200px;
}

.maindishes{
margin: 0 auto;
background: #fff;
float: left;
border-radius: 20px;
}

#video{
width: 80%;
margin: 0 auto;
}

.socialmedia{
width: 100%;
float: left;
margin: 0 auto;
margin-top: 150px;
padding: 20px 0px;
text-align: center;
}

.whatsapp {
padding: 20px;
}
.google-plus {
padding: 20px;
}
.youtube {
padding: 20px;
}
.instagram {
padding: 20px;
}
.twitter {
padding: 20px;
}
.facebook {
padding: 20px;
}
.share {
padding: 20px;
}

#footer{
width: 100%;
float: left;
background: #000;
}

.copyright{
width: 100%;
background: #000;
color: #fff;
float: left;
padding: 50px;
text-align: center;
margin: clear;
margin-left: -50px;
margin-top: 150px;

}

.up{
float: left;
margin-left: 630px;
margin-top: 120px;
}

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

hr{
background-color: #fff;
margin: 0 auto;
margin-top: 50px;
height: 2px;
width: 80%;
}

/* Content * * * * * * * * */

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

/* Raster * * * * * * * * */

.column {
padding: 25px;
}

.row{
display: flex;
align-content: space-between;
width: 100%;
margin: 0 auto;
}

.row4{
display: flex;
align-content: space-between;
width: 100%;
margin-left: 5px;
padding-bottom: 120px;
}

.column:first-child{
margin-left: 0;
}

.full {
width: 92%;
background: #fff;
border-radius: 20px;
padding: 20px;
margin: 120px auto 0px auto;
text-align: center;
font-weight: 800;
color: #444;
text-decoration: none;
font-size: 1.5rem;
}

.fullmenu {
width: 38%;
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;
}

.third {
width: 28%;
margin: 100px 0px 100px 15px;
}

.third_pic{
width: 28%;
float: left;
padding-left: 52px;
}

.third_subline{
width: 28%;
margin-left: 10px;
text-decoration:none;
text-transform: uppercase;
text-align: center;
color: #fff;
font-size: 1.5rem;
}

.third_subline a:hover{
color: #444;
}

.fourth {
width: 20.5%;
color: #fff;
margin-top: 30px;
}

h2{
text-transform: uppercase;
text-align: left;
color: #000;
}

h3{
text-align: left;
color: #fff;
}

p{
text-align: left;
color: #fff;
}

h4{
font-size: 1.3rem;
color: #fff;
}

.text_videolink{
margin-top: 150px;
margin-left: 30px;
float:left;
width: 38%;
padding: 21px;
border-radius: 20px;
background: #666;
color: #fff;
}

.link{
margin-top: 150px;
float:left;
width: 55%;

}

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

}

p.s: gibt es eine Möglichkeit dass ich die verwendeten Bilder Hochlade, damit man besser das Aussehen der Seite beurteilen kann ?

sabrina79 · #8 (**permalink**) 12.07.2018, 20:32

Zitat:

Zitat von basti1012

Vieleicht sollte man in den fall auch auf Flexbox umsteigen dann kann das ganze float da auch raus.
Du hast da ein Javascript drinne was jquery brauch ,aber leider kein Jquery eingebunden.
Die verlinkungen zu Twitter Facebook und co ,müssen die so aussehen?? Weil irgendwie fehlt da überall die länder endung ,aber ich weiß nicht ob das so sein muß ,denke aber nicht .

kenne mich mit flexbox befehlen nicht aus, und lerne das alles grad noch. Glaube das überfordert mich momentan...

Das mit jQuery einbinden versteh ich nicht, die Funktion solle eigentlich nur für den "up" button ( nach oben zum Seitenanfang) da sein, und der button funktioniert.

Die socialmedia verlinkungen müssen nicht sein ( ist keine reale Webseite NUR

eine Abschlussaufgabe), hab sie halt eingefügt da sie auf jeder Seite dabei sind.

Sailor56 · #9 (**permalink**) 12.07.2018, 21:37

Man kann hier Bilder verlinken, die schon ins Netz hochgeladen wurden... aber Bilder hier hin hochladen. wüsste ich nicht dass das geht.
Aber so schlimm ist das nicht.
Beim Draufschauen auf deinen Code sehe ich spontan noch 2 'dringliche' Dinge, die zu ändern wären.
1. Die Box weiter unten - da wo so eine Art Speisekarte angegeben ist. Die passt noch überhaupt nicht.
Um das zu richten musst du zunächst den HTML Code etwas modifizieren, damit da nur noch ein Container (.row) ist, in dem die einzelnen Punkte enthalten sind... in deinem Code sind da 2 .rows mit jeweils 4 Punkten.
Änder das mal so:

HTML-Code:

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

Dann im CSS musst du diesen Bereich von dieser Zwangsjacke mit den 'magin' befreien und ihn gleichzeitig in Richtung 'responsive' bringen.
Dazu musst du für diese Elemente wie folgt überschreiben:

HTML-Code:

#dishes{
   width: 80%;
   margin: 0px auto;
}

.maindishes{
   margin: 0 auto;
   padding: 0px 0px 10px 0px;
   background: #fff;
   border-radius: 20px;
}

und letztlich noch die inneren Container eine passende Größe geben...

HTML-Code:

.column.fourthpic {
  width: 19%;
  min-width: 200px;
}

Mach das jetzt erst mal und schau, ob es passt - kannst dann ja auch schon mal probieren das Browserfenster kleiner zu machen und schauen, wie die Elemente reagieren.

Den letzten Punkt... dieser Up-Button, der noch nicht passt, machen wir dann danach!
Den JavaScript Teil, den du da oben im Code hast, kannst du getrost löschen - der hat keinerlei Wirkung. Der Button funktioniert auch ohne!

sabrina79 · #10 (**permalink**) 12.07.2018, 21:59

hab ich alles geändert

die 8 Bilder in der .maindishes class sind jetzt aber alle in einer reihe und über den rechten browserrand hinaus angeordnet, anstatt in zwei Viererreihen untereinander

Ä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