Tilo Koch: Variable Anzahl an Spalten (2 bzw. 3)

SELF-Forum

Variable Anzahl an Spalten (2 bzw. 3)

Tilo Koch
– Informationen zu den Bewertungsregeln

Hallo,

ich bin hier gerade am verzweifeln, ich sitze hier schon ewig am pc und versuche mit css ein layout zu erstellen, was sowohl 2-spaltig als auch 3-spaltig funktioniert.
Soll heißen manche seiten bestehen nur aus 2 spalten und manche aus 3.
Dabei sollen die rechte und die linke Spalte eine feste Größe haben und die Spalte in der Mitte soll variabel sein. Falls nun die rechte Spalte fehlt soll die mittlere auch den Platz von der rechten einnehmen.
Ich hab es bisher nur so hinbekommen, dass entweder die mittlere um die rechte Spalte floated oder die rechte Spalte zwar weg ist aber die mittlere nicht deren Platz einnimmt, was alles beides nicht so sein soll. :/
Für Tipps die mich weiterbringen wäre ich sehr dankbar.

MfG Tilo Koch

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Variable Anzahl an Spalten (2 bzw. 3)

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    Soll heißen manche seiten bestehen nur aus 2 spalten und manche aus 3.

    Warum dann nicht getrennte Stylesheets?

    2cols.css:

    @import url(mystyle.css);  
/* Angaben speziell fürs 2-Spalten-Layout */

    3cols.css:

    @import url(mystyle.css);  
/* Angaben speziell fürs 3-Spalten-Layout */

    mystyle.css:
    /* alle anderen Angaben */

    Je nach Seite bindest du entweder 2cols.css oder 3cols.css ein.

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Variable Anzahl an Spalten (2 bzw. 3)

    Kalle_B
    – Informationen zu den Bewertungsregeln

    Hallo,

    getestet mit FF 1.5 und IE 5:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>

    <title>2 ODER 3 SPALTEN</title>

    <style type="text/css">
    .links {
     width:       25%;
     float:       left;
     border:      1px solid #f00;
    }
    .rechts {
     width:       25%;
     float:       right;
     border:      1px solid #0f0;
    }
    .mitte {
     border:      1px solid #00f;
    }
    </style>
    </head>

    <body>
    <div class=links>
      Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
    </div>

    <div class=rechts>
      Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts Rechts
      Rechts<br>
      Rechts<br>
      Rechts<br>
    </div>

    <div class=mitte>
      Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte
      Mitte<br>
      Mitte<br>
    </div>

    <p style='clear:both'>&nbsp;</p>

    <div class=links>
      Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
      Links<br>
    </div>

    <div class=mitte>
      Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte
      Mitte<br>
      Mitte<br>
    </div>

    </body>
    </html>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Variable Anzahl an Spalten (2 bzw. 3)

      Tilo Koch
      – Informationen zu den Bewertungsregeln

      So wollte ich es eigentlich nicht haben. Wie gesagt soll die mittlere Spalte nicht um die rechte floaten, was bei deinem Beispiel aber der Fall ist, wenn in der mittleren Spalte viel Inhalt ist.
      Trotzdem Danke für deine Mühe.

      MfG Tilo Koch

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. Variable Anzahl an Spalten (2 bzw. 3)

    Ashura Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Tilo.

    Soll heißen manche seiten bestehen nur aus 2 spalten und manche aus 3.
    Dabei sollen die rechte und die linke Spalte eine feste Größe haben und die Spalte in der Mitte soll variabel sein. Falls nun die rechte Spalte fehlt soll die mittlere auch den Platz von der rechten einnehmen.

    Bei meinem Lösungsvorschlag ist lediglich die Reihenfolge der Elemente relevant, alles andere geht von allein. (Im IE natürlich nicht.)

    Einen schönen Donnerstag noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Variable Anzahl an Spalten (2 bzw. 3)

      Tilo Koch
      – Informationen zu den Bewertungsregeln

      Bei meinem Lösungsvorschlag ist lediglich die Reihenfolge der Elemente relevant, alles andere geht von allein. (Im IE natürlich nicht.)

      Danke Ashura, das sieht doch schon mal sehr vielversprechend aus. Mal schauen was sich daraus machen lässt.

      MfG TKOlit

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln