Design für große und kleine Auflösungen @ tutorials.de: Tutorials, Forum & Hilfe

ZodiacXP · 14.07.11 17:07

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-Code:

<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;
}

floausrbg · 15.07.11 13:14

Tach,

versuchs mal so:

HTML-Code:

<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-Code:

#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;
}

ZodiacXP · 16.07.11 19:52

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.

floausrbg · 17.07.11 09:57

hast du DOCTYPE drin?

Code :

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ZodiacXP · 17.07.11 11:26

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.

***hela*** · 18.07.11 16:02

Zitat von ZodiacXP

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

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":

Was können CSS3 Media Queries wirklich leisten?
Responsive Web Design

Vielleicht hilft dir das weiter.

ZodiacXP · 18.07.11 16:09

Ich hab mich grad in Media-Queries verliebt!

Recht herzlichen Dank für den Tip! Genau was ich suche.

***hela*** · 18.07.11 16:49

Zitat von ZodiacXP

Ich hab mich grad in Media-Queries verliebt!

Wow, das geht ja schnell bei dir.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Kleine Design-Änderungen

Brauche eine (kleine - mittlerweile große) Denkhilfe bei meiner Query

große und/oder kleine Objekte

Kleine Lücke im Design ?!

kleine Buchstaben in große umwandeln ? gibs da ne funktion ?

E-Mail:

Abonnieren Abbestellen