HTML

**Exit** · 07.02.2007, 15:15

Hallo zusammen,

ich bin gerade dabei diese Webseite von dem grausigen (von mir verbrochenen) Tabellen Layout zu befreien.

Wie man sieht handelt es sich hier um ein zentriertes Design. Und nun macht mir die untere Navigationsleiste (Organisation, Ort, Aussteller, Anmeldungen, ...) Probleme.

Diese Leiste hat pro veranstalteten Treffen eine unterschiedliche Anzahl von Einträgen - somit lässt sich das in einem zentralen Stylesheet vielleicht nicht abbilden - ausser man legt da eine für 4, 5, 6, usw. Einträgen ab.

Kann mir da jemand einen Tip geben - wie ich das per CSS hinbekomme?

In Worten:
- Mach ein Blockelement auf (ul, div oder was auch immer)
- in dem Blockelement zeige alle Subelemente an, dass sie zentriert verteilt werden (lässt sich nicht umschreiben

)

Als Tabelle sieht das so in der Art aus:

Code:

<table width="600px">
  <tr>
    <td widht="20px">&nbsp;</td>
    <td align="center">Eintrag 1</td>
    <td align="center">....</td>
    <td align="center">Eintrag n</td>
    <td widht="20px">&nbsp;</td>
  </tr>
</table>

Und sowas ähnliches suche ich per CSS - und habe bisher nur was gefunden, wenn die einzelnen Elemente (Einträge) eine feste Breite haben - aber da muss ich ja dann für jedes Seite ein eigenes Stylesheet hinterlegen.

mondrian · 07.02.2007, 16:04

Hallo Exit,

die flexible Verteilung des freien Raums ist per CSS erstmal nicht so gut möglich wie
mit Tabellen.
Du könntest hier m.E. sehr gut bei einer Tabelle bleiben, denn was du da hast ist
zumindest eine Liste (aus "HTML-semantischer" Sicht), und eine Tabelle kommt der
Liste schon sehr nahe.

Ansonsten ist erstmal eine Liste richtig, die dann horizontal angezeigt werden muss.
Danach kann dann aber für moderne Browser die Tabelle nachgebildet werden
(per CSS), hab mal was geschrieben und das schaut m.E. so schonmal ganz gut aus,
jedenfalls erstmal mit Firefox 2.0, ob es dann wirklich mit unterschiedlichen Texten
sauber hinhaut muß nochmal geschaut werden:

Edit:

hab mal den Code verändert, sieht jetzt besser aus:

Code:

<?xml version="1.0" encoding="ISO-8859-15" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta content="text/html; charset=iso-8859-15" http-equiv="Content-Type" />
<title>test</title>
<style type="text/css">
body{background-color:black;}
ul.nav{color:silver;font-family:Arial, sans-serif;font-weight:bold;font-size:.8em;line-height:1.6em; width:600px;
 border-top:1px solid silver; border-bottom:1px solid silver;margin:auto;list-style-type:none;padding:0; }
ul.nav li {margin:0;padding:0;display:inline;}
ul.nav li a{color:silver;}   ul.nav li a:hover{color:white}

/* Tabelle nachbilden: */

ul.nav { display:table;}
ul.nav li { display:table-cell; margin:0;padding:0;text-align:center;width:50px;}

/* links, rechts gleicher Abschluss */

ul.nav li:last-child {text-align:right;padding-right:2em; text-align:right;}
ul.nav li:first-child {text-align:left; padding-left:2em; }

</style>
<!--[if IE gt 5]><style>
body{text-align:center} /* ie6 */
ul.nav li {display:block;float:left;} /* ie7 */
#nava li, #navb li {width:19%}
#navc li { width:15.5%}
#navd li { width:97%; text-align:left;padding-left:2em;}
</style><![endif]-->
</head>
<body>
<p><br /><br /></p>

<ul class="nav" id="nava">
<li>  <a>Organisation</a></li>
<li>  <a>Ort</a></li>
<li> <a>Aussteller</a></li>
<li> <a>Anmeldungen</a></li>
<li>  <a>Videos</a></li>
</ul>

<p><br /><br /></p>

<ul class="nav" id="navb">
<li> <a> Termin</a></li>
<li> <a> Ort</a></li>
<li> <a> Programm </a></li>
<li> <a> Aussteller </a></li>
<li> <a> Nachlese </a></li>
</ul>

<p><br /><br /></p>

<ul class="nav" id="navc">
<li> <a> Termin</a></li>
<li> <a> Ort</a></li>
<li> <a> Programm </a></li>
<li> <a> Aussteller </a></li>
<li> <a> Bilder </a></li>
<li> <a> Teilnehmer </a></li>
</ul>

<p><br /><br /></p>

<ul class="nav" id="navd">
<li> <a>Verkauf von Bilder/Video CD/DVDs </a></li>
</ul>

</body>
</html>

Schau es dir mal an, Feinarbeit ist ja noch möglich, also Abstände usw..

Sind verschiedene Ansätze, einaml Tabellennachbildung, dann Unterscheidung
der Seiten für den IE.

Geht auch per verschiedener id im Body-Tag (und immer noch einer stylesheet-Datei)
statt der unterchiedlichen IDs bei UL.

**Exit** · 07.02.2007, 21:17

Wau - perfekt - ich denke das ich damit schon sehr viel anfangen kann!

Vielen Dank

mondrian · 08.02.2007, 10:29

Zitat:

Zitat von Exit

Wau - perfekt - ich denke das ich damit schon sehr viel anfangen kann!

Vielen Dank

Freut mich. Der IE 7 könnte hier vielleicht noch etwas anders bedient werden, mehr
CSS als der IE 6 kann er ja schon, aber so ganz klappt es dann oft leider doch nicht.

Falls du nur ein externes Stylesheet nehmen möchtest, müßte bei entspr. Doctype und
Rendermodus des IE 7 auch sowas als Weiche möglich sein:

Code:

*:first-child+html #nava[id] { width: ...  }

Gibt dann u.U. mit dem IE 6 Parsingfehler, deshalb ist die doppelte Schreibweise und die
Reihenfolge, also als CSS-Weiche für den ie 6 zuerst, wahrscheinlich wichtig, der Code
bezieht auf das Beispiel oben (und erste Liste) , die Conditional Comments entfallen:

Code:

/* links, rechts gleicher Abschluss */

ul.nav li:last-child {text-align:right;padding-right:2em; text-align:right;}
ul.nav li:first-child {text-align:left; padding-left:2em; }

/* ie 6 ( bis ie 4 ) */

* html  #nava li { width:19%;display:block;float:left; }
* html body {text-align:center}

/* ie 7 */

*:first-child+html #nava[id] li {width:19%;display:block;float:left;}

</style>
</head>
<body>

**Exit** · 08.02.2007, 17:21

Kann man IE6 und 7 eigentlich parallel auf einem Rechner (im selben BS) laufen lassen? Ich befürchte mal eher nein.

Oder gibt es sonst eine Möglichkeit wenigstens die wichtigsten Browser das ganze mal testen zu lassen?

mondrian · 08.02.2007, 18:01

Bei mir laufen (unter XP) neben dem IE 6 die IE 5, 5.5 und 7 als "standalone", was auch
halbwegs diesen Multi-IE Versions-Test besteht, aber beim IE 7 gibt es in dieser Konstellation
schon etwas Probleme, zumal einige Teile des IE 7 nicht nur ausgepackt, sondern doch
installiert werden müssen. Irgend ein Sicherheitsupdate des IE 6 soll ebenfalls stören.

Unter Win98, falls du noch sowas übrig hast, ist es leider schwer möglich die Browser
parallel laufen zu lassen, und der IE 7 läuft wohl nicht? Also ggf. zwei Windows XP,
eins mit 5, 5.5 und 6, und einmal mit 7, oder XP mit 7 und W98 mit 6 (und die 5er nicht).

Oder du schaust hier nochmal ob du es sauber hinkriegst mehrere Browser auf einer
Kiste laufen zu lassen.

Screenshot-Dienste mag es auch geben, kostenlose hab ich aber nur mal für Mac-Safari
gesehen. Sonst mußt du halt mal jemanden mit entspr. Browser fragen.

Alternativ kannst du auch per Doctype den Rendermodus der IE ändern, dann müssten
sich eigentlich die IE 5.5, 6 und 7 ziemlich ähnlich verhalten, und natürlich entspr.
falsch anzeigen, z.B. Box-Bug. Wenn du ein Stylesheet für 'moderne' Browser machst
und per Weiche wie conditional comment noch eins für die IEs einbindest, ist es vielleicht
einfach zu verwalten, und ein Test mit IE 6 würde notfalls reichen weil IE 7 (und 5 x)
sich gleich blöd verhalten müßten, verläßlich scheint mir das letztlich aber nicht.

**Exit** · 09.02.2007, 08:07

OK Danke Dir.