Vertikale Ausrichtung

[Der Martin]

Hallo, liebe Leute,

ich bin gerade dabei, eine Seite für einen Relaunch zu überarbeiten. Die Seite ist seit über 4 Jahren fast unverändert online und enthält noch so ziemlich alle HTML-Jugendsünden: Überflüssige Javascripte, Manipulation der Statuszeile, Frames, Tabellenlayout, FONT-Tags, das ganze Programm eben.
Meine Eltern wollen nun ihren T-Online Account kündigen (na endlich!), und deshalb muss die Seite nun auf einen anderen Server umziehen.
Also die ideale Gelegenheit für ein Redesign. Aber weil wir im Lauf der vergangenen 4 Jahre auch viel Lob für die Seite bekommen haben, möchte ich am Erscheinungsbild nicht gar so viel ändern.

Tja, und jetzt brüte ich an einem kleinen Detailproblem. In der Navigationsleiste habe ich Links bisher mit einer Tabelle angeordnet. Jetzt habe ich stattdessen die Links selbst als Block-Elemente formatiert.

Auf das Wesentliche reduziert, ungefähr so:

CSS:
a, a:link, a:active, a:visited
 { display:         block;
   left:            0px;
   right:           0px;
   height:          48px;
   padding:         0px;
   border:          1px solid #0000FF;
   border-left:     8px solid #0000FF;
   vertical-align:  middle;
   text-align:      center;
   text-decoration: none;
   background:      #E0E0FF;
   color:           #0000FF;
   font-size:       12px;
   font-weight:     bold;
 }

a:hover
 { background:      #000080;
   color:           #FFFF00;
   text-decoration: underline;
 }

HTML:
<a class="navilink" href="index.php?lang=de">Lemmer, NL</a>
<a class="navilink" href="index.php?lang=de">Aquaronde<br>Bungalowpark</a>
<a class="navilink" href="index.php?lang=de">Aquaronde95<br>im Detail</a>
<a class="navilink" href="index.php?lang=de">Saison- und<br>Preisübersicht</a>
<a class="navilink" href="index.php?lang=de">Kontakt</a>

Was mich jetzt irritiert: Obwohl ich die Links zu Block-Elementen erklärt habe, wird vertical-align offensichtlich nicht interpretiert. Der Link-Text klebt am oberen Rand der jeweiligen Box. Und da sind sich IE5.5 und FF1.0 einig.
Warum? Wahrscheinlich habe ich ein Brett vorm Kopf und übersehe nur eine Kleinigkeit. Die Höhenangabe (height: 48px) wird aber umgesetzt.

Falls die obigen Fragmente nicht ausreichen, kann man das auch unter http://do4fun.homeip.net/aquaronde/index.php im Zusammenhang ansehen (ist nur ein Testserver, nix Endgültiges).

Any idea?
Vielen Dank schon mal & herzliche Grüße

Martin

[Cheatah]

Hi,

HTML:

Tipp: Das ist ein klassischer Fall für <ul>.

Was mich jetzt irritiert: Obwohl ich die Links zu Block-Elementen erklärt habe, wird vertical-align offensichtlich nicht interpretiert.

Nicht obwohl, sondern weil. Die vertical-align-Eigenschaft ist nur bei inline- und table-cell-Elementen anwendbar. Nutze statt dessen padding, line-height oder Ähnliches.

Cheatah

[Der Martin]

Hallo Cheatah,

Tipp: Das ist ein klassischer Fall für <ul>.

Daran hatte ich auch schon gedacht, ich halte es hier auch für angebracht - ich hab's aber noch nicht umgesetzt.

Was mich jetzt irritiert: Obwohl ich die Links zu Block-Elementen erklärt habe, wird vertical-align offensichtlich nicht interpretiert.

Nicht obwohl, sondern weil. Die vertical-align-Eigenschaft ist nur bei inline- und table-cell-Elementen anwendbar.

Okay, das gleiche sagt Detlef G. auch. Ich hatte -ohne weiter nachzudenken- stillschweigend vorausgesetzt, dass vertical-align auch für Blockelemente gilt, weil es eigentlich Sinn ergibt.

Nutze statt dessen padding, line-height oder Ähnliches.

Ähm, aber wie? Ich möchte eine einheitliche Höhe der Kästchen unabhängig davon, ob sich der Text darin auf eine oder zwei Zeilen verteilt, und ich möchte außerdem, dass der Text mittig zentriert ist.
Hmm, mittig zentriert? Quatsch, ich meinte natürlich: Vertikal zentriert. ;)
Was fange ich da mit padding oder line-height an?

Gute Nacht,

Martin

[Cheatah]

Hi,

Okay, das gleiche sagt Detlef G. auch.

ja, fast (stich-)wörtlich :-)

Nutze statt dessen padding, line-height oder Ähnliches.
Ähm, aber wie? Ich möchte eine einheitliche Höhe der Kästchen unabhängig davon, ob sich der Text darin auf eine oder zwei Zeilen verteilt,

Das wird mit den o.g. Eigenschaften tatsächlich schwer. Beschäftige Dich mit absoluter Positionierung. Natürlich könntest Du die Elemente auch zu table-cell machen; das beherrscht allerdings der IE nicht.

Cheatah

[Detlef G.]

Hallo Martin

HTML:
<a class="navilink" href="index.php?lang=de">Lemmer, NL</a>
<a class="navilink" href="index.php?lang=de">Aquaronde<br>Bungalowpark</a>
<a class="navilink" href="index.php?lang=de">Aquaronde95<br>im Detail</a>
<a class="navilink" href="index.php?lang=de">Saison- und<br>Preisübersicht</a>
<a class="navilink" href="index.php?lang=de">Kontakt</a>

Wie sieht das dann ohne CSS aus?
Besser du verwendest Listen für die Links, die du dann ganz nach belieben
formatieren kannst. Diese sind auch ohne CSS übersichtlich.

Was mich jetzt irritiert: Obwohl ich die Links zu Block-Elementen erklärt habe, wird vertical-align offensichtlich nicht interpretiert. Der Link-Text klebt am oberen Rand der jeweiligen Box. Und da sind sich IE5.5 und FF1.0 einig.

Nicht obwohl, sondern weil du die Links zu Block-Elementen erklärt hast,
ist vertical-align wirkungslos.
Bei Visual formatting model details vertical-align steht:
"Applies to:   inline-level and 'table-cell' elements"

Bei Blockelementen (bzw. Elementen mit display:block) kannst du mit padding
arbeiten.

Auf Wiederlesen
Detlef