Nav stylen

[Selina]

Guten Abend,

ist es möglich meine Navigation so zu gestallten, dass ich vor die Aufzählungspunkte noch etwas Abstand bekomme? Also mehr vom Hintergrund sehe? Mit margin und padding erreiche ich da leider nichts.

So sehe ich es derzeit im Browser:

  
<nav class="subnav">  
<ul><li> <a href="/">Startseite</a></li></ul>  

  
.subnav {  
	display:inline-block;  
	width:22%;  
	vertical-align:top;  
	margin-right:1em;  
}  
  
.subnav ul {  
	margin:0;  
	padding: 0em 0em 0em 1.4em;  
	font-size:0.9em;  
	list-style-type:disc;  
	list-style-position:inside;  
	width:100%;  
}  
  
.subnav ul li {  
	padding: 15px 0 15px 0;  
	border-bottom: 1px solid #efefef;  
	border-top: 1px solid #fff;  
}  
  
.subnav ul li:hover {  
	background-color:#e7e7e7;  
}  
  
.subnav ul li a {  
	text-decoration:none;  
	color:#000000;  
}  

[Gunnar Bittersmann]

@@Selina:

nuqneH

ist es möglich meine Navigation so zu gestallten, dass ich vor die Aufzählungspunkte noch etwas Abstand bekomme? Also mehr vom Hintergrund sehe? Mit margin und padding erreiche ich da leider nichts.

Doch, mit padding-left für li.

Qapla'

[Selina]

Doch, mit padding-left für li.

Ah danke dir für die schnelle Hilfe. Ich hatte es immer bei ul versucht.

[Selina]

Hallo,

ich hätte noch eine Zusatzfrage und zwar wenn ich mit der Maus über ein Punkt fahre (siehe Bild) dann wird dieser unterstrichen. Ist es möglich dass ich den Strich etwas weiter vom Text weg bekomme?

Hast du da eine Lösung für mich?

[Selina]

Hallo,

ok, hab eine Lösung gefunden

  
	text-decoration:none;  
	border-bottom: 1px solid #333;  
	padding-bottom: 3px;  

[Selina]

Hallo,

ist es eigentlich auch ein Link um ein <li> zu legen?

  
<nav>  
<ul>  
<a href="index.html"><li <?php if($_SERVER['PHP_SELF'] == '/index.php') echo 'class="aktiv"' ?>> Startseite</li></a>  
</ul>  
</nav  

[Der Martin]

Moin,

ist es eigentlich auch ein Link um ein <li> zu legen?

<nav>

<ul>
<a href="index.html"><li <?php if($_SERVER['PHP_SELF'] == '/index.php') echo 'class="aktiv"' ?>> Startseite</li></a>
</ul>
</nav

  
das ist ungültiges HTML, denn ul darf nur li als Kindelemente haben.  
Was gefällt dir an der üblichen Struktur (a innerhalb von li) nicht?  
  
Ciao,  
 Martin  

-- 
Die neue E-Mailadresse des Papstes: <mailto:urbi@orbi>  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Selina]

Moin Martin,

das ist ungültiges HTML, denn ul darf nur li als Kindelemente haben.
Was gefällt dir an der üblichen Struktur (a innerhalb von li) nicht?

danke für deine Antwort. Mir gefällt darin nicht, dass ich nur auf das Wort klicken kann um auf die Seite zu gelangen. Würde gerne auf das ganze li klicken, sprich auf den ganzen Bereich.

[Matthias Apsel]

Om nah hoo pez nyeetz, Selina!

das ist ungültiges HTML, denn ul darf nur li als Kindelemente haben.
Was gefällt dir an der üblichen Struktur (a innerhalb von li) nicht?

danke für deine Antwort. Mir gefällt darin nicht, dass ich nur auf das Wort klicken kann um auf die Seite zu gelangen. Würde gerne auf das ganze li klicken, sprich auf den ganzen Bereich.

formatiere die entsprechenden a-Elemente mit display: block;

Matthias

[Gunnar Bittersmann]

@@Selina:

nuqneH

ist es eigentlich auch ein Link um ein <li> zu legen?

Dass es andersrum verschachtelt sein muss, hat Der Martin ja schon gesagt.

Aber warum nennen viele den Menüpunkt der aktuell angezeigten Seite „aktiv“? Die diesbezügliche Aktivität des Nutzers ist längst vorbei; er/sie hat die Seite schon angewählt. Eine bessere Benennung dafür wäre „aktuell“ oder „current“. Auch um Verwechslungen mit der Pseudoklasse :active aus dem Weg zu gehen, die was völlig Anderes bewirkt. Und da es nur eine aktuell angezeigte Seite gibt, wäre ID statt Klasse die besser Wahl.

Jetzt kommt das dicke Aber: Die aktuell angezeigte Seite sollte im Menü gar nicht verlinkt sein! Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]

<nav>  
  <ul>  
    <li><a <?php [code lang=php]if($_SERVER['PHP_SELF'] != '/index.php') echo 'href="index.html"';
~~~ ?>>Startseite</a></li>  
  </ul>  
</nav[/code]  
  
(Beachte die Negation der Bedingung. Was passiert eigentlich, wenn die Startseite ohne '/index.php' am Ende aufgerufen wird?)  
  
Eine ID bzw. Klasse ist dann gar nicht notwendig. Der Menüpunkt der aktuell angezeigten Seite lässt sich mit '`nav a:not([href])`{:.language-css}' selektieren. (`[link:http://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/not@title=:not()]`{:.language-css}, [Attributselektor](http://wiki.selfhtml.org/wiki/CSS/Selektoren/Attributselektor)) Oder man stylt alle anderen mit '`nav a[href]`{:.language-css}'.  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)