DIVs nebeneinander - Positionierung

[SHo]

Hallo zusammen,

ich habe folgendes Problemchen, für dass es selbstverständlich schon in allen Sprachen diverse Diskussionen im www gibt, ich aber seit gestern Mittag die Lösung leider nicht finden kann:
<strong>Aufgabe:</strong>
-Eine Menüleiste aus Logo und Balken als Bild in 970px mit festgelegter Breite soll immer mittig auf der Seite platziert sein.
-damit der Balken soll links und rechts fortgeführt werden, dazu eine 1px-Grafix per repeat-x eingesetzt, die sich automatisch immer dem Browserfenster/der Auflösung anpasst.

<strong>Lösung bisher:</strong>
-1. Lösung:
Eine Tabelle mit 3 Spalten! Das klappt natürlich ohne viel css etc. durch die Eigenschaft der Tabellenzellen sich fein anzupassen, aber natürlich will der Auftraggeber keine Tabellen
2. Lösung:
Einem div mit Background-repeat mit der 1px-Grafik die Breite width:100% gegeben und per z-index hinter das per margin-left:auto und margin-right:auto positionierte Bild gelegt. Das klappt ganz wunderbar!!Auf einem Minibildschirm sieht man halt nur das Bild, wenn man einen Monsterschirm hat breitet sich der Balken schön aus.

<strong>gewünschte Lösung:</strong>
Fragt nicht warum, aber der Kunde will das mit 3 nebeneinander gefloatetetn divs gelöst wissen. Grrr.
<strong>Problem:</strong>
3 divs floaten ok. Aber 1. WIE sage ich dem mittleren trotz seiner Eigenschaften, dass er das margin-left, margin-right nicht ignoriert. 2. Wenn ich die 3 gefloateteten Divs seitenmittig platziere, dann befüllen sich ja die beiden äußeren nicht automatisch bis zum rand, wenn ich ihnen gar keine Breite gebe (width:auto geht nicht).

Zu umständlich??? :-)
Ich bitte um Enträtselung

/*HEADER************************************/  
#header{  
	width:100%;  
	height:126px;  
	border:solid 2px yellow;  
}  
#leftspace{  
	float:left;  
	height:126px;  
	width:auto;  
	background:url(../img/redstripe.png) repeat-x;  
}  
#menu{  
	float:left;  
	width:970px;  
	height:126px;  
	margin-left:auto;  
	margin-right:auto;  
	background:url(../img/menu.png);  
}  
#rightspace{  
	float:left;  
	height:126px;  
	width:auto;  
	background:url(../img/redstripe.png) repeat-x;

(leftspace, rightspace und menu liegen in header)

[Matthias Apsel]

Om nah hoo pez nyeetz, SHo!

zwei ungetestete Ideen:

• Du könntest für die 3 divs display: table-cell verwenden.
• Du könntest das Linke float:left, das rechte float:right und das mittlere garnicht floaten lassen

Wenn dein Auftraggeber soviel Ahnung hat, dass er dir das Werkzeug zur Gestaltung vorgibt (ich möchte, dass du die Marmorstatue unter Verwendung von Hammer und Schraubendreher modellierst), soll er dir doch gleich die fertige Lösung liefern oder ist es ein Test, was deine Fähigkeiten betrifft?

Matthias

[suit]

Wenn dein Auftraggeber soviel Ahnung hat, dass er dir das Werkzeug zur Gestaltung vorgibt (ich möchte, dass du die Marmorstatue unter Verwendung von Hammer und Schraubendreher modellierst), soll er dir doch gleich die fertige Lösung liefern oder ist es ein Test, was deine Fähigkeiten betrifft?

Ich sehe das wie Matthias: wenn der Kunde das so gelöst haben will, soll er dir auch eine technische Lösung dafür geben, die es imho nicht gibt oder dir zumindest schlüßig erklären, warum die andere Lösung (die ich bei dieser Problemstellung auch angewandt hätte) nicht "geht".

[SHo]

Matthias, suit,

Danke für die Statement, das beruhigt mich ein wenig. Ich finde nämlich meine Lösung auch ganz gut - zumal ich mir 2 divs und die dazugehörigen css-zeilen spare und es zuverlässig in allen browsern klappt! kann gut sein, dass er testen will, ist mein erster freelance-auftrag für ihn. es gibt zig layout vorschläge mit fixen außendivs und dyn. mittlerem..ich hätte jetzt schon gern eine lösung gefunden mit 3 divs, aber mir scheint es auch fast unmöglich, mit der anforderung das mitllere immer mittig und die beiden anderen ohne width automatisch anzupassen...mit display:table-cell probiere ichs noch mal und gebe bescheid, das fänd ich schön, um ihn zu ärgern eigentlich :-)

danke soweit

[SHo]

So..schade eigentlich, mit folgenden Zeilen:

#header{  
	display:table;  
	padding:0px;  
	width:100%;  
	height:126px;  
	text-align:center;  
}  
#leftspace{  
	display:table-cell;  
	height:126px;  
	width:auto;  
	background:url(../img/redstripe.png) repeat-x;  
}  
#menu{  
	display:table-cell;  
	width:970px;  
	height:126px;  
	background:url(../img/menu.png) no-repeat;  
}  
#rightspace{  
	display:table-cell;  
	height:126px;  
	width:auto;  
	background:url(../img/redstripe.png) repeat-x;  
}

siehts zumindest im firefox echt gut aus :-) chrome und IE zeigen aber die äußeren divs nicht an ..

wenn noch jmd eine Idee hat für Floaten und das Mittlere mittig positionieren: her damit!

[Matthias Apsel]

Om nah hoo pez nyeetz, SHo!

wenn noch jmd eine Idee hat für Floaten und das Mittlere mittig positionieren: her damit!

Was gefällt dir an meiner zweiten nicht?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>
    <style type="text/css">
	  html, body {margin: 0; padding: 0;}
          div {height: 123px; background: red;}
	  #links {width: 170px; float: left;}
	  #rechts{width: 170px; float:right;}
	  #mitte {width: 100%; background: green;}
    </style>
  </head>
  <body>
    <div id="links">Links</div>
    <div id="rechts">Rechts</div>
    <div id="mitte">Mitte</div>
  </body>
</html>

Dass "links", "rechts", "mitte" keine coolen Bezeichner sind, brauche ich wohl nicht zu erwähnen.

Matthias

[SHo]

..das gefällt mir schon und ich hatte das auch ausprobiert, hätt ich viell. sagenh sollen :-)

• wenn ich deinen Code nehme und das fenster verkleinere, verdecken die äußeren divs das mittlere (z-index funktioniert nicht)
• wenn ich dann in #mitte mein bild mit 970px als background packe, "rutscht" es nach links
• wenn man dann noch den Text "Links" und "Rechts" aus den äußeren DIVs nimmt sind sie weg :-) eine feste Breite, wie in deinem Beispiel die 127px sollen sie ja nicht haben, damit sie den mittelteil nicht verdecken, sondern immer den bildschirmrest zum rand auffüllen
  hm...

[Matthias Apsel]

Om nah hoo pez nyeetz, SHo!

..das gefällt mir schon und ich hatte das auch ausprobiert, hätt ich viell. sagenh sollen :-)

• wenn ich deinen Code nehme und das fenster verkleinere, verdecken die äußeren divs das mittlere (z-index funktioniert nicht)

z-index: wirkt nur auf Elemente, die eine von "static" verschiedene Positionierung haben, #mitte braucht dann eine Breite und margin: 0 auto;

• wenn ich dann in #mitte mein bild mit 970px als background packe, "rutscht" es nach links

dagegen hilft background-position: top center;

• wenn man dann noch den Text "Links" und "Rechts" aus den äußeren DIVs nimmt sind sie weg :-) eine feste Breite, wie in deinem Beispiel die 127px sollen sie ja nicht haben, damit sie den mittelteil nicht verdecken, sondern immer den bildschirmrest zum rand auffüllen

#links und #rechts könnten dann auch eine Breite von 40% o.ä. bekommen

Matthias

[SHo]

..Vielen Dank noch mal,
ich habe Diene Hinweise noch eingebaut, allerdings bleibe ich dann bei meiner ersten Lösung, weil, wenn ich links und rechts dann auch eine Breite von x% zuweise, liegen sie ja auch eh fast komplett unter dem Bild. Es scheint per float einfach die bessere Lösung -- aber eure Tipps haben mir trotzdem geholfen für die Zukunft :-)