09.04.2014, 17:49
|
|||
|
|||
Navi Tabs lassen sich nicht positionieren
Hallo!
Ich habe ein Problem mit meiner Navigation. Ich will mehrere Tabs in einem Container nebeneinander platzieren. Die Tabs sollen alle die gleiche Höhe haben, Breite je nach Inhalt. Die Tabs sollen am unteren Rand des Containers stehen, oben soll ein Abstand zwischen Container und Tabs sein. Nun habe ich folgende Probleme. Wenn ich den Tabs eine bestimmte Höhe gebe, ragen sie oben über den Container hinaus, obwohl sie innerhalb des Containers sind. Mit Margin müsste man die Tabs doch im Container positionieren können. Ich hab nach den Listenelementen ein clear:both eingegeben, weiß aber nicht, ob das so korrekt ist. Die Tabs haben rechts zwischen a Element und Border einen Abstand, alle außer der rechte Tab, obwohl alle die gleiche Klasse haben, ich kann nicht herausfinden woran das liegt: jQuery Accordion Style DIV Menu Code:
.navigation {
margin:0 0 0 0;
padding: 30px 0 0 0;
background-color: #000;
}
.navigation ul {
list-style: none;
padding:0;
margin:0;
}
.navigation li {
display: inline;
border: solid white;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
}
.navigation li a {
padding:60px 0 0 0;
height:77px;
background-color:#8db8cf;
color:white;
text-decoration:none;
}
.navigation li a:hover {
padding:60px 0 0 0;
height:77px;
background-color:#fff;
color:#8db8cf;
text-decoration:none;
}
HTML-Code:
<div class="navigation"> <ul> <li><a href="tuerkom/tuerkommunikation_1.html"> Navi 1</a> </li> <li><a href="#"> Navi 2 blabbal</a> </li> <li><a href="#"> Navi 3</a> </li> <li><a href="#">Navi 4</a> </li> <li><a href="#">Navi 5</a> </li> </ul> <div style="clear:both;"></div> </div> 
|
| Sponsored Links |
|
09.04.2014, 18:30
|
|||
|
|||
|
Code:
.navigation li a {
background-color: #8DB8CF;
color: #FFF;
text-decoration: none;
height: 77px;
padding: 60px 0px 0px;
}
Inline-Elemente erhalten ihre Höhe durch eine Kombination aus line-height und font-size.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum.
|
| Sponsored Links |
|
10.04.2014, 09:39
|
|||
|
|||
|
Ok, hab ich jetzt mit line-height gemacht. Das Problem ist nun, dass die Tabs in der Mitte schweben und die Schrift nicht ich keinen Abstand zwischen border-top und Schrift machen kann. Außerdem brauche ich das a Element über die volle Größe der Tabs.
Und woher der Abstand rechts zwischen a Element und Border kommt weiß ich auch noch nicht.
|
|
10.04.2014, 11:00
|
|||
|
|||
|
Ich nehme an du willst es so haben:
Edit fiddle - JSFiddle Schaus dir an, wenn fragen bestehen, fragen 
|
|
10.04.2014, 12:08
|
|||
|
|||
|
Super danke, aber noch eine Frage.
Ich hätte den Text von a gerne am unteren Rand des Tabs. Ich kann dem a zwar ein padding geben, bekomme aber das padding unten nicht weg. Geändert von roman (10.04.2014 um 12:21 Uhr)
|
|
10.04.2014, 13:06
|
|||
|
|||
|
Zitat:
Zudem hast du in den neueren Browsern heute Entwickler-Werkzeuge mit denen du experimentieren kannst. Bei Firefox zum Beispiel mit [ctrl] + [shift] + [c] zu erreichen. Das hilft aber alles nichts, wenn du die Zusammenhänge nicht verstehst.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum.
|
|
10.04.2014, 14:03
|
|||
|
|||
|
Naja, das Ding ist ja dass die a Elemente display:inline-block sind, und das respektiert ja top & bottom margins und padding. Aber leider bleibt unter beim Text trotz padding-bottom:0 ein Abstand. Mit line-height wird einfach der Tab höher.
|
|
10.04.2014, 14:12
|
|||
|
|||
|
Du hast ja noch die li-Elemente, die ja auch inline-block sind.
Denen gibst du erst mal eine Höhe. Dann den a-Elementen innerhalb der li eine line-height und mit padding-top kannst du sie nach unten schieben. so in etwa: Code:
.navigation {
background-color: #000;
}
.navigation ul {
list-style: none;
padding:0;
margin:0;
}
.navigation ul > li {
display: inline-block;
border: solid white;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
height:50px;
}
.navigation li a {
background-color: #8db8cf;
color: white;
text-decoration: none;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
padding-top: 30px;
line-height: 20px;
}
.navigation li a:hover {
background-color:#fff;
color:#8db8cf;
text-decoration:none;
}
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum.
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 17:32 |
| grafische Navigation horizontal zentrieren, klappt nicht | lila_3 | CSS | 4 | 30.11.2010 10:25 |
| Boxen von Navigation und Logo sind zu weit auseinander | lila_3 | CSS | 2 | 03.09.2009 23:28 |
| IE verschiebt Navi Menü | macmensa | CSS | 7 | 17.08.2009 16:45 |
| Probleme mit horizontaler Navi rechts | lila_3 | CSS | 2 | 14.07.2009 21:36 |
Linear-Darstellung
