Website responsive, div container zentrieren

sabrina79 · #1 (**permalink**) 09.07.2018, 21:04

Hallo ihr lieben, bin mal wieder mit einem Problem hier

Habe in meinem Layout zwei div Container ( .full und .maindishes ) die ich einfach nicht zentriert bekomme! habe schon alles rumprobiert aber finde den Fehler nicht.

Ausserdem denke ich, dass irgendwie alles nicht optimal geschrieben ist.
Vielleicht könnte jemand der sich auskennt mal drüberschauen und mir ein paar Verbesserungstips geben ( Hoffe die verwirren mich dann nicht noch mehr!)

eigentlich soll die website auch responive gut aussehen, habe aber glaube ich noch einiges hinzuzufügen!

Vielen Dank schon einmal für eure Hilfe!

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

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

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

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

</div> 

</body>
</html>

@charset "utf-8";

/*
* CSS-Design
* Online-Schule fr 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: 0 auto;
}

.maindishes{

background: #fff;
float: left;
border-radius: 20px;
margin: 0 auto;

}

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

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

/* 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%;
float: left;
margin: 0 auto;
}

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

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

.full {

background: #fff;
border-radius: 20px;
padding: 20px;
float: left;
margin: 0 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;
}

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

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

.link{
margin-top: 80px;
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) {
}

cloned · #2 (**permalink**) 10.07.2018, 08:21

Zitat:

Zitat von sabrina79

Habe in meinem Layout zwei div Container ( .full und .maindishes ) die ich einfach nicht zentriert bekomme! habe schon alles rumprobiert aber finde den Fehler nicht.

Du verwendest float left, damit sagst du, dass .full sich links orientieren soll. Wenn du möchtest, dass sich das Element mittig und nicht links ausrichtet, dann darfst du ihm kein float:left geben. Anders gesagt: mit margin: 0 auto (ohne float angabe) zentriest du das Element.

Zitat:

Zitat von sabrina79

Ausserdem denke ich, dass irgendwie alles nicht optimal geschrieben ist.
Vielleicht könnte jemand der sich auskennt mal drüberschauen und mir ein paar Verbesserungstips geben ( Hoffe die verwirren mich dann nicht noch mehr!)

Du hast danach gefragt, dann bekommst du es auch:
Wieso verwendest du kein flexbox? Damit hast du viel mehr Gestaltungsfreiheit als mit float und dein Vorhaben ist auch einfacher umzusetzen.
Du vermischt auch % und Pixelwerte, da gehe ich davon aus, dass du damit dann spätestens dann Probleme bekommen wirst, wenn du Anpassungen für unterschiedliche Auflösungen machst.

Wieso verwendest du nicht bootstrap als Grundlage für das Grid und kümmerst dich mehr um das eigentliche Design der Seite? Ich weiß, ich sage dir hier, schmeiß alles weg, was du bis jetzt geschrieben hast. Aber wirklich zeitgemäß ist das leider nicht.

sabrina79 · #3 (**permalink**) 10.07.2018, 21:09

wenn ich das "float: left" beim .full container weglasse, fügt sich der container an komplett falscher stelle auf der Seite ein. da passt noch irgendetwas anderes nicht.

zu flexbox, bootstrap usw.
mache seit 5monaten einen online Kurs webdesign ( Neben Beruf und Familie) und wusste nicht einmal was CSS ist.
Versuche gerade die basics zu lernen, und das ist html und css im dreamweaver. alles andere überfordert mich im moment ehrlich gesagt.
Das design ist erstmal zweitrangig ( ist nur eine theoretische Aufgabe)

Habe aber ehrlich gesagt den überblick über meine Seite verloren und kenne mich eigentlich selbst nicht mehr aus ( denke , weil eben bereits viele Fehler drin sind, die ich aber nicht erkenne)

:/

cloned · #4 (**permalink**) 11.07.2018, 08:28

Von wann ist dieser online Kurs Webdesign? Flexbox gehört heutzutage zu den basics, floats machen dein Vorhaben hier nur unnötig kompliziert. Weil: Wer floatet muss auch clearen (und verstehen, was für Auswirkungen floats auf das Verhalten von Elementen haben).
Wer Floatet muss auch clearen. An der richtigen Stelle bei den richtigen Elementen, so dass der gewünschte Layout-Effekt geschieht. Das ist mit flexbox nicht notwendig.

sabrina79 · #5 (**permalink**) 11.07.2018, 21:15

Zitat:

Zitat von cloned

Von wann ist dieser online Kurs Webdesign? Flexbox gehört heutzutage zu den basics, floats machen dein Vorhaben hier nur unnötig kompliziert. Weil: Wer floatet muss auch clearen (und verstehen, was für Auswirkungen floats auf das Verhalten von Elementen haben).
Wer Floatet muss auch clearen. An der richtigen Stelle bei den richtigen Elementen, so dass der gewünschte Layout-Effekt geschieht. Das ist mit flexbox nicht notwendig.

Werde mich nach dieser Abschlussaufgabe sowieso in Wordpress oder Dreamweaver einarbeiten.
Muss die Aufgabe in den nächsten 2 Wochen abgeben und schaffe es nicht mich mit neuen Dingen (flexbox) zu beschäftigen.

Meinst du, was ich bis jetzt geschrieben habe ist nicht mehr zu retten ??
mit Hilfe von jemandem der sich auskennt !
geht ja eigentlich hauptsächlich um die margin und float Befehle. Und die mediaquery Anpassungen.

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
DIV Höhe 100%	Daniel86	CSS	12	29.07.2011 12:40
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18
ul in div zentrieren	MrMister	CSS	8	05.07.2009 22:52
Linkverhalten im IE6	ChOpSueY!	CSS	19	19.05.2008 22:48
joomla template entschlüsseln	nieselfriem	CSS	2	18.03.2008 13:12