Div mit *.gif bild als Rahmen

[JDF1976]

Hallo Leute,

da man ja "Border" kein Bild zuweisen kann will ich mit hilfe von mind. 2 div´s einen Rahmen um meine Webseite machen.

body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
background-image:url(../images/background.jpg);
background-repeat:repeat;
}

#root{
	width:931px;
	margin:			0 auto;
	text-align:		left;
}


#titel{
    height: 55px;
	width:100%;
	text-align:center;
	background-image:url(../images/header.gif);	
}

#root{
	
	text-align:		left;
	background-image:url(../images/rand.gif);
	background-repeat:repeat-y;
	padding:20px;
}



#banner {
    height: 150px;
	width:auto;
	background-image:url(../images/oben.jpg);
	background-repeat:no-repeat;
	text-align:right;
	margin-right:35px;	
	
}
#links {
    width: 199px;
    float: left;
	background-image:url(../images/bild_links_unten.jpg);
	background-repeat:no-repeat;
}
#menue{
padding-top:13em;
}

#mitte {
	
    width: 695px;
    float:left;
	
}
#content{
padding-left:5em;
}

#footer{
width:auto;
background-image:url(../images/footer.gif);
background-repeat:no-repeat;

}

der PHP code laute wie folgt:

<div id="main">
    <div id="root">
        <div id="titel">
            <h1><?php echo $mainframe->getCfg('sitename');?></h1>
        </div>
        <div id="banner">
                
        </div>
        <div id="topmenu">
            <jdoc:include type="modules" name="top" style="xhtml" />  
       </div>
        <div id="links">
            <div id="menue">
                <jdoc:include type="modules" name="left" style="xhtml" />    
            </div>
        </div>
        <div id="mitte">
            <div id="content">
                <jdoc:include type="module" name="breadcrumbs" style="xhtml" />
                <jdoc:include type="component" /> 
            </div>
        </div>
         <br style="clear:both;" />
        <div id="footer">
              <jdoc:include type="modules" name="footer" style="xhtml" />
        </div>
    </div>
</div>

Leider ist nun der Footer garnicht zu sehen und der Header ist nach unten und nach links versetzt.
Hier zu sehen

hoffe mir kann einer helfen.

Danke schon mla an alle.

 

[Maik]

Hi.

Leider ist nun der Footer garnicht zu sehen und der Header ist nach unten und nach links versetzt.

Weise mal die clear:both-Eigenschaft direkt dem Footer zu, und definiere für ihn entsprechend der Hintergrundbildhöhe eine Höhe.

Dass der Header nach unten und links verschoben ist, liegt einfach an der padding-Deklaration für das übergeordnete Element #root.