Speisekarte mit CSS

Ist das private Weblog von Vladimir Simovic mit Berichten zum Thema Webwork und Internet. Ich wohne in Köln und arbeite als freier Webworker, Blogger und Autor.

Perun am 13. Juli 2005 um 09:51 Uhr

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.

9 Kommentare »»

1. – Boris

Kommentar vom 14. Juli 2005 um 09:02

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

Kommentar vom 14. Juli 2005 um 09:31

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

Kommentar vom 14. Juli 2005 um 10:08

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

Kommentar vom 14. Juli 2005 um 14:49

@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. – dyingeyes weblog

Trackback vom 14. Juli 2005 um 22:29

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

Kommentar vom 15. Juli 2005 um 09:16

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

Kommentar vom 21. Juli 2005 um 17:07

Das man das so verwenden kann sollte doch bekannt sein, oder nicht? Die Frage ist nur, warum man auf clear verzichten sollte.
8. – E|H

Kommentar vom 16. August 2005 um 16:33

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. – E|H

Kommentar vom 19. August 2005 um 17:16

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.

Einen Kommentar hinterlassen

Name (erforderlich)

Mail (wird nicht veröffentlicht) (erforderlich)

Website

XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu <).

Peruns Weblog - Webwork und Internet