Michael: Vertical-align innerhalb eines Div-Elementes

SELF-Forum

Vertical-align innerhalb eines Div-Elementes

Michael
– Informationen zu den Bewertungsregeln

Hallo Zusammen,

bin Anfänger und versuche gerade eine Tab-Navigationsleiste (ähnlich wie bei apple.com) mittels CSS (bewusst ohne Tabelle) und einem externen Stylesheet zu gestalten. Dazu habe zuerst eine Div-Element innerhalb des Body für das Grundgerüst der Navigationsleiste erstellt:

<body>
 <div class=navigation"></div>

.navigation           { margin-top: 20px; position: absolute; width: 800px; height: 30px }

Danach habe ich innerhalb der .navigation-class für jedes Tab ein eigenes Div mit absoluter Positionsangabe im Stylesheet geschrieben:

<div class="navigation"><div class="navigation_first_inactive"><a href="home.html">Home</a></div><div class="navigation_second_inactive"><a href="products.html">Products</a></div><div class="navigation_third_inactive"><a class= href="about.html">About Us</a></div><div class="navigation_fourth_inactive"><a href="pages/contact.html">Contact</a></div><div class="navigation_fifth_inactive"><a href="faq.html">FAQ</a></div></div>

.navigation_first_inactive     { background-color: #ff6600; text-align: center; position: absolute; top: 0; left: 140px; width: 100px; height: 30px; vertical-align: middle; border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black }
.navigation_second_inactive     { background-color: #ff6600; text-align: center; position: absolute; top: 0; left: 245px; width: 100px; height: 30px; vertical-align: middle; border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black }
.navigation_third_inactive    { background-color: #ff6600; text-align: center; position: absolute; top: 0; left: 350px; width: 100px; height: 30px; vertical-align: middle; border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black }
.navigation_fourth_inactive    { background-color: #ff6600; text-align: center; position: absolute; top: 0; left: 455px; width: 100px; height: 30px; vertical-align: middle; border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black }
.navigation_fifth_inactive    { background-color: #ff6600; text-align: center; position: absolute; top: 0; left: 560px; width: 100px; height: 30px; vertical-align: middle; border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black }

Meine erste Frage: Div-Element sind ja Block-Level-Elemente, dass heisst, sie müssten die ganze Zeile ausfüllen. Warum kann ich sie trotzdem nebeneinander anordnen?

Meine zweite Frage: Gibt es eine Möglichkeit, die Tabs zu verteilen ohne für jedes Tab die Position festlegen zu müssen?

Meine dritte und wichtigste Frage: Ich kann Text/Links innerhalb der Div-Elemente (Tabs) problemlos mit dem text-align-Befehl horizontal zentrieren. Der vertical-align-Befehl fürs vertikale Ausrichten scheint aber nur bei Tabellen (er wird auch anhand einer Tabelle auf selfhtml.org erklärt) zu funktionieren. Wie kriege hin, dass die Links in der vertikalen Mitte der Tabs sind?

Meine vierte Frage: Müsste ich prinzipiell anders vorgehen?

Besten Dank für eure Hilfe und viele Grüsse aus Neuseeland, Michael

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Vertical-align innerhalb eines Div-Elementes

    Martin Hölter Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi!

    Als Anfänger sollte man sich nciht direkt an absoluter Positionierung versuchen. Eine andere Position als static sollte nur in Ausnahmefällen genutzt werden.

    Schau dir mal die CSS-Layout-Beispiele an, da werden bessere alternativen vorgestellt.

    Gruß aus Iserlohn

    Martin

    --
    Selfcode: ie:{ fl:( br:^ va:) ls:# fo:| rl:( n4:( ss:| de:> js:) ch:? sh:( mo:| zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Vertical-align innerhalb eines Div-Elementes

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    Meine erste Frage: Div-Element sind ja Block-Level-Elemente, dass heisst, sie müssten die ganze Zeile ausfüllen. Warum kann ich sie trotzdem nebeneinander anordnen?

    Weil du sie absolut Positioniert hast.
    Wie mein Vorposter aber schon andeutete, ist es keine gute Idee, absolute Positionierung zu verwenden, wenn man sie noch nicht verstanden hat. Und deine Frage legt diesen Eindruck ja nahe.

    Meine zweite Frage: Gibt es eine Möglichkeit, die Tabs zu verteilen ohne für jedes Tab die Position festlegen zu müssen?

    Ja, per Float beispielsweise.

    Meine dritte und wichtigste Frage: Ich kann Text/Links innerhalb der Div-Elemente (Tabs) problemlos mit dem text-align-Befehl horizontal zentrieren. Der vertical-align-Befehl

    CSS kennt immer noch keine Befehle!

    fürs vertikale Ausrichten scheint aber nur bei Tabellen (er wird auch anhand einer Tabelle auf selfhtml.org erklärt) zu funktionieren.

    Nicht ganz:
    vertical-align
    "Applies to:   inline-level and 'table-cell' elements"

    Wie kriege hin, dass die Links in der vertikalen Mitte der Tabs sind?

    In dem du eine entsprechende line-height vergibst.

    Meine vierte Frage: Müsste ich prinzipiell anders vorgehen?

    Ja, auf jeden Fall. Und dieser Punkt ist der dringlichste, er ist zu beachten, bevor du dich weiter mit deinen anderen Fragen beschäftigst:
    Div-Suppe ist kein sinnvolles HTML.
    Nutze also bitte Listen statt deinem Div-Geschachtel, um eine Navigation (das _ist_ eine Liste von Links) strukturell sinnvoll auszuzeichnen.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln