✔ Div Höhenanpassung im DIV

[Daaguru]

Hallo zusammen,

gibt es nicht einfach ein Befehl mit dem ich sagen kann:

DIV.X => Sei immer so hoch, wie das DIV in dem du steckst?

Beispiel:

div.content
{
   float:left;
   width:200px;
   height: 80px;
   background-color: #08A;
}

div.navigation 
{
   position: relative;
   width: 180px;
   height: <!-- sei immer so hoch wie content maximal hoch ist -->
   background-color: #FFF;
}

-----------------------------------------------------------------------

<div class="content">

   <div class="navigation">
      <ul>
         <li>Button1</li>
         <li>Button2</li>
      </ul>
   </div>
         
</div>

Ich Danke Euch. ~daA|guRu~

 

[hpvw]

Das kannst Du meines Wissens nicht direkt angeben, aber ich vermute, dass Dein Problem mit dem 3-Spalten-Beispiel von Stu Nicholls zu lösen ist.

Gruß hpvw

 

[Daaguru]

Hi,

ich hab diese Seite als Referenz schon benutzt gehabt.
Leider ging das nicht ganz so erfolgreich, weil:

- eigentlich nur die Hintergrundfarbe, ein übergroßer Boarder,
flexibel ist.
- ich will aber ein Menü, dessen Hintergrundfarbe flexibel sein soll,
in den linken Teil der HP einbetten.

Danke Euch, ~daA|guRu~

 

[hpvw]

- eigentlich nur die Hintergrundfarbe, ein übergroßer Boarder,
flexibel ist.
- ich will aber ein Menü, dessen Hintergrundfarbe flexibel sein soll,
in den linken Teil der HP einbetten.

Das Problem verstehe ich nicht. Die Rahmenfarbe ist doch dann die Hintergrundfarbe des Menüs.

Gruß hpvw

 

[Daaguru]

Nein, schau dir mal www.moltencore-rvd.de/new/ an.
Vielleicht wird die Problematik dann klarer.

 

[hpvw]

Jetzt verstehe ich gar nichts mehr. Das sieht doch anständig aus und der Menü-Hintergrund ist genauso lang, wie der des Inhalts.

Gruß hpvw

 

[Daaguru]

Ja,

das liegt aber daran, dass ich die Höhe des Menüs für jede Seite seperat angegeben habe.
Ich versuch mich nun schon seit einigen Stunden daran das Problem zu beheben,
allerdings erfolglos.

<edit>
So stellt sich mir manchmal die Frage, warum man in solch tragischen fällen
nicht einfach wieder zu den guten alten Tabellen zurück greifen soll?
Antwort: Es muss doch einen Lösungsweg geben!
</edit>

 

[hpvw]

Jetzt verstehe ich, was Du meinst.
Du könntest dem umschließenden Container ein Hintergrundbild geben, welches sowohl den hellen Rand links, den schwarzen linken Rand vom Menü, den dunklen Hintergrund des Menüs, den rechten schwarzen Rand, usw. bis ganz rechts zum rechten schwarzen Rand des Inhalts. Dieses Bild muss nur einen Pixel hoch sein und kann mit repeat-y wiederholt werden. Vorraussetzung ist allerdings, dass Du bei einem Layout mit fester Breite bleibst.

Das Menü musst Du dann so positionieren, dass die horitontalen Linien an die verticalen des Hintergrundbildes anschließen.

Mit ein bisschen überlegen sollte es auch möglich sein, ein flexibles Layout zu verwenden, z.B. indem der rechte hellbraune Bereich seine Farbe durch den Body erhält und der rechte schwarze Rand als Rahmen des umschließenden Containers gestaltet wird.

Gruß hpvw

 

[Daaguru]

Die Idee mit dem Hintergrundbild + repeat-y hab ich versucht.
Endet aber mit dem selben Ergebnis wie background-color: #08a;

Mit ein bisschen überlegen sollte es auch möglich sein, ein flexibles Layout zu verwenden, z.B. indem der rechte hellbraune Bereich seine Farbe durch den Body erhält und der rechte schwarze Rand als Rahmen des umschließenden Containers gestaltet wird.

Das gefällt mir gut! Werde ich bis heute Abend versuchen und gebe dann bescheid.

 

[hpvw]

Ich habe mal ein kleines bisschen mit CSS an Deinem HTML-Code gespielt:

#header {height:20px; background:#ff0;}
body {background:#0f0; margin:0; padding:0;}
#navigation {float:left; margin-left:10px; width:150px;}
#container {background:#f00 url('./bg.gif') repeat-y; margin-right:50px; border-right:#000 1px solid;}
#content {margin-left:170px;}
.clear {clear:both; height:20px; background:#00f; margin-right:-50px;}

bg.gif müsste nun alle Hintergrundfarben und vertikalen Linien bis zum linken schwarzen Rand des Inhalts haben, dann sollte es funktionieren. Das sollte auch funktionieren, wenn Du dem #container statt einem rechten Aussenabstand eine feste Breite zuweist.

Gruß hpvw