1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Vertical-align innerhalb eines Div-Elementes

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Migu, 07.11.05.

  1. Migu

    Migu Kaiser Wilhelm

    Dabei seit:
    14.02.04
    Beiträge:
    175
    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 Frage: Ich kann Text/Links innerhalb eines Div-Elementes problemlos mit dem text-align-Befehl horizontal zentrieren. Der vertical-align-Befehl fürs vertikale Ausrichten scheint aber nur bei Tabellen zu funktionieren. Wie kriege hin, dass die Links auch in der vertikalen Mitte der Tabs sind?

    Meine vierte Frage: Muss ich prinzipiell anders vorgehen?

    Besten Dank für eure Hilfe und viele Grüsse aus Neuseeland, Michael
     
    #1 Migu, 07.11.05
    Zuletzt bearbeitet: 07.11.05
  2. Hans Müller

    Hans Müller Granny Smith

    Dabei seit:
    07.11.05
    Beiträge:
    16
    hm, viele fragen. mir würde es leichter fallen dir zu helfen wenn du das ganze mal so hochlädst wie du es jetzt gemacht hast und dann vielleicht noch ein bild welches zeigt wie du es gerne hättest.
     
  3. Migu

    Migu Kaiser Wilhelm

    Dabei seit:
    14.02.04
    Beiträge:
    175
    Besten Dank fuer deine Antwort. Habe gerade gelesen, dass das vertical-align tatsaechlich nur in Tabellen anwendbar ist. Auch die dritte Frage kann ich glaube ich mit einem weiteren Div-Tag im Zentrum der Navigationsleiste und margin-right und margin-left loesen.

    Viele Gruesse, Michael
     

Diese Seite empfehlen