Speisekarte mit CSS

9 Kommentare

Unter der Überschrift How to style a restaurant menu with CSS gibt es auf Web-graphics eine Anleitung wie man eine Speisekarte fĂŒr ein italienisches Restaurant machen könnte. An sich nichts spektakulĂ€res, es wurden Definitionslisten eingesetzt wobei einige der Listenelemente floaten.

Aber etwas an dem Beispiel hat mein Interesse geweckt. Denn der Autor stellt sich die Frage ob es möglich sei, daß man ohne den Einsatz von zusĂ€tzlichen HTML-Elementen und sogar ohne des Einsatzes von clear in der CSS-Datei ein vorheriges floatendes Element zu “clearen” (das floaten aufzuheben):

So we have learned how to contain floats without extra markup, even without using the clear property. My challenge was: is it possible to clear the influence of a previous floated element without using clear itself?

The answer is yes, we can. The following CSS rule:

div.whatever{clear: both;}

is equivalent to the following:

div.whatever{float: left; width: 100%;}

Hört sich interessant an. Werde es mal bei Gelegenheit austesten.

Diesen Beitrag teilen:

Verwandte BeitrÀge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse FachbĂŒcher und Fachartikel publiziert.

Schlagwörter:

9 Kommentare

  1. Schaue mir das Konstrukt gerade mal in Ruhe an, habe aber seinen Artikel dazu bisher noch nicht gelesen. Stelle jetzt erst einmal fest, dass er jeden einzelnen Speiskarteneintrag in eine eigene DL (Definitionsliste) gepackt hat. Ich weiß noch nicht, inwieweit das fĂŒr das korrekte »Floating« notwendig ist — semantisch ist es jedenfalls eher fragwĂŒrdig, da DLs eigentlich dazu da sind, Listen von Definitionen, also z.B. alle Speisekarten-EintrĂ€ge oder inhaltlich separierte Gruppen davon zusammenzufassen. 😯

    Das heißt, in seinem Beispiel benötigten wir genau 3 DLs, nĂ€mlich je eine fĂŒr »Antipasti«, »Pasta« und fĂŒr »Pizza«. 💡

    Also mal etwas damit herumspielen… 🙄

  2. Nachtrag: gerade etwas in seinem Artikel gelesen. Klaro, da die gepunktete Linie als Hintergrund eingebunden ist, braucht er in seinem Konstrukt das DL um jeden Listeneintrag. Er schreibt da was von

    most semantical between non-semantical solutions

    Nun gut, aber irgendwie will er ein »besseres« HTML/CSS-Coding ohne zusĂ€tzliche Code-Elemente (das mit dem dringenden Abschaffen des HTML-clear-Attributs zugunsten von codefreien CSS-Lösungen scheint ja gerade sehr angesagt…), nimmt aber andererseits locker ein ganz klares semantisches Manko in Kauf. Und das offenbar nur, weil er ein Faible fĂŒr gepunktete Linien hat… merkwĂŒrdige Entschuldigung und merkwĂŒrdig inkonsequent… 😯

    Aber gut, mal sehen, inwieweit sich das semantisch sinnvoll umbauen lĂ€sst. Im Zweifelsfall einfach unter Verzicht auf eine grafische PĂŒnktchenlinie.

  3. Auf die Gefahr hin, mit meinen NachtrÀgen zu nerven:
    Es geht auch semantisch sinnvoll, was die Verwendung von DLs angeht. Ich verzichte dabei aber auf die geliebte grafische Punktlinie und verwende eine »border-top« fĂŒr die dd-Klasse .ingredients, die ĂŒber die gesamte LĂ€nge lĂ€uft. Plus noch ein paar weitere kleinere Anpassungen.

    đŸ˜„ Ich bin aber leider gerade nicht in der Lage, mein bearbeitetes Sample der Beispiel-Speisekarte hochzuladen. Mal sehen, ob ich das heute Nachmittag schaffe…

  4. @Boris,
    keine Sorge du nervst nicht. Deine EinwÀnde wegen der Semantik sind schon gerechtfertigt, weil wenn wir uns keine Sorge um Semantik machen, dann können wir auch direkt Layouttabellen einsetzen.

  5. Speisekarte mit semantisch korrekten Definitionslisten

    Seit einiger Zeit ist es in der Diskussion: Das saubere »clearing« von fließenden Elementen (»float«) in HTML/XHTML. Perun verweist auf einen sehr interessanten Artikel, dessen Autor eine neue, offenbar gut funktionierende Variante dieses »clearing« a…

  6. Hmm… mein Trackback von gestern Abend kam hier offenbar nicht an, deswegen jetzt manuell meine wie o.a. ĂŒberarbeitete Version der Speisekarte:

    Die ĂŒberarbeitete Speisekarte mit semantisch stimmigen DLs. (Dort auch ein Link zu meinem Blog-Artikelchen zum Thema)

    Und hier das ĂŒberarbeitete Stylesheet dazu

  7. Das man das so verwenden kann sollte doch bekannt sein, oder nicht? Die Frage ist nur, warum man auf clear verzichten sollte.

  8. Ich versteh’ auch nicht, wieso man clear nicht benutzen sollte.

    Zu der gepunkteten Linie als background:

    Man könnte doch mit negativem margin dt und dd.price nach unten ziehen, ĂŒber den border-top von dd.ingredients. Dann noch background:#fff; und es sieht aus, wie das Original (mĂŒĂŸte, hab’s noch nicht versucht).

    Es sei denn, man schaut sich das mit dem IE an…
    Wieso der keine gepunkteten Linien kann…


  9. dt,dd.price {
    font-size:130%;
    font-weight:bold;
    background:#fff;
    }


    dd.ingredients {
    clear:both;
    width:100%;
    padding:8px 0 1.2em 0;
    margin-top:-4px;
    border-top:1px dotted #cfcfcf;
    font:italic 100% Georgia,Times,sans-serif;
    color:#555;
    }

    Das ist, denke ich, alles, was ich geĂ€ndert hab’.

    Der IE setzt aber background:#fff; nicht um.

Kommentare sind geschlossen.