Hilfe benötigt (z-index)

[blazehawk]

Hallo, Forum
Frage: Wie bekomm ich auf meiner Seite (klick) möglichst einfach (nicht zwingend mit z-indexing aber am besten auch ohne Tabellen) eine "Box" über die "lines" 4 bis 6?
Die Box darf ihren Platz auch nicht verändern und muss an der Stelle des Designs bleiben, auch wenn man die Seite verschiebt (es soll ein Untermenü dort herein).
Den Link zur Css-Datei gibts hier: klick

Da die Style.css ja nicht formatiert ist hier einmal ordentlich :

/* ############################ [ style.css ] ############################# */
/* ################################ Parts ################################# */

#window
{
 width:770px;
 height:auto;
 margin:20px auto;
 text-align:left;
 display:block;
 background-color:#FFFFFF;
 border:1px solid #000000;
}

#line1
{
 height:10px;
 display:block;
 background-image:url(lightred.jpg);
 border-bottom:1px solid #000000;
}

#line2
{
 height:60px;
 display:block;
 background-image:url(darkred.jpg);
 background-color:#000000;
}

#line3
{
 display:block;
 background-image:url(lightred.jpg);
 border:1px solid #333;
}

#line4
{
 height:30px;
 display:block;
 background-image:url(darkred.jpg);
 border-bottom:1px solid #000000;
}

#line5
{
 display:block;
 background-image:url(lightred.jpg);
 border-bottom:1px solid #000000;
}

#line6
{
 height:15px;
 display:block;
 background-image:url(darkred.jpg);
 border-bottom:1px solid #000000;
}

#line7
{
 height:50px;
 display:block;
 background-image:url(lightred.jpg);
 border-bottom:1px solid #000000;
}

#box
{
}


/* ################################ / Parts ################################ */
/* ################################ Elements ############################### */

body 
{
 font-family:Verdana;
 font-size:12px;
 background-color:#FFFFFF;
 text-align:center;
 font-weight:none;
 color:#FFFFFF;
 margin:0px;
}

input, select, textarea 
{
 font-size: 11px; 
 font-family:verdana;
 background-color: #FFFFFF;
 border-color: #FFFFFF;
 border-width: 1px;
 margin: 0px;
}

.border
{
border:1px solid #000;
}


/* ################################ / Elements ############################## */
/* ################################# Container ############################## */

#navcontainer
{
 padding-left:25px;
}

#content
{
 width:400px;
 padding:10px;
 background-image:url(lightred.jpg);
 text-align:left;
 text-decoration:none;
}

#contentfiller
{
 background-image:url(lightred.jpg);
}

#innerbox
{
 display:block;
 padding:0px;
 background-image:url(lightred.jpg);
 text-align:left;
 text-decoration:none;
}

#footer
{
 display:block;
 padding:3px;
 background-image:url(darkred.jpg);
 text-align:left;
 text-decoration:none;
}

/* ################################ Nav ############################# */

#navlist ul
{
 white-space:nowrap;
}

#navlist li
{
 display:inline;
 list-style-type:none;
}

#navlist a
{
 margin:0;
 padding:1px 8px 1px 24px;
 border:1px solid #333;
 background-color:#999;
 background-image:url(l1_down.gif);
}

#navlist a:link, #navlist a:visited
{ 
 color:#EEE;
 text-decoration: none;
 font-weight:bold;
}

#navlist a:hover
{
 border: 1px solid #333;
 background-color:#D81B1B;
 background-image:url(l1_over.gif);
 color:#333;
 font-weight:bold;
}

#active a:link, #active a:visited, #active a:hover
{
 border:1px solid #333;
 background-color:#D81B1B;
 background-image:url(l1_over.gif);
 color:#333;
 font-weight:bold;
}

MfG
Stefan

[Terry]

Gib #window noch ein position:relative und positionier die #box einfach absolut - die richtet sich dann nach #window (da relativ positioniert) und legt sich einfach über alles drüber, wie das absolut positionierte Container halt so an sich haben - einen z-index brauchst Du nicht mal.

[blazehawk]

Thx - so einfach kann css sein *g*

Ach ja und ist es möglich die Länge dieser Box nach dem Content zu bestimmen? Also die Box soll in der mitte von Line 4 anfangen und nach Line 6 aufhören - ist das mögl.?

[Terry]

Schwierig, versuchs mal mit Prozent-Angaben für die Länge, aber es wird sich trotzdem immer etwas verschieben.

Du könntest Du es auch so probieren: top:Xpx; bottom:Ypx; und den Abstand zum Rand mit margin bestimmen - aber der IE zieht da glaub ich nicht richtig mit......

[blazehawk]

Wenn wir grad schon bei IE sind...
Wieso werden in IE und Moziall jeweils die Line 3 total anders dargestellt?
Ich such mich schon die ganze Zeit dumm und dämlich aber ich find keinen Fehler :/

[blazehawk]

Hilfeeeee bittö

[Terry]

Ja, ich habs gesehen.

Es sind noch viele Fehler, die der Validator anzeigt: http://validator.w3.org/check?verbos...ontent%3Dstart
176, um genau zu sein - da sollte man als erstes ansetzen. Tipp: hier gibt´s den deutschen Validator, der erklärt´s verständlicher (hat aber auch noch Bugs): http://www.validome.org/lang/ge

Zur Navi speziell: da ist der <div id="navcontainer"> innerhalb der Liste (innerhalb von <ul>) - das ist auf jeden Fall falsch.
Ansonsten gibt es hier ein Tutorial für horizontale Navigation: http://css.maxdesign.com.au/listutor...troduction.htm
und hier Beispiele: http://css.maxdesign.com.au/listamatic/index.htm

[blazehawk]

Grummel - wo fang ich denn da an?! :/