Einzelnen Beitrag anzeigen
  #7 (permalink)  
Alt 12.07.2018, 21:25
sabrina79 sabrina79 ist offline
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
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 -->
<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>

<!--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.</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 -->
<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> <!-- 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{
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 ?
Mit Zitat antworten