zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navileiste mit unsortierter Liste - li sollen sich ausdehen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.02.2014, 20:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2014
Beiträge: 5
calimero1000 befindet sich auf einem aufstrebenden Ast
Standard Navileiste mit unsortierter Liste - li sollen sich ausdehen

Hallo,
ich habe eine Navileiste erstellt. Die li sollen sich nach rechts nicht so weit ausdehen. Und die li-Boxen sollen aneinander anliegen, getrennt durch die weiße Linie. Der Effekt ist durch background:rgba(0,0,0,0.5) realisiert, also keine Backgroundgrafiken. Wenn man genau hinschaut sieht man noch Schatten, wahrscheinlich durch box-shadow realisiert. #navi ul li a ist die Ordnung.
Wie schaffe ich es, dass sich die Navilistenpunkte wie in der 2. Grafik verhalten?


Geändert von calimero1000 (11.02.2014 um 20:54 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.02.2014, 21:02
?!?
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

Gib dem Ul-Element eine passende Breite und den Li-Elemente ein entsprechendes margin-botton und line-height.

Oder zeige uns deinen vollständigen Code.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.02.2014, 21:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2014
Beiträge: 5
calimero1000 befindet sich auf einem aufstrebenden Ast
Standard

HTML-Code:
	<div id="navilist">
        	<ul>
            	<li><a href="#" title="Infos zu Link 1">Link 1</a></li>
                <li><a href="#" title="Infos zu Link 2">Link 2</a></li>
                <li><a href="#" title="Infos zu Link 3">Link 3</a></li>
                <li><a href="#" title="Infos zu Link 4">Link 4</a></li>
                <li><a href="#" title="Infos zu Link 5">Link 5</a></li>
                <li><a href="#" title="Infos zu Link 6">Link 6</a></li>            
            </ul>
        
    	</div> <!-- schließt #navigationlist -->
Code:
#navi{width:160px;height:480px;background:url(img/navi.jpg) top left no-repeat;float:left;}

#navilist ul{margin:40px 0 0 40px;}
#navilist ul li{margin-bottom:5px;list-style-type:none;padding-left:10px;background:rgba(0,0,0,0.5);border-bottom:1px dotted white;}
#navilist ul li a{text-decoration:none;color:#ccc;}
#navi a:hover{color:#FF0;text-decoration:underline;}
Mit Zitat antworten
  #4 (permalink)  
Alt 11.02.2014, 23:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2014
Beiträge: 5
calimero1000 befindet sich auf einem aufstrebenden Ast
Standard

Danke Explanator, es hat funktioniert.
Mit Zitat antworten
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
Breite einer Liste flexibel gestalten axelf CSS 4 19.02.2012 14:59
<li> von einer Liste in andere verschieben tichy Javascript & Ajax 5 16.07.2009 14:54
Horizontale Liste mit breiteren Unterpunkten Korasu CSS 3 12.05.2009 10:00
Bunte Liste: Code kürzen? Steakfred CSS 2 23.01.2008 12:43
Liste (inline) Umbruch erzeugen Steakfred CSS 3 09.05.2006 13:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:22 Uhr.