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.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
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… 🙄
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
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.
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…
@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.
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…
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
Das man das so verwenden kann sollte doch bekannt sein, oder nicht? Die Frage ist nur, warum man auf
clearverzichten sollte.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…
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.