[CSS]Anfänge mit CSS - Positionierung und Breite

[PadreJohn]

Hallo Leute,

ich hab schon einige Tuts gelesen und bischen gegoogelt aber CSS ist irgendwie nich mein Ding. Also ich bitte um eure Hilfe - ich denke mir fehlt da grundlegend irgendwas im Verständnis.
Ich baue gerade an einem Template und möchte im Hauptteil (zwischen Header und Footer ;) ) zwei Elemente platzieren. Das eine soll linksbündig mit 150 px Breite sein (im Folgenden optionwindow genannt) - das andere soll daneben liegen und sich breitenmäßig den kompletten Rest schnappen. Nun will ich aber, dass dieses OptionalesMenü-Element ggf. display:none wird. Damit würde ja Platz frei und da sollte sich dann das andere Element drin breit machen - es sollte variabel breit sein, aber immer den maximalen freien Platz nutzen.



<div style="width:700px; top:125px; position:fixed;">
<div id=optionwindow style="height: 375px; width: 150px; float:left; left: 0px; border: 1px solid brown;">
Optionales Men&uuml;
</div>
<div id=mainwindow style="height: 375px; position:absolute; right:0px; float:left; width:100%; border: 1px solid lime; text-align: center;">
Hauptfenster
</div>
</div>


Und bitte erklärt mir wo genau der Fehler ist und warum das Verhalten schief läuft - damit ich das beim nächsten Mal auch besser mach.

[Shakademus]

Du positionierst mainwindow absolut. Damit nimmst Du es aus dem normalen Fluss.

Eine naheliegende CSS-Lösung fällt mir da nicht ein. Ich würde einfach beim Ändern des optionwindow-Styles auch den mainwindow-Style anpassen.

[gruena]

<script>

//
// example: displayOptionWindow("yes");
//

function displayOptionWindow(state)
{
win = document.getElementById("optionwindow");

if (state == "yes")
win.style.display = "block";

if (state == "no")
win.style.display = "none";
}

</script>

<style>

*
{
margin: 0;
}

#header
{
border-bottom: 2px solid black;
height: 20%;
}

// main = optionwindow + content

#main
{
height: 350px;
}

#optionwindow
{
border-right: 2px solid black;
width: 300px;
height: 100%;
float: left;
}

#content
{
float: left;
}

#footer
{
border-top: 2px solid black;
height: 20%;
}

h3, ul, pre
{
margin: 14px;
}

input
{
width: 260px;
}
</style>

<div id="header">
<h3>Header...</h3>
<ul>
<li><input type="button" value="Menü anzeigen"

onclick="displayOptionWindow('yes');"></li>
<li><input type="button" value="Menü ausblenden"

onclick="displayOptionWindow('no');"></li>
</ul>
</div>

<div id="main">
<div id="optionwindow"><ul><li>bla<li>bli<li>blubb</ul></div>
<div id="content"><pre>*schnarch*</pre></div>
</div>

<div id="footer"><h3>Footer...</h3></div>


Sogar dynamisch. ^^

[PadreJohn]

Wenn ich das richtig sehe, liegt es also an der Angabe width: 100% ...

Danke fürs Beispiel gruena, so hatte ich mir das auch gedacht.

Wobei ich dem footer noch clear: both; zugefügt hätte, damit der dann auch unten ist ;)

[Shakademus]

Wenn ich das richtig sehe, liegt es also an der Angabe width: 100% ...
Nein. mainwindow kann sich gar nicht an optionwindow anschmiegen, da es durch die absolute Positionierung andere Elemente überhaupt nicht "sieht".
Wenn Du es hingegen nicht absolut positionierst, dann sorgt das width:100% dafür, dass es keinen Platz mehr neben optionwindow hat und nach unten wandert.

[gruena]

Wobei ich dem footer noch clear: both; zugefügt hätte, damit der dann auch unten ist ;)

Während der gesamten Erstellungsphase hat sich #footer niemals dem Fluss hingegeben, und jetzt lade ich es testeshalber nochmal, und siehe da: er ist direkt neben #content. Ich glaube in meim Firefox 3.6 spukt es... :eek:

[Shakademus]

Sitz gerade an einem entfernt verwandten Problem, da kommt mir die CSS-Lösung in den Sinn: Tabellen-Style.


<div style="width:700px; top:125px; position:fixed;display:table;">
<div style="height: 375px; width: 150px; border: 1px solid brown;display:table-cell;">
Optionales Men&uuml;
</div>
<div style="height: 375px; border: 1px solid lime; text-align: center;display:table-cell;">
Hauptfenster
</div>
</div>

Wenn Du jetzt das "Menü" raus nimmst, breitet sich das Hauptfenster entspannt aus.

[dirdi]

Sitz gerade an einem entfernt verwandten Problem, da kommt mir die CSS-Lösung in den Sinn: Tabellen-Style.
Dabei sollte man eventl. erwähnen, dass der IE zumindest bis Version 7 einschließlich damit noch nix anfangen kann.

@PadreJohn:
Zum Nachschlagen von CSS Eigenschaften kann ich dir http://www.css4you.de empfehlen. Da ist bei den ganzen Eigenschaften auch immer angegeben, welcher Browser ab welcher Version diese unterstützt.