|
|||
Content mit Navigation automatisch vergrößern
Hallo zusammen,
Ich versuche gerade ein CSS Layout für meine Webseite zu erstellen. Sie soll zentriert mit Header Navigation Content Footer ausgestattet sein. Dazu habe ich folgende Objekte erstellt: Code:
#container { position: relative; width: 765px; border: 0px; text-align: left; margin: 0 auto 0 auto; padding: 1px 1px 60px 1px; min-height: 400px; border-style: none; background-color:#FFFFFF; #background-image: url(../images/back.jpg); background-repeat: repeat-y; background-position: 0px 0px; } #head { position: absolute; left: 0px; top: 0px; background-color: #B9B9B9; height: 0px; } #leftmenu ul { position: relative; top: 154px; left: 2px; margin: 0px; padding: 0px; list-style: none; width: 138px; background-color: #FFFFFF; padding-left: 0px; } #content { position: relative; right:-1px; margin: 153px 60px 0px 180px; padding: 0px 0px 0px 5px; line-height: 1.8em; #background-color: #EDF4FA; font-style: normal; font-weight: normal; font-size: 12px; line-height: 18px; font-family: arial, sans-serif; } #footer { position: absolute; clear: both; bottom: 0px; left: -1px; width: 771px; height: 9px; background-image: url(../images/rand_unten.gif); background-repeat: no-repeat; background-position: 0px 0px; border-bottom: 0px; border-right: 0px; border-left: 0px; border-top: 0px; border-style: none; clear:both; } Wenn ich viele Navigationspunkte habe, wird der Content-Bereich nicht vergrößert, sondern die Navigationspunkte überschreiben den Footer. Was mache ich da falsch? Kann mir jemand bitte helfen? Vielen Dank Tobias |
Sponsored Links |
|
||||
Das wurde Dir schon gesagt:
TYPO3.net - container höhe autmatisch Ändere dementsprechend Deine CSS-Formatierung. Falls dann noch Probleme vorhanden sind, beschreibe sie und poste einen Link zu Deiner Site. |
Sponsored Links |
|
|||
Hallo zusammen,
Ich habe nun weiter versucht, und auch die relative Höhe hinbekommen. Nun habe ich das Problem, da ich die "absolute"-Angaben entfernt habe, der Hintergrund von dem Container-Objekt am oberen Rand noch zu sehen ist. Ich bekomme also das Head-Objekt nicht dekungsgleich darüber gelegt. Code:
#container { #position: relative; postition:absolute; width: 765px; border: 0px; text-align: left; margin: 0 auto 0 auto; padding: 1px 1px 0px 1px; border-style: none; background-image: url(../images/back.jpg); background-repeat: repeat-y; background-position: 0px 0px; } #head { #position: absolute; left: 0px; top: -10px; #background-color: #B9B9B9; #height: 0px; } #head span { display: none; } #head h1, #head h2 { margin: 0px; } #head h1 { #position: absolute; top: 0px; left: 0px; height: 154px; width: 768px; background-image: url(../images/header768.jpg); background-repeat: no-repeat; background-position: 0px 0px; clear:both; float:left; } #leftmenu ul { margin: 0px 0px 0px 1px; padding: 0px; list-style: none; width: 149px; background-color: #FFFFFF; padding-left: 0px; float:left; } #content { #position: relative; right:-1px; margin: 153px 60px 0px 180px; padding: 0px 0px 0px 5px; line-height: 1.8em; background-color: #edf4fa; font-style: normal; font-weight: normal; font-size: 12px; line-height: 18px; font-family: arial, sans-serif; } #footer { #position: relative; clear: both; bottom: 0px; left: -1px; width: 771px; height: 9px; background-image: url(../images/rand_unten.gif); background-repeat: no-repeat; background-position: 0px 0px; border-bottom: 0px; border-right: 0px; border-left: 0px; border-top: 0px; border-style: none; clear:both; } Der Link zur Dev: http://web58.sit-mainz.info/index.php?id=22 Vielen Dank. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Tabellen als Div Container | SpecialFighter | (X)HTML | 7 | 12.10.2010 18:40 |
Ungewöhnlicher abstand beim clearen von floats | adrianno | CSS | 14 | 16.09.2009 15:20 |
Dynamische Höhe im Content und DIV immer unten | keaton | CSS | 8 | 13.12.2006 19:19 |
DIV Länge automatisch anpassen | judicious | CSS | 10 | 08.05.2006 17:30 |
Seitenaufbau mit DIVs und 100% Höhe | vespasquire | CSS | 6 | 12.09.2004 16:21 |