Hallo,
ich möchte einen Header aus 3 Elementen aufbauen.
In der Mitte befindet sich ein Banner, rechts und links davon soll passend ein Farbstreifen (PS-Grafik, also über background-image und repeat eingebunden) bis an den Rand der Seite gehen.
Testweise hab ich das ganze erstmal mit 3 farblichen div-Containern gemacht
<html>
<head>
<style>
#header{
height:280px;
}
#header .left{
float:left;
height:100px;
width:470px;
background-color:#0f0;
position:relative;
top:180px;
}
#header .right{
float:right;
height:100px;
width:470px;
background-color:#f00;
position:relative;
top:180px;
}
#header .center {
background-color:orange;
width:645px;
height:280px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="header">
<div class="left">#l</div>
<div class="center">#c</div>
<div class="right">#r</div>
</div>
<br/>
</body>
</html>Im Anhang habe ich einen Screen gepostet wie das ganze aussieht.
Der orangene Div wäre mein Banner, grün und rot jeweils die Streifen die davon weggehen.
Der grüne passt soweit, allerdings habe ich hier ja eine feste länge angegeben. Ich hätte ihn gerne so, dass er direkt links neben dem orangenen Bild beginnt und bis zum Ende des Bildschirms weiterläuft.
Der rote passt irgendwie noch so gar nicht, obwohl ich ihn rechts gefloatet habe.. Er sollte genau wie der grüne verlaufen, nur eben rechts (also wie wenn man rechts neben den orangenen Container einen Spiegel legen würde).