stfischr: Div mit Hintergrundbild passt sich nicht automatisch der Höhe an

Beitrag lesen

SELF-Forum

Div mit Hintergrundbild passt sich nicht automatisch der Höhe an

stfischr
– Informationen zu den Bewertungsregeln

Vielen vielen Dank, für deine Hilfe, habs hinbekommen.

Also das Beispiel war nicht Transparent aber das soll es noch werden, von daher mussten es Graphiken sein. Ich habe jetzt nur den linken und rechten DIV ins InhaltsDIV geschoben aber es passt sich alles super der Größe an. Genau so wollte ichs haben.

Hier der aktuelle Code:

<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >  
    <head>  
        <title>Designstudie</title>  
        <style type="text/css">  
        div.lefttopnavigation  
        {  
            background: transparent url(../graphics/topleft.png) no-repeat scroll left top;  
            float: left;  
            min-width: 18px;  
            min-height: 18px;  
            max-width: 18px;  
            max-height: 18px;  
            margin: 0;  
            border: 0;  
            padding: 0;  
        }  
        div.righttopnavigation  
        {  
            background: transparent url(../graphics/topright.png) no-repeat scroll right top;  
            float: right;  
            min-width: 18px;  
            min-height: 18px;  
            max-width: 18px;  
            max-height: 18px;  
            margin: 0;  
            border: 0;  
            padding: 0;  
        }  
        div.topnavigation  
        {  
            background: #e6eec7 url(../graphics/top.png) repeat-x scroll center top;  
            min-width: 18px;  
            min-height: 18px;  
            width: auto;  
            max-height: 18px;  
            margin: 0 18px;  
            border: 0;  
            padding: 0;  
        }  
        div.leftnavigation  
        {  
            position: absolute; top:0px; left:0px;  
            background: #e6eec7 url(../graphics/left.png) repeat-y scroll left center;  
            float: left;  
            min-width: 6px;  
            min-height: 18px;  
            max-width: 18px;  
            height: 100%;  
            margin: 0;  
            border: 0;  
            padding: 0;  
        }  
        div.rightnavigation  
        {  
            position: absolute; top:0px; right:0px;  
            background: #e6eec7 url(../graphics/right.png) repeat-y scroll right center;  
            float: right;  
            min-width: 6px;  
            min-height: 18px;  
            max-width: 18px;  
            height: 100%;  
            margin: 0;  
            border: 0;  
            padding: 0;  
        }  
         div.centernavigation  
        {  
            position: relative; top:0px; left:0px;  
            top: 0px;  
            background: #e6eec7;  
            min-width: 18px;  
            min-height: 18px;  
            width: auto;  
            height: auto;  
            margin: 0;/* 6px;*/  
            border: 0;  
            padding: 0;  
        }  
        div.leftbottomnavigation  
        {  
            background: transparent url(../graphics/bottomleft.png) no-repeat scroll left bottom;  
            float: left;  
            min-width: 18px;  
            min-height: 18px;  
            max-width: 18px;  
            max-height: 18px;  
            margin: 0;  
            border: 0;  
            padding: 0;  
        }  
        div.rightbottomnavigation  
        {  
            background: transparent url(../graphics/bottomright.png) no-repeat scroll right bottom;  
            float: right;  
            min-width: 18px;  
            min-height: 18px;  
            max-width: 18px;  
            max-height: 18px;  
            margin: 0;  
            border: 0;  
            padding: 0;  
        }  
        div.bottomnavigation  
        {  
            background: #e6eec7 url(../graphics/bottom.png) repeat-x scroll center bottom;  
            min-width: 18px;  
            min-height: 18px;  
            width: auto;  
            max-height: 18px;  
            margin: 0 18px 0 18px;  
            border: 0;  
            padding: 0;  
        }  
        </style>  
    </head>  
    <body>  
        <div id="navigation">  
            <div class="lefttopnavigation">  
            </div>  
            <div class="righttopnavigation">  
            </div>  
            <div class="topnavigation">  
            </div>  
            <div class="centernavigation">  
                <div class="leftnavigation">  
                </div>  
                <div class="rightnavigation">  
                </div>  
                hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf  
                hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf  
                hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf  
                hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf  
                hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf  
                hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf  
                hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf  
            </div>  
            <div class="leftbottomnavigation">  
            </div>  
            <div class="rightbottomnavigation">  
            </div>  
            <div class="bottomnavigation">  
            </div>  
        </div>  
    </body>  
</html>

Man beachte die Veränderungen an den DIVs "centernavigation", "leftnavigation" und "rightnavigation" und deren Stylesheets.

Wegen neueren Browsern, ich will wenigstens bis zum IE7 abwärtskompatibel sein, muss da nicht perfekt aussehen, sollte aber noch benutzbar sein. Aber da muss ich mir sowieso erstmal wieder nen Windowssystem beschaffen, damit ich mit dem IE mal testen kann.

Danke nochmal. :)

Beitrag melden
–
Informationen zu den Bewertungsregeln