KS Webdesign - Der Blog » CSS-Tabelle http://webdesign-passau.com/wordpress Ein weiteres tolles WordPress-Blog Wed, 04 Aug 2010 11:29:58 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Navi – CSS-Tabelle http://webdesign-passau.com/wordpress/navi-css-tabelle/ http://webdesign-passau.com/wordpress/navi-css-tabelle/#comments Thu, 17 Sep 2009 05:21:31 +0000 Klaus http://webdesign-passau.com/wordpress/?p=324 Ein horizontales Menü dessen Links teilweise zwei,- und/oder dreizeilig sind, lassen sich mithilfe einer CSS-Tabelle recht gut gestalten.

Die Vorteile der Tabellendarstellung bestehen darin, dass die Tabellenzellen einer Zeile immer gleich hoch sind und sich immer auf die gesamte Breite der Tabelle verteilen. Es gibt keinen Umbruch der Tabellenzellen
und die Inhalte fließen nicht über.

Hier findest du die navi_tabelle_anfang.htm zum Quelltext rauskopieren.

Die benötigten Grafiken kannst du dir hier holen: navi_tabelle_grafik.htm

Im Browser schaut es so ungfähr aus:

Menü mit CSS-Tabelle - Anfang

Der Quellcode des Navi-Containers schaut so aus:

  • <div id="navi">
  • <ul id="navigation">
  • <li><a href="#"><span>Windows</span> Betriebssystem</a></li>
  • <li><a href="#"><span>Linux</span> Betriebssystem</a></li>
  • <li><a href="#"><span>Mac</span> Betriebssystem</a></li>
  • <li><a href="#"><span>Klemptnersglück</span> Betriebssystem<br />Gibts das?</a></li>
  • </ul>
  • </div>

Und wo ist jetzt die Tabelle, werdet ihr euch vielleicht jetzt fragen?

Im Quelltext werden wir sie nicht anlegen. Sie wird ausschließlich über CSS-Eigenschaften und Werte
realisiert!

Fangen wir also mit CSS-Ergänzungen an:

  • div#navi {
  • display:table;
  • width:100%;
  • background:#f8e580 url(navi_tabelle_verlauf.png) repeat-x left top;
  • border-bottom:1px solid #a8a79f;
  • }
  • div#navi ul {
  • display:table-row;
  • }
  • div#navi ul li {
  • display:table-cell;
  • vertical-align:top; /* Text wird oben in der Zelle angeordnet */
  • text-align:center;
  • }

div#navi wird zur Tabelle, die ul zur Tabellenzeile
und die Listenpunkte zur Tabellenzelle. div#navi hat eine horizontale Verlaufsgrafik zugewiesen bekommen.

Zwischenstand im Browser:

Menü mit CSS-Tabelle - Mitte

Noch nicht perfekt, aber auch nicht ganz schlecht.

Als nächstes bekommen alle Listenpunkte im Quelltext bis auf den ersten die Klasse .trennlinie zugewiesen.

Der erste Listenpunkt bekommt die Klasse nicht, weil sonst der Außenrahmen vom div#umhang in Höhe des Menüs auf der linken Seite 1px breiter wäre als überall sonst. Das mag optisch kaum ins Gewicht fallen, aber mich stört es schon weil ich es weiss.

Die Links und das span wo wir das jeweils erste Wort des Linktextes eingewickelt haben werden gleich mitgestaltet.

Bitte CSS ergänzen:

  • .trennlinie {
  • background: url(navi_tabelle_linie.png) repeat-y left top;
  • }
  • div#navi li a {
  • display:block;
  • color:#995d08;
  • font-size:0.8em;
  • text-decoration:none;
  • padding:0.5em 0;
  • }
  • div#navi ul li a:hover {
  • color:#d90000;
  • }
  • div#navi ul li a span {
  • display:block;
  • font-size:1.5em;
  • line-height:1.1;
  • }

Ergebnis im Browser:

Menü mit CSS-Tabelle - Fertig

Soweit, sogut. Was ist mit dem IE 6/7?

Wir erleben die übliche, böse Überraschung.

Alle Menüpunkte stehen untereinander, weil der IE 6/7 mit display:table/table-row/table- cell nix anfangen kann.

Die Conditional Comments werden nun ausgiebig mit Anweisungen gefüllt, damit diese Browser unser Menü vernünftig umsetzen.

Bitte den Conditional Comment ergänzen:

  • <!--[if lte IE 8]><style type="text/css">
  • *+html #navi ul li {
  • width:24.9%;
  • display:inline;
  • zoom:1;
  • }
  • * html #navi ul li {
  • width:24.9%;
  • display:inline;
  • zoom:1;
  • }
  • </style><![endif]-->

Mit display:inline; und zoom:1; wird ein Inlineblock-ähnliches Verhalten für den IE 6/7 erzeugt.

Eine feste Breite von etwas weniger als 25% wird zugewiesen. Etwas weniger deshalb, um Rundungsfehler abzufangen.

Die Listenpunkte stehen schon mal nebeneinander. Leider verlängert sich die vertikale Trenngrafik für die Listenpunkte nicht bis unten.

Ein Griff in die Trickkiste wird fällig!

Bitte den Conditional Comment ergänzen:

  • <!--[if lte IE 8]><style type="text/css">
  • *+html div#navi ul li {
  • padding-bottom:6em;
  • margin-bottom:-5.5em;
  • }
  • * html div#navi ul li {
  • padding-bottom:6em;
  • margin-bottom:-5.5em;
  • }
  • </style><![endif]-->

Die Listenpunkte bekommen ein unmäßiges unteres padding und zum Ausgleich ein fast genauso großes unteres margin.

Im IE 6 ist nun alles korrekt. Der IE7 macht es im Prinzip auch richtig, jedoch ragen die senkrechten HG-Grafiken für die Listenpunkte nach unten heraus.

Bitte den Conditional Comment ergänzen:

  • <!--[if lte IE 8]><style type="text/css">
  • *+html div#navi ul {
  • overflow-y:hidden;
  • }
  • </style><![endif]-->

Mit dieser Anweisung stimmt es jetzt auch im IE 7.

Zu erwähnen wäre noch, dass wenn die Navigation den ganzen sichtbaren Bereich einnimmt, d.h. ohne Begrenzung durch ein umgebendes Element ist, der IE7 eine Mindestbreite braucht, um bei kleinem Viewport eine Überlappung der Linktexte zu verhindern (min-width:40em; z.B.).

Des Weiteren können die Listenpunkte in diesem Fall beim Verkleinern des Viewportes in die nächste Zeile umbrechen. Um das zu verhindern bekommt die ul white-space:nowrap; zugewiesen.

Damit die Linktexte über zwei oder mehr Zeilen laufen können benötigt a gleichzeitig noch white-space:normal;.

Natürlich alles per Conditional Comment.

Diese Art der Menügestaltung kommt sicher nicht allzuhäufig zur Anwendung, da der Teufel hier im Detail steckt. Aber gut zu wissen, das es so auch geht.

]]> http://webdesign-passau.com/wordpress/navi-css-tabelle/feed/ 1