[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]

PHP-Code:

<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]

Zitat von PadreJohn

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]

Zitat von PadreJohn

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...

[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.