✔ 3-Spalten Header -> Repeat-x Problem

xcode

xcode

Grünschnabel
Hallo,

ich habe ein Problem mit dem Header, habe ein Beispielbild beigefügt. Ich möchte in der Mitte der Seite ein fixes Hintergrundbild mit einer Breite von bspw. 500 px haben und links und rechts sollen sich zwei Hintergrundbilder mit repeat-x vom Mittelteil entfernen.

Also wie man auf dem Bild sieht kommt von links erst eine Linie im Mittelteil bleibt die eine Linie, aber es kommt die obere noch hinzu und im rechten teil laufen diese beiden Linien weiter. Also ich kann die Bilder auch anpassen, aber das Problem bleibt halt wann startet die obere Linie etc.

Hatte es jetzts mit DIVs probiert, mit float: left/right usw. Irgindwie tuts das alles aber nicht...bin am verzweifeln :(

Hoffe mir kann jmd. helfen! ;)
 

Anhänge

  • problem.jpg
    problem.jpg
    3,6 KB · Aufrufe: 80
Ich hatte drie DIVs angelegt:
#header_left
#header_right
#header_main

im css dann eben background: url(bild.png) repeat-x und beim header_main no-repeat
bei header_main width: 500px; margin: auto;
header_left: da hab ich noch float: left und bei header_right eben float: right;

Aber das Problem is halt, dass er die Bilder links und rechts nicht zur Mitte hin wiederholt, er zeigt die nur einmal an, außer ich stelle width: prozente ein, aber das haut dann nicht hin, wenn der bildschirm kleiner ist.

Vielleicht geht es ja notfalls mit Tabellen Weil er betrachtet die DIVs glaub ich nicht separat.
 
So lautet mein Lösungsvorschlag:
HTML: 
<div id="header">
     <div id="header_left"></div>
     <div id="header_right"></div>
     <div id="header_main"></div>
</div>
CSS: 
#header {
width:100%;
height:150px; /* muß von dir angepasst werden */
position:relative;
}
#header_left {
height:150px; /* muß von dir angepasst werden */
background:url(header_left.png) repeat-x;
position:absolute;
left:0;
width:50%;
}
#header_main {
width:500px;
height:150px; /* muß von dir angepasst werden */
background:url(header_main.png) no-repeat;
margin:auto;
position:relative;
z-index:2;
}
#header_right {
height:150px; /* muß von dir angepasst werden */
background:url(header_right.png) repeat-x;
position:absolute;
right:0;
width:50%;
}

mfg Maik
 
Danke für deinen Lösungsvorschlag, aber leider zieht er damit nur den linken Bereich bis zur Mitte und der Mittelteil und die rechte Seite wird nicht angezeiogt. :(
 
Dann ist dir vermutlich irgendwo ein Fehler unterlaufen, denn mein erprobter Vorschlag funktioniert browserübergreifend tadellos.

Hier mal der repräsentative Schnappschuß aus'm Firefox:

demo.jpg

mfg Maik
 
Ja so soll es aussehen :D

Ich guck noch mal, aber hatte an sich alles genau so übernommen. Ich hab mal Text bei den DIVs eingefügt und der Text vom header_main DIV steht auch dort wo er stehen soll nur liegt anscheinend bis zur Hälfte noch der Background von header_left drüber.
 
Hehe hab den Fehler :D Wer abschreiben kann is klar im Vorteil :P

Hatte bei main und right heigth anstatt height :D

Vielen vielen Dank noch mal! ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück