Menü Pixelgenau ausrichten

[seufert]

Hallo,
ich habe folgendes Testmenü erstellt:

<ul>
<li><a href="index.html" class="active">Startseite</a></li>
<li><a href="menu1.html">menu1</a></li>
<li><a href="menu2.html">menu2</a></li>

</ul>  

Das <ul> Element zusammen mit dem <li> Element erstellt Listelemente.

Wenn ich allerdings möchte, das die Listelemente z.B. 50 Pixel nach links anfangen, so muß ich es wohl über ein Padding machen?

Also müßte ich in einer css Datei sagen

#ul {
padding:50px;
}

Und vor dem Quellcode ein <div id="ul"> einbinden.

Dann sind aber alle <ul> ja mit Paddings?

[suit]

Wenn du die dem ul-Element ein padding geben willst, gib dem ul-Element ein padding und nicht einem div-Element welches ul heisst und das ul-Element umschließt.

[Matthias Apsel]

Om nah hoo pez nyeetz, seufert!

#ul { padding:50px; }

Und vor dem Quellcode ein <div id="ul"> einbinden.

Zusätzlich zu dem, was suit sagte:

Es ist nicht sinnvoll, eine Id "ul" zu nennen, besser wäre z.B. Navigation.

Dann sind aber alle <ul> ja mit Paddings?

Du brauchst einen Selektor, der nur diese Liste anspricht.

Welcher da gut ist, richtet sich nach deinem Quelltext. Möglich wäre

#navigation ul /*die Liste befindet sich innerhalb eines Elementes mit der ID Navigation*/
#navigation /*Die Liste selbst hat die ID Navigation*/

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Möglich wäre
#navigation ul /*die Liste befindet sich innerhalb eines Elementes mit der ID Navigation*/
#navigation /*Die Liste selbst hat die ID Navigation*/

Möglich wäre auch '[role="navigation"] ul' oder '[role="navigation"]', je nachdem, welches Element das ARIA-Attribut @role="navigation" trägt.

Qapla'

[misterunknown]

CSS:

  
.navigation {  
   padding:50px; /* wenn du wirklich nur nach links rücken willst natürlich padding-left */  
}  

HTML:

  
<ul class="navigation">  
   <li><a href="index.html" class="active">Startseite</a></li>  
   <li><a href="menu1.html">menu1</a></li>  
   <li><a href="menu2.html">menu2</a></li>  
</ul>  

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

> <ul class="navigation">
>    <li><a href="index.html" class="active">Startseite</a></li>
>    <li><a href="menu1.html">menu1</a></li>
>    <li><a href="menu2.html">menu2</a></li>
> </ul>
> 

Verlinke niemals auf die aktuelle Seite!

deshalb

> <ul class="navigation">
>    <li><span>Startseite</span></li>
>    <li><a href="menu1.html">menu1</a></li>
>    <li><a href="menu2.html">menu2</a></li>
> </ul>
> 

oder

> <ul class="navigation">
>    <li>Startseite</li>
>    <li><a href="menu1.html">menu1</a></li>
>    <li><a href="menu2.html">menu2</a></li>
> </ul>
> 

Matthias

[gspot]

Verlinke niemals auf die aktuelle Seite!

Warum nicht?

[Matthias Apsel]

Om nah hoo pez nyeetz, gspot!

Verlinke niemals auf die aktuelle Seite! Warum nicht?

Ein Link sollte zu einer anderen Seite führen[1]. Es gibt zwei Möglichkeiten:

Man klickt und es passiert nichts oder man klickt und die Seite springt einfach nur nach oben. In beiden Fällen erzeugt man beim Benutzer Verärgerung/Verwirrung.

[1] oder er ist ein Aktualisierungslink in Foren, bei browsershots, aktienkursen oder dgl.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

[1] oder er ist ein Aktualisierungslink in Foren, bei browsershots, aktienkursen oder dgl.

Das sollte nicht dem Nutzer nicht als Link präsentiert werden.

Qapla'

[Gunnar Bittersmann]

@@gspot:

nuqneH

Verlinke niemals auf die aktuelle Seite!
Warum nicht?

Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]

Qapla'

[gspot]

Man lernt nie aus. Danke für den Link!

[seufert]

CSS:
[code lang=css]
.navigation {
   padding:50px; /* wenn du wirklich nur nach links rücken willst natürlich padding-left */

[...]
Hallo,
besten dank.
CSS ist an sich logisch aufgebaut...ich selbst wäre aber nicht ganz auf die richtige Lösung gekommen.
So, heute Abend wird weiter html/css geübt.