3 div container nebeneinander
hallo,
ich bin gerade am verzeifeln da ich nich unbedingt ein anfänger bin was css/html/php angeht.aber im moment bin ich am rande eines nervenzusammenbruchs. folgendes; es gilt 3 div fenster nebeneinander zu postionieren an sich keine große sache, also 1 2 3 das problem ist nur damit fenster 2 in der mitte sein soll und das auflösungsunabhängig, in diesem fenster befindet sich ein bild das mittels background-image:url eingebunden wird und 600px breit ist. fenster 1 steht links, fenster 3 rechts. diese enthalten ebenfalls ein bild das via background-image:url eingebunden wurde, und mittels background-repeat:repeat-x; so breit skaliert wird wie fenster 1 oder 3 eben sind. im endeffekt soll das in etwa so aussehen wie der kopf vom xhtmlforum, nur das nicht das mittlere fenster skalieren soll sondern die fenster links und rechts. alex |
Haben fenster1 und fester3 den selben Hintergrund?
Wenn ja, dann ist folgende Lösung viel leichter als das was du hast: Container 1 bekommt 100% Breite und der Hintergrundbild gespiegelt. Container 2 wird in Container 1 verschachtelt und bekommt die 600 Pixel Breite des Bildes fest zugewiesen und wird mittig ausgerichtet :) So sieht es dann aus als wäre links und rechts ein Rand :) |
danke nur funst das nich so richtig oder ich setze es falsch um
Code:
#left { HTML-Code:
<body> |
kann mir da niemand helfen, bitte
|
Die absolute Positionierung brauchst du doch nicht. Nimm sie raus und arbeite im normalen Dokumentenfluss.
Gib #left und #right eine feste Breite und float: left/right; #middle gibst du keine Breite (bzw. min-width: 600px wegen des Hintergrundbildes) und fügst margin-left/-right in der Breite von #left und #right hinzu. Im HTML-Teil muss die Reihenfolge dann wiefolgt lauten: HTML-Code:
<div id="left">...</div> |
also ich hab das mal so gemacht
#left { width: 20%; height:117px; background-image:url(left.jpg); background-repeat:repeat-x; float:left; margin:0; padding:0; } #middle { min-width: 600px; height:117px; background-image:url(logo_big.jpg); margin:0; padding:0; } #right { width: 20%; height:117px; background-image:url(right.jpg); background-repeat:repeat-x; float:right; margin:0; padding:0; } <div id="left"></div> <div id="right"></div> <div id="middle"></div> leider funktioniert das nicht da es das rechte fenster beim zusammenschieben in das mittlere möndet und schließlich überdeckt. das mittlere muß eine bestimmte breite habe da es ein logo beinhaltet, nur links und rechts (1,3) dürfen flexibel sein (am besten auto) |
Wenn alle Boxen das gleiche Bild als Hintergrund haben kannst Du alternativ auch mit .class arbeiten und eine Klasse erstellen die float:left als Wert hat, und einfach drei div-Boxen mit der Klasse nebeneinander setzen.
Klappt bei mir zumindest einwandfrei, natürlich musst Du um die Boxen herum eine Box setzen mit 100%. Warum px-Angaben? Lg |
Er möchte aber, dass die link und rechte Spalte fixe Breiten haben und die mittlere Spalte den restlichen Platz einnimmt. Somit fällt float für die mittlere Spalte weg.
Zitat:
|
der mittlere soll mittig sein und eine feste breite haben, links und rechts sollen skalieren
|
Was mir dazu auf die Schnelle einfällt (der IE < 7 braucht nur noch einen min-width-Hack):
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
Alle Zeitangaben in WEZ +2. Es ist jetzt 23:49 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023