Dominik: 3 Divs und Background-Image

Beitrag lesen

SELF-Forum

3 Divs und Background-Image

Dominik
– Informationen zu den Bewertungsregeln

Hallo Homepagebastler!

Ich versuche nun schon seit 2 Tagen dieses Problem zu lösen und bin inzwischen relativ verzweifelt.

Danke intensiver Suche unter anderem hier im Forum, habe ichs nun endlich geschafft 3 Divs nebeneinander zu platzieren.

Nun möchte ich jedoch, dass das Hintergrundbild des mittleren Divs auch wirklich in der Mitte sitzt, stattdessen wird es aber (in firefox), in das linke Div reingeschoben. Der Text des mittleren Divs steht dagegen da wo er hingehört (in der Mitte).
Im Internet-Explorer macht er zwar annähernd das, was er soll (was ja aber bekanntlich nicht heißen soll dass ich nahe an der Lösung bin ;D ), allerdings hab ich da ein anderes Problem, und zwar Lücken zwischen den Divs deren Herkunft mir nicht so ganz klar ist.

Ich hoffe das ganze ist so halbwegs klar, zur Verdeutlichung nun nochmal Bilder und Code:

So siehts im IE aus
So siehts in Firefox aus

  
<body>  
    <div id="container">  
        <div class="header">  
            <div id="header_left"></div>  
            <div id="header_right"></div>  
        </div>  
        <div id="nocontent">  
        <div class="menu">linksUm auch zu demonstrieren, wie sich einfacher Fließtext verhält, steht dieser Text</div>  
       <div class="content">rechtsUm auch zu demonstrieren, wie sich einfacher Fließtext verhält, steht dieser Text</div>  
        <div class="mitte">mitteUm auch zu demonstrieren, wie sich einfacher Fließtext verhält, steht dieser Text</div>  
        </div>  
    </div>  
</body>  


  
body  
{  
    background-color: #F0E1C4;  
    color: Black;  
    margin: 0;  
    text-align: center;  
    height: 595px;  
}  
  
#container  
{  
    margin: auto;  
    width: 999px;  
    text-align: left;  
}  
  
div.header  
{  
    width: 100%;  
    height: 104px;  
    background-color: #FFECC4;  
}  
  
#header_left  
{  
    float: left;  
    width: 504px;  
    height: 104px;  
    background-image: url(2_neu.gif);  
}  
  
#nocontent  
{  
    clear: both;  
    margin: 0;  
    padding: 0;  
}  
  
#header_right  
{  
    float: right;  
    width: 272px;  
    height: 104px;  
    background-image: url(logo.gif);  
}  
  
div.menu  
{  
    width: 147px;  
    height: 491px;  
    float: left;  
    border: solid 1px blue;  
    background-image: url(2_neu.gif);  
    margin:0;  
}  
  
div.mitte  
{  
    height: 491;  
    border: solid 1px yellow;  
    background-image: url(3_plus_anschnitt.gif);  
    background-repeat: no-repeat;  
    margin:0;  
}  
  
div.content  
{  
    margin:0;  
    height: 491px;  
    width: 624px;  
    float: right;  
    border: solid 1px green;  
}

Die Ränder hab ich natürlich nur eingefügt um besser nachverfolgen zu können, wo die Divs liegen.

Ich hoffe ich konnte das Problem halbwegs klar schildern, wäre sehr dankbar für jegliche Tipps.

Viele Grüße,
Dominik

Beitrag melden
–
Informationen zu den Bewertungsregeln