|
|||
Div der Höhe anpassen
Hallo,
im Anhang habe ich ein Bild meiner Container angehängt. Ich möchte das sich der Container Mitte immer der Höhe anpasst, damit die Linke Seite immer über die komplette Seite geht. Kann mir jemand sagen, was ich falsch gemacht habe? CSS: Code:
#left { height: 100%; width:270px; float:left; } #top { background-image:url(images/top.png); height: 380px; width:270px; position:top; } #mitte { background-image:url(images/mitte.png); height: 100%; width:270px; } #bottom { background-image:url(images/bottom.png); height: 374px; width:270px; clear:both; } HTML-Code:
<div id="left"> <div id="top"></div> <div id="mitte">asdasDAsd</div> <div id ="bottom"></div> </div> |
Sponsored Links |
Sponsored Links |
|
|||
Das verstehe ich jetzt nicht, weil das Hintergrundbild hätte ja eine Feste Höhe!
Also würde sich das iwann wiederholen und das würde nicht passen. Deswegen habe ich es in 3 bildergesplittet, und das Bild in der Mitte, das darf sich wiederholen, weil es dann passen würde. Oder kannst du mir ein Beispiel geben, wenn ich dir das Hintergrundbild gebe? |
|
|||
Im Übrigen gibt es kein "position:top"...
Das Problem ist, in deinem Konstrukt befindet sich nirgends eine direkte Größenzuordnung. Height: 100% bezieht sich immer auf das jeweilige Elternelement. Da diese aber auch immer nur 100% des Elternelementes bekommen, gibt es nirgendwo eine Zurordnung. Geändert von zeji (05.08.2011 um 15:18 Uhr) |
|
|||
Code:
#left { background-image:url(images/mitte.png); height: 100%; width:270px; float:left; position:fixed; } #top { background-image:url(images/top.png); height: 380px; width:270px; } #mitte { width:270px; } #bottom { background-image:url(images/bottom.png); height: 374px; width:270px; } Kann mir dazu jemand noch etwas sagen? |
|
||||
Ich sagte doch bereits. Verpacke die divs. Ob du jetzt drei divs untereinander hast, von denen zweil leer sind, oder drei divs ineinander, von denen zwei nur ein weiteres div als inhalt haben ist ja egal. Eines davon ist dann der "mittlere" Hintergrund, darüber liegt dann unten und darüber liegt oben. Dann kannst du den Text mit dem oberen div ausrichten und den Hintergrund von unteren (ist ja wie "mitte" 100% hoch, dieses Bild unten fixieren (backgroud-position:bottom;)
Die Möglichkeit mit position:absolute; gibt es zwar auch, ich würde sie allerdings nicht nutzen. btw. Es soll auch Bildschirme geben, die höher sind als 930Pixel.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
|
|||
Zitat:
|
|
||||
Ich zeige dir das mal an einem Beispiel aus meiner Seite.
HTML-Code:
<span class="tipBox"> <span class="tipBottom"> <span class="tipTop"> Content </span> </span> </span> Code:
span.tipBox { display:none; } span.tipBox { display:block; background:url('/img/background.png') repeat; width:150px; height:40px; margin-left:55px; margin-top:4px; } span.tipBox span.tipBottom { display:block; background:url('/img/border-bottom.png') left bottom repeat-x; width:156px; height:40px; } span.tipBox span.tipBottom span.tipTop { display:block; background:url('/img/border-top.png') left top repeat-x; padding:10px 7px; width:150px; height:20px; } Im Quellcode meiner Seite ist das die Hinweisbox bei der Telefonnummer, falls du danach suchst Edit: Das innerste Element (in meiner Fall span.tipTop) muss natürlich den Inhalt unter das Bild drücken.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Div Höhe an Inhalt anpassen | prosol | CSS | 4 | 28.03.2011 12:28 |
Div soll sich einem anderen anpassen | shallax | CSS | 2 | 24.02.2009 16:25 |
Div in der Höhe anpassen | cb01 | CSS | 2 | 15.03.2007 03:41 |
div höhe anpassen | Dgx | CSS | 3 | 02.03.2007 18:02 |
höhe eines div tag an ein anderes anpassen | ffr | CSS | 4 | 09.12.2003 16:59 |