Dominik: 3 Divs und Background-Image

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

  1. 3 Divs und Background-Image

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber Dominik,

    div.mitte

    {
        height: 491;
        border: solid 1px yellow;
        background-image: url(3_plus_anschnitt.gif);
        background-repeat: no-repeat;
        margin:0;
    }

      
welche background-position hast Du probiert?  
  
Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/),  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. 3 Divs und Background-Image

      Dominik
      – Informationen zu den Bewertungsregeln

      Lieber Dominik,

      div.mitte

      {
          height: 491;
          border: solid 1px yellow;
          background-image: url(3_plus_anschnitt.gif);
          background-repeat: no-repeat;
          margin:0;
      }

      
>   
> welche background-position hast Du probiert?  
>   
> Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/),  
>   
> Felix Riesterer.  
  
Hi,  
  
erstmal danke für die schnelle Antwort.  
  
Backgroundpositionen hab ich so ziemlich alle durchprobiert (left, center, top, ..)  
Im IE tut sich da nicht viel, in Firefox ordnet er mir das BG-Image bei center und top in der Mitte des kompletten Bildschirms, bzw in der Mitte des übergeordneten Divs an, da er ja scheinbar das mittige div so betrachtet als ob es die komplette Breite einnimmt, der Text allerdings die äußeren Divs als Grenzen anerkennt.  
  
Ich würde das Bild ja mit ner Längenangabe in background-position richtig legen, allerdings habe ich da das Problem dass Firefox eben denkt dass mittlere Div fängt ganz links an, IE aber (so wie ich das eigentlich auch haben will) das mittlere Div hinter dem linken positioniert.  
  
Alles sehr verwirrend, ich hoffe ihr könnt mir helfen. :)  
  
Gruß  
Dominik
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. 3 Divs und Background-Image

    Engin Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

      
#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;  
}

    da du alles, bis auf die

    div.mitte

    floatest, nimmst du auch damit alle Elemente aus dem Fluss.

    Floate div.mitte auch, dann sollte es gehen.

    Grüße,
    Engin
     GYRO

    --
    Dilated peoples|Team Vestax
    Gut ist der, der nach dem finden noch weiß, was er suchte.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. 3 Divs und Background-Image

    Detlef G.
    – Informationen zu den Bewertungsregeln

    Hallo Dominik

    So siehts im IE aus

    Das sieht so aus, als ob die Hintergrundbilder einen durchgehendes Hintergrund für #nocontent ergeben sollen. Warum zerstückelst du es dann erst, nur um es dann wieder zusammenzufügen?
    Lasse es doch komplett und weise es #nocontent zu.

    Blockelemente ändern ihre Position und Größe nicht durch andere gefloatete Elemente. Nur die in ihne enthaltenen Inlineinhalte werden durch die gefloateten Elemente verdrängt. Das bedeutet, dass in Browsern dein div.mitte an derselben Positon beginnt (links) wie div.menu und an genau derselben Position endet wie div.content. Das ist dort auch gut zu erkennen:

    So siehts in Firefox aus

    Nur IE macht es falsch und setzt aufgrund von height: 491; für div.mitte hashLayout, was dazu führt, dass nicht nur der Inhalt sondern das Element selbst von den floateten Elementen beeinflusst wird.

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

    Du meinst sicher die Rahmen.

    "Um auch zu demonstrieren, wie sich einfacher Fließtext verhält, steht dieser Text"
    Irgendwie kommt mir das bekannt vor.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln