✔ Design für große und kleine Auflösungen

ZodiacXP

ZodiacXP

Erfahrenes Mitglied
Servus.

Man kann ganz schnell per JS eine Weiche einbauen und den Stil anhand der Auflösung oder Fenstergröße festlegen. Was ich aber machen möchte ist, das ganze (wie folgt) per CSS zu realiesieren.

HTML: 
<div id="left">
    <ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
    </ul>
</div>

<div id="center">
    Lorem ipsum
</div>

<div id="right">
    Plain text
</div>

Dabei soll #left im besten Fall immer links sein (mit max-width 10em) und #right ebenso rechts. Dazwischen kommt #center.

Sobald das Browserfenster zu klein wird (die Breite) rutscht #left nach oben und #right nach unten.

Wie realisiert man das?
Mittels float? Als table-cell deklarieren? Welche Browser haben hier evtl schwierigkeiten?

Mein erster Versuch verhält sich noch nicht wie gewollt:

Code: 
* {
    border: 2pt dashed #ccc;
}

#left {
    background-color: #fcc;
    max-width: 10em;
    display: table-cell;
}

#left ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#left ul li {
    display: inline-block;
    width: 6em;
}

#center {
    background-color: #cfc;
    display: table-cell;
    width: 100%;
    min-width: 20em;
}

#right {
    background-color: #ffc;
    max-width: 10em;
    display: table-cell;
}
 
Tach,

versuchs mal so:

HTML: 
<div id="wrap">
    <div id="left">
        <ul>
            <li>Menu 1</li>
            <li>Menu 2</li>
        </ul>
    </div>

    <div id="center">
        Lorem ipsum
    </div>

    <div id="right">
        Plain text
    </div>
</div>

CSS:

HTML: 
#wrap {
    margin: 0 auto;
    width: 980px;
}

#left {
    background: #fcc;
    width: 10%;
    float: left;
}

#left ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#left ul li {
    width: 100%;
}

#center {
    background: #cfc;
    width: 80%;
    float: left;
}

#right {
    background: #ffc;
    width: 10%;
    float: left;
}
 
Zuletzt bearbeitet:
Entschuldigung, aber unter Chrome passiert da garnichts. Zudem wird eine feste Breite vorgegeben was bei einem "rutschen" nach oben oder unten genau so bleibt und für ein häßliches Design sorgt.
 
hast du DOCTYPE drin?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
Ja habe ich. Das Ding ist das das Verhalten absolut nicht der Beschreibung entspricht. Das "Menu" links rutscht nicht nach oben und das "Menu" rechts nicht nach unten (siehe Anhang).

Anders sieht es bei meiner letzten Lösung aus:
http://refactormycode.com/codes/1736-floating-sidebars

Jedoch ist hier insbesondere das Problem, dass Der Header und Footer noch nicht die komplette Breite einnehmen.
 

Anhänge

  • Bild 1.jpg
    Bild 1.jpg
    11 KB · Aufrufe: 6
ZodiacXP hat gesagt.:
... Das "Menu" links rutscht nicht nach oben und das "Menu" rechts nicht nach unten (siehe Anhang).
...
Jedoch ist hier insbesondere das Problem, dass Der Header und Footer noch nicht die komplette Breite einnehmen.
Zum Vergrößern anklicken....
Hallo,

wenn du langen Text in ein Blockelement stellst, dann wird dieser Text entsprechend der Blockbreite wortweise umgebrochen. Genau so verhalten sich deine drei "top-level"-Blöcke, wenn sie mit der float-Eigenschaft nebeneinander liegen.

Nun möchtest du aber offensichtlich, dass die Seitenblöcke ganz unterschiedliche Breiten einnehmen, wenn sie nebeneinander bzw. untereinander liegen. Das lässt sich m.E. so nicht realisieren, eher mit "Media Queries":
Vielleicht hilft dir das weiter.
 
Ich hab mich grad in Media-Queries verliebt!

Recht herzlichen Dank für den Tip! Genau was ich suche.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück