• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV-Tag passt sich nicht an Inhalt an

Status
Für weitere Antworten geschlossen.
M

marcmarc

Neues Mitglied
Hi,
ich bau gerade eine Internetseite und bin auf ein Problem gestoßen bei dem ich nicht mehr weiter weiß.
Und zwar habe ich ein DIV-Tag mit einem Hintergrundbild 600x400px.
Wenn der Inhalt größer wird möchte ich nicht, dass sich das Bild wiederholt, sondern ein weiteres Bild dahinter 1x800px, dass nur den Farbverlauf weiterzeichnet.
Den Verlauf habe ich als background-image in einem umschließendem DIV-Tag.
Mein Problem ist jetzt, dass der Text, wenn er größer wird als das innere DIV-Tag nicht die Maße des äußeren DIV-Tags größer zieht. Wenn ich jedoch manuell eine Höhe einstelle, wird der untere Hintergrund angezeigt, jedoch nicht dynamisch.



Hat jemand ne Lösung für mich?
 
Du brauchst also eigentlich 2 Hintergründe. Mach es doch so: gib einem umgebenden div den Hintergrund der sich wiederholen soll. In dem darinliegenden div hinterlegst du dann das Hintergrundbild, ohne Wiederholung. Beispiel:

HTML
Code: 
<div id="aussen"><div id="innen">Inhalt</div></div>

CSS
Code: 
#aussen { background-image: url(wiederholendes.png);width: 800px;height: 200px; }
#innen { background-image: url(einzeln.png);background-repeat: no-repeat; }
 
Danke schonmal für die fixe Antwort!
Das habe ich soweit schon gemacht. Das Problem ist nur das der Text, der in der inneren Box steht auch nur die innere DIV-Box größer zieht.
Also die kleinere seh ich garnicht wenn ich sie nicht explizit durch einen height-Wert, der größer ist als die innere Box skaliere.
Die Höhe der inneren Box kann ich auch nicht irgendwie auslesen und der äußeren Box zuweisen oder?

Hier mal der Code wenns weiterhilft:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="css/template_css.css" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html;" />
</head>

<body>
    <div id="main">
        <div id="header">
            <div id="hleft"></div>
            <div id="hmiddle"></div>
            <div id="hright"></div>
        </div>
        <div id="bottom">
            <div id="bleft">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Über uns</a></li>
                    <li><a href="">Veröffentlichungen</a></li>
                </ul>
            </div>
            <div id="content">
                <h1>Home</h1>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
                </p>
          </div>
        </div>
        <div id="footer">text</div>
    </div>

</body>
Code: 
/**************************************\
    Global
\**************************************/
body{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-image:url(../images/bg.jpg);
    background-color:#efefef;
    color:#000000;
    font-size:12px;
    padding:0;
    margin:0;

}

p{
    margin:15px;
    padding:0;
}

a{
    color:#e6a306;
    padding:0;
    margin:0;
}
a:hover{
    color:#FFFFFF;
    padding:0;
    margin:0;
}

h1{
    font-family:Geneva, Arial, Helvetica, sans-serif;
    background-image:url(../images/h1.gif);
    width:506px;
    height:22px;
    padding-left:5px;
    margin:15px;
    color:#FFFFFF;
    font-size:16px;
    display:block;
}

h2{
    width:473;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    margin:15px;
    font-size:12px;
    background-image:url(../images/h2.png);
    display:block;
    padding-left:2px;
}


/*****************************************\
    IDs
\*****************************************/

#main{
    width:800px;
    margin:auto;
}
#header{}


#hleft{
    width:148px;
    height:103px;
    background-image:url(../images/logo.png);
    float:left;
    padding:20px;
}

#hmiddle{
    width:276px;
    height:53px;
    background-image:url(../images/headerleft.png);
    float:left;
    padding-top:90px;
    padding-left:30px;
}
#hright{
    width:286px;
    height:96px;
    background-image:url(../images/headerright.png);
    float:left;
    padding-top:47px;
    padding-left:20px;
}
#bottom{
    min-height:400px;
    
    clear:both;
    background-image:url(../images/contentrepeat.png);
    
}
#bleft{
    width:158px;
    min-height:413px;
    background-image:url(../images/leftbar.png);
    float:left;
    padding-left:30px;
}
#bleft ul {
            list-style-type:none;
            list-style-image:none;
            padding:0px;
            margin:0px;
    }
    #bleft li {
            list-style-type:none;
            list-style-image:none;
            margin:0px;
            padding-top:2px;
            padding-left:1px;
        }
            
            
                    
            #bleft li a {
                background:transparent url(../images/navilink.png) no-repeat scroll;            
                height:22px !important;
                width:162px;
                display:block;
                margin:0 0 0 0;
                margin-left:8px;
                
                padding:0 0 0 0;
                
                text-decoration:none;
                text-align:left;
                color:#3f47f7;
                font-size:14px;
                font-weight:bold;
                }
                
                #bleft li a:hover{
                    text-decoration: none;
                    color:#3f47f7;
                    }
                #bleft li a.mainlevel#active_menu {
                    text-decoration: none;
                    color:#3f47f7;
                    padding-left:2px;
                }


#content{
    width:582px;
    min-height:413px;
    background:url(../images/content.png) no-repeat;
    float:left;
    padding-left:15px;
    padding-right:15px;
}
#footer{
    clear:both;
    width:780px;
    height:39px;
    text-align:right;
    padding-right:20px;
    background-image:url(../images/footer.png);
}
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben