zentriertes Div-Layout

Neues Thema verfassen Neues Thema

Hirami
Member

Registriert: 15.04.2007
Beitraege: 89

26.02.2008 um 19:45 Uhr

Moin.
Da ich meinen alten Thread dazu irgendwie nichtmehr finde (oder grade zu bld dazu bin ) bin ich mal so frei..
Hab mich mal nach ner Ewigkeit wieder hingesetzt und ein Bildchen fr ein Layout gebastelt, und jetzt steh ich wieder vor dem Problem, wie coden..
Ich hab bisher noch nichts mit divs gemacht (immer nur iframes ^^'', hab zwar denk ich das Grundprinzip verstanden aber in der Umsetzung happerts noch gewaltig. Ich denke ich brucht einfach mal ne gut berschaubare Vorlage, bei der ich dann abgucken kann oder so..
Naja, lange Rede kurzer Sinn, es geht um folgendes Bild:
[ klicku ]
Ich bruchte entweder ein Tutorial das gut erklrt wie man diese Art von Layout am besten codet (es sollte zentriert sein), oder jemanden der's mir zeigen kann ^^''
Danke schonmal.

baii,
Hirami-chan

Edit: Danke ^^

Der Beitrag wurde insgesamt 2 mal editiert, zuletzt 26.02.2008 um 22:47 Uhr ...

Antworten Zitat
MindFreak
Newbie

Registriert: 16.02.2008
Beitraege: 16

27.02.2008 um 15:18 Uhr

also mit divs geht es am besten =)

Super wenn due Dreamweaver httest damit kannst du die Div super verschieben/vergrern ^^

als ein div sieht so aus:

div style="position: absolute; width: 437px; height: 324px; left:19px; top:123px"

nur vorne musst du ein < und hinten ein > machen =)

also ich denke die namen width und so erklren sich von selber wenn du noch probleme hast einfach melden =)

Antworten Zitat
Hirami
Member

Registriert: 15.04.2007
Beitraege: 89

27.02.2008 um 16:07 Uhr

huhu ^^
danke erstmal, das war aber nicht was ich meinte. Ich htte gerne eine Erklrung/Guide/Code, wie man das Layoutbild und den Hintergrund dafr immer exakt in die Mitte kriegt und wie man dann die einzelnen Mens am besten platziert, damit die auch je nach Fensterbreite am richtigen Platz sind.
Vielleicht hat da ja jemand nen Guide fr, oder lsst sich das nur mit Tables machen?

Antworten Zitat
Hirami
Member

Registriert: 15.04.2007
Beitraege: 89

27.02.2008 um 16:07 Uhr

Hoppla.. Alice, dein Forum spuckt ne Fehlermeldung aus, postet trotzdem, mag jetzt nicht nochmal auf zurck drcken sonst postet es den Beitrag nochmal

Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 27.02.2008 um 16:08 Uhr ...

Antworten Zitat
MindFreak
Newbie

Registriert: 16.02.2008
Beitraege: 16

27.02.2008 um 19:36 Uhr

also div

http://nekoji.de/Tutorials/tutorial.php?id=191

oder wenn du eine art table machen willst aber viel freundlicher fr die browser/user dann hier

http://nekoji.de/Tutorials/tutorial.php?id=287

Antworten Zitat

Alice

Admin

Registriert: 14.12.2006
Beitraege: 1058

28.02.2008 um 13:36 Uhr

Hallo Hirami,

ich haette die Grafik anders erstellt,
dann waere es viel ein einfacher gewesen...

Naemlich ohne Hintergrundbild ....

Den Hintergrund kannst du spaeter mit CSS bestimmen, dazu reicht dir eine kleine Grafik die kachelbar ist

Die Grafik haette ich wie wie folgt zerschnippelt:

Der Header ...

Fuer den Contentbereich ...

Oberes Teil

Mittleres Teil, welches per CSS dazu veranlasst wird sich zu wiederholen

Unteres Teil

Fuer die Boxen jeweils rechts und links,
das selbe Spiel wie schon mit dem Content

Oberer Teil

Mittlerer Teil, welcher per CSS dazu gebracht wird sich nach unten hin zu wiederholen, bei bedarf

Unterer Teil

Nun gehst du her und erstellst dir 3 Div-Container,

<div id="links">fuer die linke spalte, bekommt eine feste Breite per CSS verpasst</div> 
<div id="mitte">fuer die mittlere Spalte, bekommt eine feste Breite per CSS verpasst>/div>
 <div id="rechts">fuer die rechte Spalte, bekommt eine feste Breite per CSS verpasst</div>

Diese 3 Div's packst du in noch ein Div,
welchem du per CSS margin: 0px auto; zuweist ...

<dic id="warper">
<div id="links">fuer die linke spalte</div> 
<div id="mitte">fuer die mittlere Spalte</div>
 <div id="rechts">fuer die rechte Spalte</div>
</div>

Das Div id="links" bekommt per CSS float: left; zugewiesen, genauso wie das mittlere Div auch,
so dass diese sich nun nebeneinander befinden, anstatt untereinander.

Damit haettest du dann schonmal das Grundgeruest , durch das Div id="warper" werden die andern drei nun immer mittig gehalten ...

Fuer den Content brauchst du 3 Div's

<div id="content_oben>
bekommt als Hintergrundbild die Grafik fuer den oberen Teil des Contents, per CSS zugewiese,es muss eine Hoehe definiert werden, damit auch die ganze Grafik sichtbar ist
#content_oben{
background: url(content_oben.jpg) no-repeat;
height: 38px;
width: 632px;
}
</div>
<div id="content_mitte">
die mittlere Grafik wird diesem Div, als Hintergrundgrafik per CSS zugewiesen

#content_mitte{
background: url(content_mitte.jpg) repeat-z;
width: 632px;
}
</div>
<div id="content_unten">

bekommt als HG Bild die untere Grafik zugewiesen, auch mit fester Hoehe, damit die ganze Grafik sichtbar ist

#content_unten{
background: url(content_unten.jpg) no-repaet;
height: 37px;
width: 632px;
}
</div>

Der Content waechst bei viel Text nun nach unten hin mit...

Fuer die Boxen machst du das Selbe wie fuer den Content, aber mit einer class anstatt einer ID,
damit die CSS Anweisung mehrmals auf der Seite verwendet werden kann...

<div class="box_oben"></div>
<div class="box_mitte"></div>
<div class="box_unten"></div>

So sieht dann das komplette Konstruckt aus ...

<dic id="warper">

<div id="links">
<div class="box_oben"></div>
<div class="box_mitte"></div>
<div class="box_unten"></div>

<br /><br />

<div class="box_oben"></div>
<div class="box_mitte"></div>
<div class="box_unten"></div>
</div>

<div id="mitte">

<div id="header">Headergrafik</div>

<div id="content_oben"></div>
<div id=content_mitte">
Lorem ipsum dolor sit amet, consectetur, adipisci velit 
</div>
<div id="conent_unten"></div>

</div>


<div id="rechts">
<div class="box_oben"></div>
<div class="box_mitte"></div>
<div class="box_unten"></div>
<br /><br />
<div class="box_oben"></div>
<div class="box_mitte"></div>
<div class="box_unten"></div>
</div>

</div>

... { signatur } ...

Antworten

Zitat

Hirami
Member

Registriert: 15.04.2007
Beitraege: 89

28.02.2008 um 20:04 Uhr

Huhu ^^
erstmal vielen dank, hab mich auch gleich mal rangemacht um es zu testen.
Prinzip hab ich denk ich verstanden, nur irgendwo hunzt's.. irgendwo muss ein Fehler drin sein, die Zentrierung und die Navigationen wollen nicht klappen...

Habs mal hochgeladen..:

style.css
index.html
images

(Die Bilder passen vom Aussehen her noch nicht ganz zusammen, aber das kann ich ja spter noch ndern..)

Divs verwirren mich..

Antworten Zitat

Alice

Admin

Registriert: 14.12.2006
Beitraege: 1058

28.02.2008 um 21:48 Uhr

Wenn du ein Div all

<div class="gemuese">tomate</div>

hast dann muss dieses in der CSS auch mit

.gemuese{ color: #fff;}

angesprochen werden und nich mit

#gemuse{color: #fff;}

Die Raute(#) ist immer fuer id="blabla" zustaendig und der Punkt(.) fuer class="blabla"

Aehm ja ich vergass dopelltes float kommt nicht so gut,
tausch mal die position vom div recht mit dem div mitte

Index:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> 

<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

<div id="warper">

<div id="links"> </div>

<div id="rechts"> </div>

<div id="mitte"> </div>

</div>

</body>
</html>

CSS, so passen

body {
    color: #435466;
    background: url(images/background.jpg) repeat;
    font: normal 11px Verdana;
    margin: 0px;
    padding: 0px:  
}

#warper{
	width: 1050px;
	margin: 0px auto;
}

#links {
	float: left;
	width: 200px;
	margin: 0px;
	padding: 0px;
}

#mitte {
	padding: 0px;
	margin: 0px 200px;	
}

#rechts {
	float: right;
	width: 200px;
	margin: 0;
	padding: 0;
}


#header {

background: url(images/header.jpg) no-repeat;
	height: 208px;
	width: 633px;
}

#content_oben {

background: url(images/content_top.jpg) no-repeat;
	height: 36px;
	width: 633px;
}

#content_mitte {

background: url(images/content_mid.jpg) repeat-y;
	width: 559px;
	padding: 0px 37px 0px 37px;
}

#content_unten {

background: url(images/content_down.jpg) no-repeat;
	height: 36px;
	width: 633px;
}

.navi_oben {

background: url(images/navi_top.jpg) no-repeat;
	height: 26px;
	width: 168px;
}

.navi_mitte_s {

background: url(images/navi_small_mid.jpg) repeat-y;
	width: 118px;
	padding: 0px 25px 0px 25px;
}

.navi_mitte_b {

background: url(images/navi_big_mid.jpg) repeat-y;
	width: 118px;
	padding: 0px 25px 0px 25px; 
}

.navi_unten {

background: url(images/navi_down.jpg) no-repeat;
	height: 25px;
	width: 168px;
}

#content_mitte is zB. schmaeler,
weil man das Padding von der Breite/Hoehe abziehen sollte, dann stimmt es auch in andern Browsern ...

Liebe Gruesse Alice

... { signatur } ...

Antworten

Zitat

Hirami
Member

Registriert: 15.04.2007
Beitraege: 89

28.02.2008 um 22:12 Uhr

ah.. hatte mit dem punkt und raute nochmal kurz nachgegoogelt aber nix berzeugendes gefunden ^^'' Wieder was gelernt *swt*
so, hab das jetzt mal so umgesetzt, und es klappt *-* dankeschn!
Naja.. fast zumindest... Internetexplorer zickt rum.. ><
[klick]
In firefox ist es schn zentriert und alles, aber ie stckelt da den hintergrund an der rechten seite weg weil die breite ja kleiner ist...
Kann man auch die Breite vom Hintergrundbild angeben, zustzlich zur Div-Breite?
*verwirrt ist.*
*SelfHtml absuch*

E: Okay, das ganze shice IE spinnt rum, das will auch nicht zentrieren.. *ie hass*

Aber vielen dank fr deine Hilfe Alice! @.@ *verbeug*

Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 28.02.2008 um 22:26 Uhr ...

Antworten Zitat
Alice
Admin

Registriert: 14.12.2006
Beitraege: 1058

29.02.2008 um 01:33 Uhr

So jetzt schaust du mal bitte genau nach,
was ich dir gepostet hatte unter Index ...

Und dann schauste dir deine Index nochmal genau an,
dann wirst du bestimmt feststellen,
dass du keinen Doctype angegeben hast!

Wenn kein Doctype gesetzt ist,
dann verfaellt der IE automatisch in den Quriksmodus,
dieser ruft bei deinem Layout dieses nette Aussehen hervor!

Also Doctype angeben und die Sache sollte gegessen sein

Liebe Gruesse Alice

... { signatur } ...

Antworten Zitat