zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navi Tabs lassen sich nicht positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.04.2014, 18:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.04.2012
Beiträge: 24
roman befindet sich auf einem aufstrebenden Ast
Standard 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>
Danke für eure Hilfe.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.04.2014, 19:30
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Code:
.navigation li a {
    background-color: #8DB8CF;
    color: #FFF;
    text-decoration: none;
    height: 77px;
    padding: 60px 0px 0px;
}
Nimm da mal das height und padding raus.

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.04.2014, 10:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.04.2012
Beiträge: 24
roman befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 10.04.2014, 12:00
Benutzer
neuer user
 
Registriert seit: 24.12.2013
Beiträge: 57
leex279 befindet sich auf einem aufstrebenden Ast
Standard

Ich nehme an du willst es so haben:

Edit fiddle - JSFiddle

Schaus dir an, wenn fragen bestehen, fragen
Mit Zitat antworten
  #5 (permalink)  
Alt 10.04.2014, 13:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.04.2012
Beiträge: 24
roman befindet sich auf einem aufstrebenden Ast
Standard

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 13:21 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 10.04.2014, 14:06
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
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.
Lass dir doch nicht alles vorkauen und streng dich mal an. Lies auch mal was die Unterschiede zwischen inline, inline-block und block sind.

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 10.04.2014, 15:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.04.2012
Beiträge: 24
roman befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 10.04.2014, 15:12
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 10.04.2014, 15:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.04.2012
Beiträge: 24
roman befindet sich auf einem aufstrebenden Ast
Standard

Super, danke!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
grafische Navigation horizontal zentrieren, klappt nicht lila_3 CSS 4 30.11.2010 11:25
Boxen von Navigation und Logo sind zu weit auseinander lila_3 CSS 2 04.09.2009 00:28
IE verschiebt Navi Menü macmensa CSS 7 17.08.2009 17:45
Probleme mit horizontaler Navi rechts lila_3 CSS 2 14.07.2009 22:36


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:38 Uhr.