Hier mal grob skizziert meine Vorstellung vom Aufbau des Kopfes der Seite:
HTML-Code:
<div id="wrapper">
<div id="header">
<div class="inside">
<div id="logo">
<p>
<a id="logo_box_logo" href="http://tl.xcilio.de"><img alt="logo" src="tl_files/xcilio/theme/logo_box_logo.png" /></a>
</p>
</div>
<div id="banner">
<img alt="banner" src="tl_files/xcilio/theme/platzhalter.png" />
</div>
<div id="pfad_navigation" class="mod_breadcrumb block">
<a title="X.CILIO" href="start.html">X.CILIO</a> »
<span class="active">START</span>
</div>
</div>
</div>
<div id="container">
.
.
und das css:
Code:
#wrapper{
margin:11px auto;
width:958px;
background:lightBlue; /*zum testen*/
}
#header{
height:225px
}
#main{
background-color:red; /*zum testen*/
}
#logo{
position:absolute;
top:-33px;
left:10px;
width:266px;
height:176px;
background:url("tl_files/xcilio/theme/logo_box.png") no-repeat scroll 0 20px transparent;
z-index:5;
}
#logo_box_logo {
position:static;
}
#banner{
position:absolute;
left:268px;
}
#pfad_navigation{
position:absolute;
top:200px;
left:268px;
background-color:#cccccc;
font-family:"Trebuchet MS";
font-size:12px;
width:690px;
padding:3px 0 4px 15px;
width:676px;
}
#container{
background-color:blue; /*zum testen*/
position:relative;
height:200px
}
img{padding:0}
Den Rest erledigen wir später
Lesezeichen