Zur Navigation

Positionierung [2]

11 Jörg Kruse

Ich würde versuchen, so vorzugehen:

Im Header den mittleren Teil der Grafik als Hintergrundbild einbinden. Den linken und rechten Teil als img, welches mit float:left bzw. float:right angeordnet wird

<div style="background-image:url(oben-mitte.gif)"><img src="oben-links.gif" style="float:left"><img src="oben-rechts.gif" style="float:right"></div>

Beim mittleren Teil könntest du gegebenenfalls auf Grafiken verzichten, indem du die border über CSS definierst:

<div style="border-left:solid 1px #999; border-right:solid 1px #999">Content</div>

Damit die border genau passt, muss man nur den Farbwert richtig wählen und mit einem passenden margin-Wert die Position justieren. Den unteren Bereich gestaltet man dann wie den oberen

15.06.2006 17:26 | geändert: 15.06.2006 17:27

12 tommik

Hey, danke. Klappt wunderbar.
Allerdings habe ich noch eine Frage. Kann man es so gestalten, dass sich der Content automatisch anpasst?
Wenn man jetzt das Browserfesnter z.B auf 800x600 verkleinert, so ist der Contentbereich zwar kleiner geworden, allerdings rutscht das rechte Menü nach unten. Kann man es so machen, dass der Content einfach wirklich arg verkleinert wird, dafür aber das rechte Menü erhalten bleibt?

// Edit:
Habe nun den Code des rechten Menüs sofort nach dem linken Menü verschoben. Jetzt verschiebt sich nur der Content nach unten, ab einer Auflösung von 1024*768 und niedriger.

// Edit2:
Das Ende des Contents ist verschoben.
Wenn ich den Code so schreibe:

<div style="background-image:url(images/content_header_puffer.gif);float:left;padding:0;margin-top:125px;margin-left:15px;width:73%;"><img src="images/content_header_left.gif" style="float:left"><img src="images/content_header_right.gif" style="float:right"></div>

<div style="background-image:url(images/content_bottom_puffer.gif);position:relative;float:left;padding:0;margin-top:125px;margin-left:15px;width:73%;"><img src="images/content_bottom_left.gif" style="float:left"><img src="images/content_bottom_right.gif" style="float:right"></div>

<div style="border-left:solid 1px #888888; border-right:solid 1px #888888;float:left;padding:0;margin-top:125px;margin-left:15px;width:73%;">Content</div>

klappt es... Allerdings soll der Content zum schreiben ja in der Mitte sein...

15.06.2006 17:38 | geändert: 15.06.2006 18:13

13 Jörg Kruse

Achso, das Problem wird vielleicht durch die beiden floats verursacht - man kann das Umfließen mit einem clear:both wieder beendet, so dass nachfolgende Elemente nicht mehr vom dem float betroffen sind:

<div style="background-image:url(images/content_header_puffer.gif);float:left;padding:0;margin-top:125px;margin-left:15px;width:73%;"><img src="images/content_header_left.gif" style="float:left"><img src="images/content_header_right.gif" style="float:right"></div>

<div style="border-left:solid 1px #888888; border-right:solid 1px #888888;float:left;padding:0;margin-top:125px;margin-left:15px;width:73%;">Content</div>

<div style="background-image:url(images/content_bottom_puffer.gif);position:relative;float:left;padding:0;margin-top:125px;margin-left:15px;width:73%;"><img src="images/content_bottom_left.gif" style="float:left"><img src="images/content_bottom_right.gif" style="float:right"></div>

<br style="clear:both">

15.06.2006 18:50

14 tommik

Bei einer Auflösung von 800x600 sieht das ganze allerdings so aus:
http://images.tp-server.de/screen3.jpg

:-/

15.06.2006 18:54

15 Jörg Kruse

Stimmt, das Problem liegt woanders: du addierst absolute mit prozentualen Breitenangaben:

142px + 73% + 142px (Menü + Content + Menü)

So etwas geht immer nur bei einer bestimmten Bildschirmauflösung auf (hier: 1024 * 768), darunter wird es zu eng, darüber entstehen Lücken.

Das Problem löst man dadurch, dass man die Angabe width:73% rausnimmt, dann passt der Browser den Content unabhängig von der Auflösung an. Allerdings werden dann womöglich die Hintergrund-Grafiken ober- und unterhalb nicht mehr in voller Breite angeziegt ...?

15.06.2006 19:40 | geändert: 15.06.2006 19:41

16 tommik

Naja, dann sitzt der gesamte Contentbereich ganz unten. Und der Contentpuffer (zum reinschreiben) hat nur die Länge des Textes...

15.06.2006 19:43

17 Jörg Kruse

Ja, die Breite wird ja für das Floaten benötigt.. :/

Das bisherige Konzept geht wohl nur auf, wenn die Menuleisten auch flexibel in der Breite sind:

13% + 73% + 13% (Menü + Content + Menü)

Oder man geht das ganze komplett anders an:

Die drei Content-Divs erhalten eine Breite von 100% und ein padding-left und ein padding-right von jeweils etwas mehr als 142px.

Die Menüs werden dann absolut über den leeren Innenanstand positioniert

.menu {
position:absolute;
width:142px;
padding:0;
top:125px;
left:5px;
}

.menu_rechts {
position:absolute;
width:142px;
padding:0;
top:125px;
right:5px;
}

Das sollte bei mehreren Bildschimauflösungen aufgehen

15.06.2006 20:06 | geändert: 15.06.2006 20:07

19 Jörg Kruse

Du hast noch einen Fehler von mir übernommen, den ich nachträglich editiert habe - in position fehlte noch ein i:

/* rechte Navigation */
.menu_rechts {
position:absolute;
width:142px;
padding:0;
top:125px;
right:5px;
}

Dann habe ich vergessen, dass die Browser das padding zur Breitenangabe von 100% hinzurechnen, die width:100%; muss man also wieder rausnehmen. Wie schaut die Seite dann aus: Der Content sollte sich auch so anpassen - aber die oberen und unteren Hintergrundgrafiken sind eventuell nicht breit genug?

15.06.2006 20:48 | geändert: 15.06.2006 20:48

20 tommik

Schau mal hier

Irgendwie passt das noch nicht ganz :-D
Der Puffer vom Content wird nun ganz durchgezogen und der gesamte Contentbereich geht druch das rechte Menü.

15.06.2006 20:54