zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Website responsive, div container zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.07.2018, 22:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard Website responsive, div container zentrieren

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

<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 -->
<footer id="site-footer"></footer>

</div> <!-- wrapper end-->

</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) {
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.07.2018, 09:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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

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)

:/
Mit Zitat antworten
  #4 (permalink)  
Alt 11.07.2018, 09:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 11.07.2018, 22:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
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.
Mit Zitat antworten
Antwort

Stichwörter
css, div container zentrieren, html, responsive

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:37 Uhr.