Probleme mit Position / Höhe

[aminox]

Hallo,

ich habe von einem Kumpel einen Designentwurf bekommen, allerdings habe ich Probleme beim Umsetzen.

http://tiny.cc/znody

zwischen den oberen Teil und dem Unteren hätte ich gerne einen "Schattenrand". Ich hatte mir das so überlegt,
dass ich dazwischen einen Wrapper mache der eine Box mit

float: left

und eine mit

float: right

;
dazwischen der Content.
Allerdings hat das nie so hingehauen. Kann mir jemand weiterhelfen? Bin ich mit meinem geCSSe auf dem falschen Weg?

Danke.

Grüße

 

[Maik]

Hi,

da das Layout auf einer absoluten Breite basiert, erstellst du eine Grafikdatei, die den linken und rechten Schattenwurf enthält, und verwendest sie als vertikal zu wiederholendes Hintergrundbild für eines der Elternelemente, womit die äußeren DIV-Blöcke im Code entfallen.

Gleiches könntest du übrigens auch für die anderen Bereiche umsetzen, die zudem eine absolute Höhe besitzen, und auf diese Weise auch dort den HTML-/CSS-Code verschlanken.

Mein zweitgenanntes Tutorial in der Signatur dürfte für dich hier auch von Interesse sein, wenn es darum geht, dass das Layout mitwächst, wenn der Inhaltsumfang die Höhe des Viewports überschreitet, und der Footer-Bereich nach unten verrückt wird, und nicht seine Ausgangsposition bottom:0 im Fenster beibehält, wenn die Seite gescrollt wird, sodass der Inhalt unter ihm hindurchläuft, denn das dürfte bei dir derzeit so eintreten

mfg Maik

 

[aminox]

Danke, die Idee ist gar nicht mal so übel
Danke auch für den Hinweis zum Tutorial, werde ich mir mal zu Gemüte führen

 

[Maik]

Ganz vergessen :-(

Wo es zur angesprochenen Footer-Problematik paßt

Webmaster FAQ -> CSS Wie lässt sich der Footer am unteren Fensterrand ausrichten?

mfg Maik

 

[aminox]

Ich habe dann noch eine Frage.
Bei der Navigation verwende ich eine UL, soweit kein Problem. Ich hätte aber gerne für jedes LI ein Hintergrundbild, welches 111x52 Pixel groß ist, die Schrift dort mittig Platziert.
Soweit ich das im Kopf habe, lässt sich das dann mit Padding angaben irgendwie realisieren?

 

[Maik]

Soll die Linkbeschreibung im <a>-Element horizontal und vertikal zentriert werden?

li a {
display:block; /* Inline-Element erhält "Block-Level-Charakteristika" */
text-align:center; /* horizontale Zentrierung des Elementinhalts */
line-height:52px; /* vertikale Zentrierung des (einzeiligen) Elementinhalts */
}

mfg Maik