CSS Formatierung mit Tücken

[Philip]

Hallo,

ich habe ein kleines Problem mit divs und deren CSS Formatierung.
Hier ist einmal die Testseite: http://www.chinery.de/test/

dort sieht man, dass das Menü und der Inhalt nicht gleich hoch sind, was auch logisch ist, weil die divs keine Höhenangaben haben. Sie waren mal auf 500px festgelegt, aber dann war es so, dass zu großer inhalt einfach über die Ränder hinaus ragte, was schrecklich aussieht. Wenn ich overflow auf auto stelle, dann geht das beim inhalt zwar einigermaßen, aber manchmal ist auch das menü länger und das sieht extrem schlimm aus, zumal dann der seitliche platz auch nicht reicht.
Ein Freund, der sich sehr gut aus kennt, empfahl mir, die höhen mittels JavaScript anzupassen, aber so richtig zufrieden bin ich damit nicht. Gibt es keine CSS lösung für ein solches Problem?

Meine Idee wäre ein weiteres div drum herum zu spannen und dann den inneren divs zu sagen, dass sie sich auf die maximale höhe erweitern sollen, aber da habe ich auch keine ahnung wie ich das anstellen soll.

ich wäre für Tipps äußerst dankbar :)

Grüße,
Philip

[Christian]

Hallo Philip,
wenn die Navileiste keine Hintergrundfarbe haben soll, würde ich es so lösen, dass ich die äußeren roten Ränder weglassen würde und dann ein <div> herumlegen, das padding: 0 hat und einen roten durchgehenden Rahmen.

Wie du ein weiteres div drumherumlegst liest du am besten hier nach (ist ganz einfach ;))

http://de.selfhtml.org/css/layouts/mehrspaltige.htm

Hier unter "Zweispaltiges Layout" mit fester Breite gucken (direkt über "Dreispaltiges Layout")

MfG,
Christian

[yetanotheruser]

Hoi,

wenn ich dein Problem richtig verstehe, dann willst du, daß auf der linken Seite sozusagen der linke rote Rand so weit runter reicht, wie das rechte Div, und dann der untere Rand bündig auch wieder mit dem rechten Div abschließt ?

Nachdem du eh mit einer festen Breite bei deinem Menu arbeitest, würde ich das ganze anderst angehen.

  
<div id="content">  
<div id="menu">  
<ul>  
<li>1. Listeneintrag</li>  
<li>2. Listeneintrag</li>  
<li>3. Listeneintrag</li>  
</ul>  
</div>  
<p>Hier steht viel Text, Inhalt, Tabellen, whatever</p>  
<div class="breaker"></div>  
</div>  

und dazu dann in etwa die folgende CSS Formatierung.

  
#content {  
  margin:0px;  
  padding:0px 0px 0px 135px;  
  background: url('bg.jpg') top left repeat-y;  
}  
  
#menu {  
  float:left;  
}  
  
div.breaker {  
  font-size:1px;  
  height:1px;  
  line-height:1px;  
}  

Dann mußte halt noch dein Menu schön formatieren. Das bg.jpg sollte eine Grafik mit 1px Höhe und  128 Pixel Breite sein, wobei alles Weiß ist, bis auf das rechteste Pixel, welches du rot einfärbst.

Damit hast du sozusagen ein Höhen unabhängiges Menu. Wichtig ist der div mit der Klasse breaker, da es den float aufhebt und sozusagen auch der Inhalt damit immer gleich lang ist, wie das Menu.

So in etwa solltest du das hinbekommen.

Gruß Ben