nicht angemeldet
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