zwei Divs ... hide div1 .. enlarge div2???

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • zwei Divs ... hide div1 .. enlarge div2???

    Ok jetzt wirds nen bisschen Chaotisch. Erstmal nen schemenhaftes Beispiel:

    HTML:

    <div id='wrapper'>
    <div id='one'>hello</div>
    <div id='two'>good bye</div>
    </div>

    CSS:

    .wrapper{
    width: 100%;
    float: left;
    }

    .one{
    width:50%;
    }

    .two{
    width:50%;
    }

    Die Divs one und two müssten jetzt nebeneinander sein und sich den Platz teilen. Die Frage: wenn ich jetzt einen Div verstecke/hide, wie krieg ich das hin, das der übriggebliebene Div den Platz 100% ausnutzt.

    a) mit CSS max-width oder so, wenn ja wie.
    b) mit JS den style im Dom umschreiben?

    cheers Cybo

  • also wenn du auf den Internet Explorer verzichten kannst, dann nutze min-width
    Gehört zum CSS 2 Standard
    http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_width

    Quellcode

    1. <html><head><title>min-width</title>
    2. </head><body>
    4. <div style="position:absolute; top:100px; left:100px; min-width:400px; border:solid 1px blue;
    5. padding:10px">Fasse dich kurz!</div>
    7. </body></html>


    Ansonsten wirst du wirklich mit JavaScript arbeiten müssen. Mit DOM würd ichs jedoch nicht machen.

    eher so:

    Quellcode

    1. <a href="#" onclick="document.getElementById('one');.style.display='none';document.getElementById('two').style.width:100%">hide</a>

  • danke für die Antwort,

    also auf IE kann ich zum Glück verzichten ;).
    Wie schaut es aber aus wenn ich keine statische Width (px) benutzen möchte, sondern es flexibel in Abhängigkeit von der Browsergröße machen möchte?
    Ich habe halt gedacht ich kann das dem CSS überlassen, wenn es da eine möglichkeit gibt.

    Ansonsten muss ich wohl JS nehmen. Aber da gäbe es ja dann 4 Möglichkeiten der darstellung :(

    1. beide Divs sind offen
    2. Div eins ist offen, Div zwei hide
    3. Div zwei ist offen, Div eins hide
    4. beide Divs sind hide

    deswegen wollte ic halt CSS nutzen, da die max/ mmin-width nicht mit % geht wird es wohl auf JS raus laufen.

    cheers Cyb081

  • "Cyb081" schrieb:

    deswegen wollte ich halt CSS nutzen, da die max/ mmin-width nicht mit % geht wird es wohl auf JS raus laufen


    Habs nicht getestet, aber nach selfhtml akzeptiert min-width alle numerischen angaben.
    Und numerische Eingaben schließen Prozent mit ein.

    Erläuterung:
    Mit min-width: können Sie die Mindestbreite bestimmen. Erlaubt ist eine Seite numerische Angabe.
    http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische