nicht angemeldet
Neun div-Bereiche
Hallo,
Ich möchte auf meinem Bildschirm mittig (!) ein Feld mit neun Bereichen anzeigen lassen:
|-------------------|--------------------------|--------------------|
| Logo-Div (1) | (2) |Impressum-Link (3) |
|-------------------|--------------------------|--------------------|
| Menü-div | Haupt-Inhalt | Banner |
| | | |
| (4) | (5) | (6) |
| | | |
|-------------------|--------------------------|--------------------|
| (7) | (8) | (9) |
|-------------------|--------------------------|--------------------|
Die Felder die ich nicht beschriftet habe enthalten nur Hintergrundgrafiken, also runde Ecken und so. Alle Felder sollen eine feste Breite, außer die mittlere Zeile auch eine feste Höhe haben. Alle divs sollten direkt aneinander grenzen, also ohne "Leerzeilen".
Früher hätte ich es wohl mit einer Tabelle gemacht, ich wollte es aber mal in einem div-CSS-Layout probieren.
Was empfehlt Ihr, wie ich die Styles für die divs setzen sollte?
Danke,
Andreas
-
hi,
Ich möchte auf meinem Bildschirm mittig (!) ein Feld mit neun Bereichen anzeigen lassen:
also das ganze gesumse, das du im folgenden entwickelst, am besten schon mal in einen weiteren umschliessenden div packen, und dann nur noch diesen zentrieren - vereinfacht die sache.
|-------------------|--------------------------|--------------------|
| Logo-Div (1) | (2) |Impressum-Link (3) |
|-------------------|--------------------------|--------------------|
| Menü-div | Haupt-Inhalt | Banner |
| | | |
| (4) | (5) | (6) |
| | | |
|-------------------|--------------------------|--------------------|
| (7) | (8) | (9) |
|-------------------|--------------------------|--------------------|Die Felder die ich nicht beschriftet habe enthalten nur Hintergrundgrafiken, also runde Ecken und so.
Alle Felder sollen eine feste Breite, außer die mittlere Zeile auch eine feste Höhe haben.wenn die breite eh fest ist, kannst du unten statt (7), (8), (9) doch gleich einen einzigen div machen, der ein grosses hintergrundbild enthält.
Alle divs sollten direkt aneinander grenzen, also ohne "Leerzeilen".
die mittleren bereich sind dann wohl am besten über float nebeneinander zu positionieren.
und für die obere "zeile" würde ich das gleiche empfehlen, wie für unten: nur einen einzigen div, der das logo ebenfalls mit ins hintergrundbild eingebunden enthält, und der link für's impressum ist dann der einzige wirkliche inhalt dieses divs, und wird ünber text-align rechts positioniert.
gruss,
wahsaga-
wenn die breite eh fest ist, kannst du unten statt (7), (8), (9) doch gleich einen einzigen div machen, der ein grosses hintergrundbild enthält.
Aus logischen Gründen möchte ich sie trotzdem trennen, also meine neun logischen Bereich beibehalten ...
Ich fange mal an:
<div id="aussen" style="margin-left:auto; margin-right:auto;">
<div id="nr1" style="width:100px; height:50px;"></div>
<div id="nr2" style="width:550px; height:50px;">Hier kommt dann das Menü rein.</div>
<div id="nr3" style="width:100px; height:50px;"><a href="">Impressum</a></div>
<div id="nr4" style="float:???;"></div>
<div id="nr5" style="float:???;">
<h1>Dieses ist der Contentbereich</h1>
<p>...</p>
</div><div id="nr6" style="float:???;"></div>
<div id="nr7" style="width:100px; height:50px;"></div>
<div id="nr8" style="width:550px; height:50px;"></div>
<div id="nr9" style="width:100px; height:50px;"></div>
</div>
Warum eigentlich float? Ich will doch nix umfließen lassen.
Ist das so schon ein erster Ansatz? Die runden Ecken würde ich per backgroud-Styles in die entsprechenden divs einbinden.
Ich habe noch nie mit solcher Technik gearbeitet, aber ich will es mir ja hier erarbeiten.
Andreas
-
hi,
<div id="aussen" style="margin-left:auto; margin-right:auto;">
text-align:center für das übergeordnete element nicht vergessen - mit margin:auto kommt der IE in diesem falle nicht klar.
(für den div dann evtl. wieder text-align:left setzen, um zur "normalität" zurückzukehren.)Warum eigentlich float? Ich will doch nix umfließen lassen.
wie sonst bekommst du block level elemente _nebeneinander_?
klar, mit absoluter positionierung vielleicht - halte ich in diesem falle aber für überflüssig und über's ziel hinausgeschossen.
gruss,
wahsaga
-
-