- Registriert
- 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
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
Zuletzt bearbeitet: