div positionieren

hallo,
hier gleich mal der Link, damit man sieht was ich für ein problem habe.
http://fellfresse.fe.ohost.de/impressum_div_template

ganz unten befindet sich ein rotes div. dort soll später der seiteninhalt rein. demzufolge muss diese box noch oben, direkt nach oben unter die rot-blauen divs unter home.

das problem warum ich nich drauf komm, is der abschliessende div am ende, der über 100% seitenbreite geht. das inhalt div muss nicht über das letzte div gehen. ich bekomm das inhalt div nicht nach oben, ohne die formatierung der oberen divs zu zerschiessen.

was unter firefox helfen würde, wär ja nen position: absolute; und dann mit top: und left: die position schieben, aber eider is das keine lösung für den IE?!?!?!

hier noch nen bissel code:

Code:

html des bereiches mit den bunten divs und dem inhalt div:

<div class= "text_rechts_links_spacer"></div>        
<div class= "dummy_vertikaler_spacer"></div>        
<div class= "dummy_vertikale_leiste"></div>        
<div class= "dummy_vertikaler_spacer"></div>        
<div class= "dummy_vertikale_leiste"></div>
<div class= "dummy_vertikaler_spacer"></div>        
<div class= "dummy_vertikale_leiste"></div>
<div class= "dummy_vertikaler_spacer"></div>        
<div class= "dummy_vertikale_leiste"></div>
<div class= "dummy_vertikaler_spacer"></div>        
<div class= "dummy_vertikale_leiste"></div>
<div class= "dummy_vertikaler_spacer"></div>        
<div class= "dummy_vertikale_leiste"></div>            
<div class= "vertikaler_spacer"></div>        
<div class= "vertikale_leiste"></div>        
       
   
<div class= "inhalt">###INHALT###</div>

Code:

css der divs:
div.text_rechts_links_spacer    
{
    float: left;
    padding: 0;
    margin: 0;
    width: 3%;
    height: 2px;
    background: #c1c0bf;
}
div.vertikaler_spacer
{
    float: left;
    padding: 0;
    margin: 0;
    width: 4px;
}    
div.vertikale_leiste
{
    float: left;        
    padding: 0;
    margin: 0;
    width: 13%;
}        
/* Textbereich mit vertikaler Leiste end */
/* Text begin */
div.inhalt
{
    float: left;
    margin: 0;
    padding: 30px 5px 5px 50px;
    background: red;
    width: 30px;
    height: 30px;
}    
/* Text end */
div.vertikaler_spacer
{
    height: 100%;        
    background-image: url(../images/gelb.gif);
    background-repeat: repeat;
}    
   
div.vertikale_leiste
{
    height: 100%;        
    background-image: url(../images/grau.gif);
    background-repeat: repeat;
}
   
div.dummy_vertikaler_spacer
{
    float: left;
    padding: 0;
    margin: 0;
    width: 4px;
    height: 2px;
        background: red;    
}    
   
div.dummy_vertikale_leiste
{
    float: left;        
    padding: 0;
    margin: 0;
    width: 13%;
    height: 2px;
        background: blue;    
}

div.inhalt
{
position: absolute;
top: 130px;
left: 25px;
margin: 0;
padding: 0 0 0 0;
background: red;
width: 230px;
height: 330px;
}

lad Dir mal die Webdeveloper toolbar von Firefox runter
- da kannst in Echtzeit CSS editieren und das Ergebnis anschaun.

Ob das ganze unter IE geht hab ich nicht getestet.

leider nein.
im IE wird kein div angezeigt...

hast du ne andere lösung?

Du hast das CSS ja auch nicht geändert ....

oderr nicht hochgeladen

ja, ich hatte es probiert, gesehen da ses nicht hinhaut und wieder gelöscht.
hab aber noch mal zu nachschauen alles hochgeladen.
http://fellfresse.fe.ohost.de/impressum_div_template

Code:

/* Text begin */
div.inhalt
{
    position: absolute;
        top: 250px;
        left: 50px;
        z-index: 99;
    margin: 0;
    padding: 30px 5px 5px 50px;
    background: red;
    width: 50px;
    height: 50px;
}    
/* Text end */

im FF ist alles super, aber im IE wird gar nichts angezeigt...nich mal an einer total verschobenen position

setz doch mal padding auf Null und width auf 200px.

und display:block;

ok, hab ich gemacht.
aber wieder nix zu sehen im IE.

aber irgendwie zerhaut es den ###FOOTER### ganz unten. der is nun 1,5 fach zu sehen.
also muss er ja was machen, nur nicht das richtige.

Code:

div.inhalt
{
position: absolute;
top: 250px;
left: 50px;
z-index: 99;
margin: 0;
padding: 0;
display: block;
background: red;
width: 200px;
height: 50px;
}

dann schmeiß mal den Footer raus.

Mir ist Dein Script zu unübersichtlich - wieso definierst Du div.inhalt in zwei verschiedenen CSS-
Dateien?

Auch der Rest sieht aus wie ein Tabellenscript. halt div statt Tabellenelemente.

Schnapp Dir mal ein Script von http://www.cssplay.co.uk/layouts/index.html
und bau es um.

Ich blick bei Deinem Script einfach nicht durch.

Entferne mal diese ganze div-Suppe aus deiner Datei:

Code:

<div class= "text_rechts_links_spacer"></div>        
<div class= "dummy_vertikaler_spacer"></div>        
<div class= "dummy_vertikale_leiste"></div>        
<div class= "dummy_vertikaler_spacer"></div>        
<div class= "dummy_vertikale_leiste"></div>
<div class= "dummy_vertikaler_spacer"></div>        
<div class= "dummy_vertikale_leiste"></div>
<div class= "dummy_vertikaler_spacer"></div>        
<div class= "dummy_vertikale_leiste"></div>
<div class= "dummy_vertikaler_spacer"></div>        
<div class= "dummy_vertikale_leiste"></div>
<div class= "dummy_vertikaler_spacer"></div>        
<div class= "dummy_vertikale_leiste"></div>            
<div class= "vertikaler_spacer"></div>        
<div class= "vertikale_leiste"></div>

keine Ahnung, was du damit bezwecken willst, aber in jedem Fall geht das auch anders.

Was dein Design angeht:
Wie soll das aussehen, wenn diese Spalte in der Mitte ist? Das stell ich mir nicht gerade Besucherfreundlich vor.
Benutze doch lieber ein dropdown-Menü. Auf www.cssplay.co.uk findest du dazu viele Beispiele. Das verkürzt auch gleich die Klickpfade deiner Besucher, was den besuchern Zeit und dir Traffic erspart.

der balken über dem bildschirm soll "nur" mrkieren auf welcher seite man sich gerade befindet. es gibt sieben seiten und der balken befindet sich immer unter dem linkkästchen. damit ich den abstand immer gut hinbekomme habe ich dummy-leisten eingefügt. die machen nichts weiter als den sichtbaren balken an seine richtige position zu schieben.
nen drop down menü hilft mir also nicht. der balken soll immer im hintergrund zu sehen sein.

würde der IE absolute positionen verstehen wäre ich ja schon fertig.

ich teile das css der übersichtlichkeit wegen. in einer css definier ich allgemeine sachen, die alle seiten betreffen. in der zweiten wird das spezifische css für die aktuelle seite definiert.
ich mag es nicht, wenn ich erst ewig scrollen muss um den richtigen teil zu finden.