snorri: Menü mit fester Breite

SELF-Forum

Menü mit fester Breite

snorri
– Informationen zu den Bewertungsregeln

Hallo alle,

ich habe mal wieder ein Problem, etwas aus der Tabellendesign-Welt ins CSS-Design zu übertragen. Ein Hauptmenü oben quer am Seitenrand, das aus mehreren Kästchen besteht, soll 800 Pixel breit sein, aber die einzelnen Kästchen sollen nicht alle auf die gleiche Breite gezwungen werden.

Im Tabellendesign war die Sache klar: Tabelle mit 800 Pixel Breite, Tabellenzellen mit freier Breite. Ist ein Menüpunkt zu breit, wird er in seiner Tabellenzelle umgebrochen.

Wie mache ich das in CSS? Ich habe ein äußeres DIV mit 800 Pixel Breite angelegt, in dem die einzelnen Menüpunkte als DIVs floaten. Das Problem ist aber: Wenn die Menütexte mehr Platz als diese 800 Pixel brauchen, wird nicht im Text umgebrochen, sondern stattdessen floaten Menüpunkte in die nächste Zeile. Ich habe dann also ein zweizeiliges Menü.

Kann mir jemand einen Tipp geben, wie ich das hinbekomme? Oder muss ich doch wieder auf ein Tabellengerüst zurückgreifen?

Danke im Voraus,

-- snorri

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Menü mit fester Breite

    Cheatah
    – Informationen zu den Bewertungsregeln

    Hi,

    Wie mache ich das in CSS?

    beispielsweise mit display:table-cell oder ggf. display:inline-block.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Menü mit fester Breite

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    Im Tabellendesign war die Sache klar: Tabelle mit 800 Pixel Breite, Tabellenzellen mit freier Breite. Ist ein Menüpunkt zu breit, wird er in seiner Tabellenzelle umgebrochen.

    Wie mache ich das in CSS? Ich habe ein äußeres DIV mit 800 Pixel Breite angelegt, in dem die einzelnen Menüpunkte als DIVs floaten.

    Nein. Das Ziel von CSS ist ja grade, das Aussehen völlig unabhängig von der eigentlichen HTML-Struktur zu machen. Andersherum: die HTML Struktur ist unabhängig vom Aussehen und ist zuerst da. Die HTML-Struktur eines Menüs ist eine Liste von Menüpunkten (die A-Elemente lasse ich jetzt mal der Übersicht wegen weg):

      
<ul>  
 <li>Menuepunkt 1</li>  
 <li>Men.pkt. 2</li>  
 <li>Menuepunkt laenger 3</li>  
 <li>Menuepunkt noch laenger 4</li>  
 <li>Men.pkt. 5</li>  
 <li>Menuepunkt 6</li>  
 <li>Menuepunkt noch laenger 7</li>  
 <li>Menuepunkt 8</li>  
</ul>

    Das Problem ist aber: Wenn die Menütexte mehr Platz als diese 800 Pixel brauchen, wird nicht im Text umgebrochen, sondern stattdessen floaten Menüpunkte in die nächste Zeile. Ich habe dann also ein zweizeiliges Menü.

    Richtig. Das passiert, wenn Du für die Menüpunktelemente (hier LI) die CSS-Eigenschaft float:left; benutzt und wenn Du den Menüpunktelementen keine Breite vorgibst. Man könnte natürlich hier jedem der 8 Menüpunktelemente eine Breite von weniger als 100px geben, damit sie alle nebeneinander passen.

    Kann mir jemand einen Tipp geben, wie ich das hinbekomme? Oder muss ich doch wieder auf ein Tabellengerüst zurückgreifen?

    Das, was Du beschreibst ("Ist ein Menüpunkt zu breit, wird er in seiner Tabellenzelle umgebrochen"), ist eindeutig das Verhalten von Tabellenzellen. Über die CSS-Eigenschaft display lässt sich eine solche Darstellung auch auf andere Elemente anwenden. Man kann sie also so aussehen lassen, wie Tabellenzellen. Beispiel:

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Menue</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
 * { margin:0; padding:0; }  
 #navi { width:800px; margin:auto; background-color:#E0E; display:table; border-collapse:separate; border-spacing:2px; }  
 #navi ul { display:table-row; }  
 #navi li { display:table-cell; background-color:#EFE; text-align:center; vertical-align:middle; padding:2px;}  
</style>  
</head>  
<body>  
<div id="navi">  
<ul>  
 <li>Menuepunkt 1</li>  
 <li>Men.pkt. 2</li>  
 <li>Menuepunkt laenger 3</li>  
 <li>Menuepunkt noch laenger 4</li>  
 <li>Men.pkt. 5</li>  
 <li>Menuepunkt 6</li>  
 <li>Menuepunkt noch laenger 7</li>  
 <li>Menuepunkt 8</li>  
</ul>  
</div>  
<h1>Ueberschrift</h1>  
</body>  
</html>

    Welchen Vorteil hat das gegenüber einer Tabelle? Nun Textbrowser, die kein CSS interpretieren, zeigen eine übersichtliche Menüstruktur in Form einer Liste.

    Nachteil: Der IE kann das nicht umsetzten, weil er für display weder table, noch table-row, noch table-cell kennt.

    In der praktischen Anwendung muss man also entweder für den IE ein separates Süppchen kochen oder doch eine Tabelle einsetzen. Man könnte z.B. nur für den IE doch float:left und eine fixe Breite der Menüpunkte vorgeben.

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln