Problem mit background eines container-divs

snu · 25 Mai 2010

Hallo Leute,
habe ein sehr lästiges Problem bei dem ich leider nicht weiterkomme. Mein Problem ist dass ich einen Container Div um mehrere andere Divs liegen habe. Dieser Container hat einen Background per CSS bekommen, zeigt diesen aber nicht wirklich an, obwohl eigentlich in den anderen Divs etwas drinsteht...hier mal der Ausschnitt des Quellcodes dazu:
CSS-Code:

Code:

#content_area { // Container-Div
    background-image: url(images/content_bg.png);
    background-repeat: repeat-y;
    height: auto;
    width: 1052px;
}

#left { // Content darin ist aufgesplittet in links & rechts
    float: left;
    height: auto;
    width: 793px;
}
#right {
    float: right;
    height: auto;
    width: 259px;
}
#scoreboard { // rechter teil
    background-image: url(images/scoreboard.png);
    height: 147px;
    padding-left: 10px;
    padding-top: 45px;
    width: 249px;
}
#sponsors { // rechter teil
    background-image: url(images/sponsors.png);
    background-repeat: no-repeat;
    height: auto;
    padding-top: 36px;
    width: 259px;
}
#headline_thanks { // ganz oben im Content, weder in left noch in right enthalten
    background-image: url(images/thanks.png);
    height: 27px;
    width: 1052px;
}
#thanks { // linker Teil
    height: 121px;
    padding-left: 50px;
    width: 743px;
}
#content { // linker Teil
    min-height: 685px;
    padding-left: 20px;
    width: 773px;
}
#topnews { // linker Teil
    min-height: 244px;
    margin-left: 5px;
    width: 785px;
}
#headline_newslist { // linker Teil
    background-image: url(images/newslist.png);
    height: 12px;
    margin-left: -20px;
    width: 793px;
}
list_content { // linker Teil
    height: auto;
    width: 793px;
}
#newslist { // linker Teil
    float: left;
    height: 160px;
    width: 513px;
}
#headlines { // linker Teil
    float: right;
    height: 224px;
    padding-top: 16px;
    width: 260px;
}
#advertisement { // linker Teil
    background-image: url(images/advertisement.png);
    float: left;
    height: 62px;
    padding-left: 5px;
    padding-top: 15px;
    width: 470px;
}
#headline_articles { // linker Teil
    background-image: url(images/headline_articles.png);
    clear: both;
    height: 12px;
    margin-left: -20px;
    width: 793px;
}
#articles { // linker Teil
    min-height: 251px;
    width: 770px;
}

HTML-Code:

Code:

<div id="content_area">
        <div id="headline_thanks"></div>
        <div id="left">
            <div id="thanks">
                <div class="marquee" id="mycrawler2" style="width:700px;">
                    {banners:navlist}        
                </div>  
            </div>
            <div id="headline_content"></div>
            <div id="content">
                <div id="topnews">
                    {func:show}
                </div>
                <div id="headline_newslist"></div>
                <div id="newslist">{news:recent2}</div>
                <div id="list_content">
                    <div id="headlines">{news:navlist}</div>
                    <div id="advertisement">
                        {banners:rotate}
                    </div>
                </div>
                <div id="headline_articles"></div>
                <div id="articles">{artikel:navlist}</div>
            </div>
        </div>    
        <div id="right">
            <div id="scoreboard">
                {wars:navlist}
            </div>
            <div id="sponsors">
                {partner:navlist}
            </div>
        </div>
    </div>

Zusätzlich gibt es ein Problem mit dem Div 'topnews'...dieser hat ja, wie im Code zu entnehmen, die Eigenschaft 'min-height', allerdings vergrößert dieser sich nicht automatisch wie er es eigentlich sollte bei mehr Inhalt...
Ich hoffe ihr versteht mein Problem und könnt mir dabei helfen.
Grüße,
Christian

mermshaus · 25 Mai 2010

"Wer floatet, muss auch clearen."

(Für mehr Informationen suche im Web nach dem Satz. Zum Beispiel: Richtig Clearen)

In diesem Zusammenhang ebenfalls Gold wert: eine Suche nach "css clearfix".

Das Problem mit min-height konnte ich (im Firefox) nicht rekonstruieren. (Hast du einen DOCTYPE gesetzt?)

Kommentare in CSS funktionieren übrigens nur so: /* Kommentar */

Code:

<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <style type="text/css">

#content_area { /* Container-Div */
    background-image: url(images/content_bg.png);
    background-repeat: repeat-y;
    background: #f00;
    height: auto;
    width: 1052px;
}

#left { /* Content darin ist aufgesplittet in links & rechts */
    float: left;
    height: auto;
    width: 793px;
}
#right {
    float: right;
    height: auto;
    width: 259px;
}
#scoreboard { /* rechter teil */
    background-image: url(images/scoreboard.png);
    height: 147px;
    padding-left: 10px;
    padding-top: 45px;
    width: 249px;
}
#sponsors { /* rechter teil */
    background-image: url(images/sponsors.png);
    background-repeat: no-repeat;
    height: auto;
    padding-top: 36px;
    width: 259px;
}
#headline_thanks { /* ganz oben im Content, weder in left noch in right enthalten */
    background-image: url(images/thanks.png);
    height: 27px;
    width: 1052px;
}
#thanks { /* linker Teil */
    height: 121px;
    padding-left: 50px;
    width: 743px;
}
#content { /* linker Teil */
    min-height: 685px;
    padding-left: 20px;
    width: 773px;
}
#topnews { /* linker Teil */
   background: #0f0;
    min-height: 244px;
    margin-left: 5px;
    width: 785px;
}
#headline_newslist { /* linker Teil */
    background-image: url(images/newslist.png);
    height: 12px;
    margin-left: -20px;
    width: 793px;
}
list_content { /* linker Teil */
    height: auto;
    width: 793px;
}
#newslist { /* linker Teil */
    float: left;
    height: 160px;
    width: 513px;
}
#headlines { /* linker Teil */
    float: right;
    height: 224px;
    padding-top: 16px;
    width: 260px;
}
#advertisement { /* linker Teil */
    background-image: url(images/advertisement.png);
    float: left;
    height: 62px;
    padding-left: 5px;
    padding-top: 15px;
    width: 470px;
}
#headline_articles { /* linker Teil */
    background-image: url(images/headline_articles.png);
    clear: both;
    height: 12px;
    margin-left: -20px;
    width: 793px;
}
#articles { /* linker Teil */
    min-height: 251px;
    width: 770px;
}

        </style>
    </head>

    <body>
<div id="content_area">
        <div id="headline_thanks"></div>
        <div id="left">
            <div id="thanks">
                <div class="marquee" id="mycrawler2" style="width:700px;">
                    {banners:navlist}
                </div>
            </div>
            <div id="headline_content"></div>
            <div id="content">
                <div id="topnews">
                    {func:show}
                    <p style="padding-top: 500px;">.</p>
                </div>
                <div id="headline_newslist"></div>
                <div id="newslist">{news:recent2}</div>
                <div id="list_content">
                    <div id="headlines">{news:navlist}</div>
                    <div id="advertisement">
                        {banners:rotate}
                    </div>
                </div>
                <div id="headline_articles"></div>
                <div id="articles">{artikel:navlist}</div>
            </div>
        </div>
        <div id="right">
            <div id="scoreboard">
                {wars:navlist}
            </div>
            <div id="sponsors">
                {partner:navlist}
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
    </body>

</html>

lowsaxonian · 25 Mai 2010

Wenn´s um den IE geht, sollte das helfen: min-height und der IE

snu · 26 Mai 2010

@mermshaus
Das ganze ist nur ein Ausschnitt aus dem Quelltext, gecleart wird in einem nachfolgenden Div, der nicht mehr im div #content_area liegt. Doctype habe ich keinen gesetzt. Zu der Sache mit den Kommentaren, ich weiß dass diese nur mit /* Kommentar */ gesetzt werden können, habe diese auch so wie ich den Quellcode gepostet habe nicht drinstehen, hab sie jetzt nur zur Veranschaulichung hier hinzugefügt.
@lowsaxonian
Nein geht nicht nur um IE, sondern allgemein um diverse Browser(FF,Opera,IE).

mermshaus · 26 Mai 2010

Das ganze ist nur ein Ausschnitt aus dem Quelltext, gecleart wird in einem nachfolgenden Div, der nicht mehr im div #content_area liegt.

Müsste er aber wahrscheinlich, da du schließlich auch in #content_area floatest. Poste doch sonst bitte im Zweifel den vollständigen für das Problem relevanten Code (mit DOCTYPE und allem). Am besten in einer testbaren Form, also so in der Art, wie ich dir geantwortet habe. Die Grafiken hat von uns zum Beispiel niemand und es ist sehr mühsam, sie lokal rudimentär zum Testen zu erstellen, nur um die Problembeschreibung nachzuvollziehen. Wenn es auch Hintergrundfarben (background-color) tun, um das Problem aufzuzeigen, können ja auch diese verwendet werden.

snu · 26 Mai 2010

Also das Problem kann man sich hier "live" betrachten: ClanSphere - News

Poste hier nun auch noch den gesamten CSS-Quellcode:

Code:

/* $Id: clansphere.css 232 2006-08-19 16:07:22Z hajo $ */
* {
    padding: 0;
}    

body {
    margin: 0 auto;
    font-size: 9pt;
    font-family: Tahoma, sans-serif;
    color: #767676;
    background-image: url(images/bg.png);
    background-color: #00070c;
    background-repeat: repeat-x;
}


/* Boxen */

#left_banner {
    float: left;
    height: auto;
    width: auto;
}

#right_banner {
    float: right;
    height: auto;
    width: auto;
}

#container {
    height: auto;
    margin: 0 auto;
    width: 1052px;
}

#top_head {
    background-image: url(images/top_head.png);
    height: 50px;
    width: 1052px;
}

#top_head img {
    margin-left: 49px;
    margin-top: 12px;
}

#head {
    background-image: url(images/head.png);
    height: 167px;
    width: 1052px;
}

#over_navi {
    background-image: url(images/over_navi.png);
    height: 173px;
    padding-left: 16px;
    padding-top: 12px;
    width: 1036px;
}

#topmatch {
    float: left;
    height: 55px;
    padding-left: 16px;
    padding-top: 45px;
    width: 159px;
}

#coverages {
    float: left;
    height: 97px;
    padding-top: 3px;
    width: 496px;
}

#usercenter {
    float: right;
    height: 51px;
    margin-right: 23px;
    padding-top: 62px;
    width: 296px;
}

#navi {
    background-image: url(images/navi.png);
    clear: both;
    height: 34px;
    width: 1052px;
}

#navi div {
    margin-top: 10px;
}

#headline_content {
    background-image: url(images/headline_content.png);
    height: 29px;
    width: 1052px;
}

#content_area {
    background-image: url(images/content_bg.png);
    background-repeat: repeat-y;
    height: auto;
    width: 1052px;
}

#left {
    float: left;
    height: auto;
    width: 793px;
}

#right {
    float: right;
    height: auto;
    width: 259px;
}

#footer {
    background-image: url(images/footer.png);
    clear: both;
    height: 67px;
    width: 1052px;
}

#scoreboard {
    background-image: url(images/scoreboard.png);
    height: 147px;
    padding-left: 10px;
    padding-top: 45px;
    width: 249px;
}


#sponsors {
    background-image: url(images/sponsors.png);
    background-repeat: no-repeat;
    height: auto;
    padding-top: 36px;
    width: 259px;
}

#headline_thanks {
    background-image: url(images/thanks.png);
    height: 27px;
    width: 1052px;
}

#thanks {
    height: 121px;
    padding-left: 50px;
    width: 743px;
}

#content {
    min-height: 685px;
    padding-left: 20px;
    width: 773px;
}

#topnews {
    min-height: 244px;
    margin-left: 5px;
    width: 785px;
}

#headline_newslist {
    background-image: url(images/newslist.png);
    height: 12px;
    margin-left: -20px;
    width: 793px;
}

list_content {
    height: auto;
    width: 793px;
}

#newslist {
    float: left;
    height: 160px;
    width: 513px;
}

#headlines {
    float: right;
    height: 224px;
    padding-top: 16px;
    width: 260px;
}

#advertisement {
    background-image: url(images/advertisement.png);
    float: left;
    height: 62px;
    padding-left: 5px;
    padding-top: 15px;
    width: 470px;
}

#headline_articles {
    background-image: url(images/headline_articles.png);
    clear: both;
    height: 12px;
    margin-left: -20px;
    width: 793px;
}

#articles {
    min-height: 251px;
    width: 770px;
}

Den Html Quellcode könnt ihr euch auf der Seite ansehen, alles was da an Text, Bilder usw drin ist wird hauptsächlich durch das CMS durch die angegeben Platzhalter geregelt(siehe HTML erster Post).

mermshaus · 26 Mai 2010

Wie bereits beschrieben (und in meinem Beispiel behoben): Du clearst #content_area nicht. Setze testweise <div style="clear: both;"></div> als letztes Element in diesen Div.

Dasselbe scheint auch für #topnews zu gelten. Auch dort brachte ein <div style="clear: both;"></div> als letztes Element zumindest einen Fortschritt.

Ich weise noch mal auf den "clearfix" hin (siehe Post #2). Mit diesem ist kein zusätzliches Markup notwendig, um Elemente zu clearen.

snu · 26 Mai 2010

Wow...erstaunlich dass das gecleare außerhalb des Containers so einen großen Unterschied bewirkt hätte ich nicht gedacht...vielen Dank für deine Hilfe! Topnews funktioniert jetzt auch richtig, ich glaube ich muss mich wohl nochmal intensiv mit dem clearen befassen...nochmals vielen Dank!

Problem mit background eines container-divs

snu

Neues Mitglied

mermshaus

Senior HTML'ler

lowsaxonian

Neues Mitglied

snu

Neues Mitglied

mermshaus

Senior HTML'ler

snu

Neues Mitglied

mermshaus

Senior HTML'ler

snu

Neues Mitglied

Neueste Beiträge