| Autor |
Nachricht |
Benutzer 27999
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mi 07.12.2005 11:25
Titel CSS Problem - Div Navi bis zum Footer |
  |
|
Guten Tag!
Ich google schon eine weile an dem Thema dran rum, aber ich finde keine passende Lösung.
Ich habe 4 Container. 1 Header, 1 Footer, 1 Navi und 1 Content...
Mein CSS sieht folgendermaßen aus:
| Code: |
<style type="text/css">
<!--
html, body{
text-align:center;
margin:0;
padding:0;
height: 100%;
}
#header{
width: 100%;
background-color: #FFFFCC;
}
#content{
padding: 15px;
margin-left: 160px;
background-color: #CCFF99;
}
#navigation{
float: left;
border-right: 1px solid #000080;
width: 160px;
height: 100%;
min-height: 100%;
margin-bottom: auto;
background-color: #33FFCC;
}
#footer{
clear:both;
background-color: #CCFFCC;
}
-->
</style>
|
Ich möchte nun den Navigationscontainer genausolang haben wie den Inhaltscontainer...
Ich bekomme ihn wohl auf 100% der Seite, aber sobald mehr inhalt in den Content-Container kommt, wird der groesser, aber der Navicontainer bleibt bei 100%... (Also er ändert seine Höhe nicht)
Mein HTML Code:
| Code: |
<body>
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="content">
Blahblahblah...
</div>
<div id="footer">Footer</div>
</body>
|
Ist sowas überhaupt möglich? Die Lösung sollte natürlich möglcihst auf allen gängigen Browsern laufen und sollte Barrierearm gestalltet sein (was sich aber wohl von selbst versteht  )
Bis denn dann
Kiste1985
|
|
| |
|
 |
Feile
Dabei seit: 02.08.2005
Ort: Senden
Alter: -
Geschlecht: 
|
Verfasst Mi 07.12.2005 12:33
Titel
|
|
|
| Code: | <body>
<div id="header">Header</div>
<div id="navigation" style="hintergrundbild/farbe;">
<div id="iNavi">Navigation</div>
<div id="content">
Blahblahblah...
</div>
<div style="clear:left;height:1px;overflow:hidden;"></div>
</div>
<div id="footer">Footer</div>
</body> |
Jetzt "spannt" der content bereich den Navicontainer in der Höhe auf und das hintergrundsbild/farbe zieht sich runter bis zum abschluss des inhalts. dem content und iNavi gibst du jetzt ein float:left;. das clearst du dann wieder mit nem <div> oder nem <br /> am ende bevor du den elterncontainer schließt.
hoffe ich konnte dir weiterhelfen
|
|
| |
   |
|
|
Anzeige
|
|
|
Benutzer 27999
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mi 07.12.2005 13:09
Titel
|
|
|
Danke für die Antwort, aber leider war die Lösung nicht zufriedenstellend...
Sie funktionierte ansatzweise im Internet Explorer... Opera da die beiden Elemente unternander gesetzt, so dass der Content bereich ganz links war, und bei nem Margin-left halt nur etws weiter vom Rand abgerückt!
Es muss doch ne möglichkeit geben? Sowas sieht man doch auf soviele Seiten...
Navigationsbox genauso lang bekommen wie der Inhalt... kA Wie....
mfg
Kiste1985
|
|
| |
|
|
kaputt
Dabei seit: 08.05.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 07.12.2005 13:30
Titel
|
|
|
|
Das kannst du nur über ein Hintergrundbild "faken". Einen Div um Navi und Content legen und dem ein Hintergrundbild geben... nach Navi und Content dann auch noch IM umschließenden Div einen weiteren Div anlegen, der den Style "clear: both" hat.
|
|
| |
|
|
Benutzer 27999
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mi 07.12.2005 15:00
Titel
|
|
|
Hmmm achso... nagut, sowas wollte ich eigentlich eher nicht...
Schade, dass sowas in CSS nicht funktioniert... Is doch schon was wichtiges? Naja egal, lass ich mir ne alternative einfallen
Bis denn dann!
|
|
| |
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[css] - Footer Problem
Problem mit Footer
[HTML] Footer-Problem (solved, thx)
position absolute und footer problem
Problem: Chrome CSS Footer Ausrichtung
footer problem im ie6 'dank' javascript
|
|
Willkommen auf dem Portal für Mediengestalter
