faux columns ?

[h4nnes]

Hi ich will, dass die Navi die selbe Höhe hat wie mein Content wie kann ich sowas realisieren? Es soll also der Hintergrund sich dem Content anpassen.
(Die blaue Navi, soll so hoch sein, wie der Conten s.Bild)

Das ganze soll ne kleine Datenbank werden, hier mal nen Bild, wie es bisher ausschaut:



Hier mal die css-Datei:

html,body{
margin:0;
padding:0;
}

body{
font: 76% arial,sans-serif;
}

p{
margin:0 10px 10px;
}

a{
display:block;
color: #981793;
padding:10px;
}

#header h1{
height:80px;
line-height:80px;
margin:0;
padding-left:10px;
background: #EEE;
color: #79B30B;
}

#footer{
background: #333;
color: #FFF;
clear:left;
width:100%;
}
footer p{
margin:0;
padding:5px 10px;
}

#content{
padding-left: 5%;
margin: 0 25%;
float:none;
}

#navigation{
float:left;
height:100%;
width:25%;
margin-left:auto;
background:#B9CAFF;
}

[Refus]

suchst du position: fixed; ?

Ich weiß nicht wirklich was du meinst.

Oder willst du, dass sich das blaue solange zieht wie auf der Content rechts lang ist?

[h4nnes]

genau, das Blaue soll sich soweit nach unten ziehen, wie der Content, also die Navi soll immer die selbe Größe haben, wie der Content

[Refus]

Kannste mit CSS sp nicht machen.
Musste als Hintergrundbild abspeichern und dann die Illusion erwecken
1px hoch fertig.

edit//
Da es bei dir ja nur blau ist kannst du auch nen Div nach hinten legen mit entsprechender Hintergrundfarbe height: 100%

[h4nnes]

wie meinst du nach hinten legen? hinter was?

[Uepfel]

Was er meint, ist ein Hintergrundbild mit einer Höhe von 1px und der Breite der Navi. Einfach einfärben in der Farbe der Navi. Dann z.B. einfach als Hintergrundbild des bodys einrichten, mit background-repeat: repeat-y;

Das klappt allerdings nur mit einer fixierten Breite.


Hätte daher noch nen anderen Vorschlag:

Floate den content rechts, die Navi gar nicht. Beide in einen Container (Hintergrundfarbe der Navi). Und nach der Navi noch ein Element, dass clear:right besitzt. Somit wird dann der Container auf die Länge des Contents gestreckt; Du musst dann nur immer sicher gehen, dass der Content höher als die Navi ist

Mal so grob:

<div id="container">
 <div id="content">
  Inhalt - bla blubb..
 </div>
 <div id="Navi">
   Navi-Inhalt
 </div>
 <div id="cleaner">&nbsp;</div>
</div>

#container {
  background: (navifarbe);
}
#content {
  background: #fff;
  float: right;
  width: (breite);
}
#cleaner {
  background: (footerfarbe);
  font-size: 1px;
  clear: right;
}

Sollte eigentlich klappen, ist noch etwas optimierbar. Im Grunde kannst du auch den cleaner als footer benutzen (dann muss er nur mit in den Container rein).

Auch den container kannst du sparen, indem du alles in die Navi packst (Inhalt, cleaner). Ich persönlich fände das allerdings unübersichtlich


Ich hoffe mal, das klappt so