Boxen positionieren

[Alaniak]

Hi Leute hab da ein Problem. Und zwar möchte ich drei Container in einem Hauptcontainer (als gesamter Headerbereich) anordnen. Die ersten zwei neben einander und einer darunter. Ich hab mal ein Screen gemacht, damit das verdeutlicht wird.
http://img229.imageshack.us/my.php?image=screen7en.jpg
Der rote ist der Hauptcontainer in den die anderen drei reinkommen. In den lilanen kommt ein Bild von einem Logo. Im blauen kommt eine Navigation und in den grüne kommt das Headerbild.
Beim IE klappt das wunderbar. Nur beim Firefox wird der grüne Header-Container entweder unter oder über die oberen Container geschoben.

Hier ist mal der Code:

#header
{
	position: static;
}

#headerback
{
	height: 224px;
	width: 100%;
	background-image: url(header.jpg);
	background-repeat:no-repeat
}

#logo
{
	float: left;
	height: 50px;
	position: relative;
	width: 50%;
}

#subnav
{
	float: right;
	height: 50px;
	position: relative;
	width: 50%;
}

 

[fish-guts]

Moin

Gleich vorneweg: Wenn etwas im IE "richtig" dargestellt wird, und im FF nicht, ist meistens NICHT der FF Schuld.

Lies doch mal den SelfHTML-Artikel über Browserweichen : Click me

Dort werden solche Fälle gut erklärt.

Gruss

FG

 

[Quaese]

Hi,

sehr wenig Informationen, die du lieferst.

Mit nachstehendem HTML-Code und den CSS-Definitionen, die du angegeben hast, habe ich keine
Anzeigeprobleme im Firefox (DOCTYPE 4.01 Strict).

<div id="header">
  <div id="logo">logo</div>
  <div id="subnav">subnav</div>
  <div id="headerback">headerback</div>
</div>

Soll es wie auf deinem Bild aussehen, wirst du wohl am Schachteln von DIVs nicht vorbei kommen.

Ciao
Quaese

 

[dark_ghost]

Hallo,

dieses Problem hatte ich auch schon mal und habe es folgendermaßen gelöst.
Es gibt einen so genannten "z-index", mit diesem kannst du festlegen wie sich bestimmte Elemente überlagern sollen.
Zum Verständnis: z-index:1 wird von z-index:2 überlagert, 2 von 3, usw.

In deinem Fall bedeutet das, dass dein roter hintergrund z-index:1 ist und die andern 3 die darüber gelegt werden bekommen alle z-index:2

header
{
	position: static;
z-index:1;
}
 
#headerback
{
	height: 224px;
	width: 100%;
	background-image: url(header.jpg);
	background-repeat:no-repeat
z-index:2;
}
 
#logo
{
	float: left;
	height: 50px;
	position: relative;
	width: 50%;
z-index:2;
}
 
#subnav
{
	float: right;
	height: 50px;
	position: relative;
	width: 50%;
z-index:2;
}

Hier habe ich dir das mal deinem Code hinzugefügt.
Der rote Hintergrund, der ja z-index:1 ist wird von den anderen 3en überlagert da diese den z-indexwert 2 besitzen.

Am besten positionierst du alle divs mit position absolute, dann kannst du die schieben wie du möchtest.

Gruß
Andi