Herangehensweise: Vom grafischen Layout zum CSS-Layout

[atomwilli]

Moin moin,

ich erstell gerade ne Website - die erste mit CSS! Die letzten von mir erstellten Websites liegen schon etwas zurück und damals habe ich auf Tabellen zurückgegriffen.

Ich würde, von der Herangehensweise, folgendes machen:
Mein grafisches Layout nehmen und in Abschnitte (Content, Navigation etc.) unterteilen. Diese dann wieder unterteilen, wenn sinnvoll. So dass ich am Ende ein Konstrukt aus Boxen habe, die ich dann in CSS abbilde und schließlich in HTML einander verschachtel. Am Ende sollte es dann wieder wie die Grafik aussehen.

Ist das grundsätzlich richtig?

Ich hab im Anhang mal markiert, wie ich das meine. Ich habe mein Layout, hinten das schwarze ist die oberste CSS-Box. Darin kommt eine für die Navigation, eine für den Inhalt (rot). Darin wieder neuen Boxen (hier in grün: Logo und Menü / linker und rechter Inhaltsbereich).

Macht das Sinn oder ist das Verschachteln von drei-vier Divs totaler Quatsch und es geht auch alles besser und sauberer?

Ich freu mich über eine kurze Hilfe bevor ich anfange

[Settler]

das Verschachteln von DIVs ist OK.
Achte auf die Regeln von DIVs zwecks Vererbung, Auswirkung von äußeren DIVs (Border, Koordinaten), das kann einen am Anfang wahnsinnig (machen) viel Zeit kosten.

[atomwilli]

okay, danke.

die nächsten fragen kommen bestimmt...

[webcreate]

Soweit eigentlich ok, jedoch würde ich da mehr extrahieren.

Oben einen Div (header) das Logo einfach als img einbinden und via css daneben dann die Navi als <ul>.

Mitte zwei Divs nebeneinander (flaoten) (content, highlights)

Unten einen weiteren Div (footer).

Zu sehr verschachtelt gibt es dann eine Div-Suppe und der Code wird unübersichtlich.
Nutze nicht überall einen DIV sondern achte mehr auf semantischen Code.

[atomwilli]

Moin,

danke schonmal.

Ich hab's, bevor ich deinen Kommentar gelesen habe, schon umgesetzt. Es sieht einigermaßen passend aus, viele Feinheiten stimmen noch nicht.
Nur sind recht viele Divs drin.

Könntet ihr einmal drüber gucken, ob man das so machen kann? Oder ist das unsauberer/unsinniger Code?

--> http://www.webambiente.de/edv/index.htm

Wie würde ich es bei ner Navi als <ul> hinbekommen, dass der Text immer mittig in den Buttons steht? Ich hab jetzt die Buttonleiste als Hintergrundgrafik eingebunden (wechselt dann halt immer, je nachdem welcher Unterseite angewählt ist) und darauf fünf Divs gesetzt und absolut platziert, für jeden Menüpunkt eins.

[webcreate]

Ich würde die Hintergrundgrafik nicht für jeden Menüpunkt anlegen.
Damit bist Du nicht sehr dynamisch, da Du für jeden Menüpunkt alle Grafiken neu erstellen musst.
Erstelle nur 2 Grafiken, eine für inaktiv und eine für aktiv.
Dann erstellst Du eine Liste, die dann immer einen Link enthält, welcher immer eine neue ID hat (Bsp: l1, l2, usw).
Diesen Links weißt Du mittels CSS für den a-Tag als Hintergrundgrafik die "inaktiv" Grafik zu.

Die "aktiv" Grafik bekommt der Link eines Listenelements dann über eine ID des body-Tags (Bsp: page1, page2, usw.).
Genauer gesagt durch die Verschachtelung der Link-ID in der Body-ID (body#page1 #navi li#l1 a).
Damit wird die ungenauere vorherige Zuweisung überschrieben.

Was den mittigen Text angeht, da nutzt man einmal text-align:center und zudem gibt man dem Links mittels padding-top noch einen Wert mit,
bis es passt, das muss man halt an seinen Grafiken austesten.

Ich hoffe damit ist das Prinzip klar.

[atomwilli]

Super, danke für deine Hilfe!

Ich hab's jetzt etwas umgebaut und statt mit Klassen mit IDs gearbeitet, damit bei den einzelnen Seiten den "aktiven" Link dynamisch hervorgehoben wird. Und die Navigation in Form einer List erstellt.

Mit Padding-top hatte ich das Problem, dass im IE dann immer eine Lücke unterhalb der Navigation auftauchte. Hab's jetzt gelöst, in dem ich dem padding-top der Content-Box einen negativen Wert zugewiesen hab. Damit geht's im IE und FF.

Hier nochmal der Code:

#navigation {
	background: #5182bd;
	height:70px;
	width: 940px;
	margin: 30px auto 0 auto;
}

#navigation img{
	float: left;
}

#navigation li{
	padding-top: 36px;
	height: 34px;
}

#navigation li{
	float: left; 
	list-style: none;  
	margin: 0 2px;
	text-align: center;
}

#navigation li a{
	display: block;
	padding-top: 12px;
}

#spacer{
	width:45px;
}

#navigation li#n1 a,	
#navigation li#n2 a,
#navigation li#n3 a,
#navigation li#n4 a,
#navigation li#n5 a{	
	background-image: url(img/button_passiv.jpg);
	background-repeat: no-repeat;
	width: 110px;
	height: 34px;
	text-decoration: none;
	font-size: .8em;
    font-family: arial;
    font-weight: 700;
	color: #032465;
}

body#startseite #navigation li#n1 a,
body#unternehmen #navigation li#n2 a,
body#angebot #navigation li#n3 a,
body#kontakt #navigation li#n4 a,
body#login #navigation li#n5 a{
	background-image: url(img/button_aktiv.jpg);
	background-repeat: no-repeat;

#content{
	clear: both;
	background-color:#DEE2E7;
	width: 850px;
	margin: -12px auto;
	border-style:solid;
	border-color:white;
	border-width:15px;
	padding:50px 30px 30px 30px;
}