Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 21.02.2008 13:26
Titel
|
|
|
Dann wird Dir nichts anderes übrigbleiben, als jedem li eine ID zu geben und dadurch jeweils eine individuelle Breite zuzuweisen. Und da Deine Seite eh eine feste px-Breite hat, würde ich die Breite von li nicht in % angeben, sondern in em (damit die li bei Textvergr. "mitwachsen").
Außerdem würde ich das seitliche padding von a rauswerfen, und nicht text-align: right; einsetzen, sondern center.
|
|
|
|
|
Xaven
Threadersteller
Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht:
|
Verfasst Do 21.02.2008 13:51
Titel
|
|
|
heiko_rs hat geschrieben: | Dann wird Dir nichts anderes übrigbleiben, als jedem li eine ID zu geben und dadurch jeweils eine individuelle Breite zuzuweisen. Und da Deine Seite eh eine feste px-Breite hat, würde ich die Breite von li nicht in % angeben, sondern in em (damit die li bei Textvergr. "mitwachsen").
Außerdem würde ich das seitliche padding von a rauswerfen, und nicht text-align: right; einsetzen, sondern center. |
Been there done that.
Sieht jetzt gut aus und funktioniert. Ich hoffe ich habe keine Fehler eingebaut. Man muss immer auf sovieles achten .
Die Lösung
CSS
Code: |
#navigationsleiste li {
width: 6.0em;
border:0;
list-style: none;
float: right;
}
#navigationsleiste li.klein {
width: 7em;
}
#navigationsleiste li.gross {
width: 9em;
}
#navigationsleiste a {
font-size: 1.05em;
font-family: "Trebuchet MS", Times, Verdana, Arial, Helvetica, sans-serif;
padding: 6px 0;
color: #000000;
text-align:center;
text-transform:uppercase;
text-decoration: none;
display: block;
}
#navigationsleiste a:hover, a.active {
font-weight: bold;
}
|
HTML
Code: | <div id="navigation">
<ul id="navigationsleiste">
<li class="klein"><a href="http://www.marioandreya.de/der-fotograf">Über</a></li>
<li class="klein"><a href="http://www.marioandreya.de/category/technik">Technik</a></li>
<li class="gross"><a href="http://www.marioandreya.de/category/architektur">Architektur</a></li>
<li class="gross"><a href="http://www.marioandreya.de/category/reportage">Reportage</a></li>
<li class="klein"><a href="http://www.marioandreya.de/category/musik">Musik</a></li>
<li class="klein"><a href="http://www.marioandreya.de/category/people">People</a></li>
<li class="klein"><a class="active" href="http://www.marioandreya.de">Neueste</a></li>
</ul>
</div>
|
|
|
|
|
|
Anzeige
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 21.02.2008 14:22
Titel
|
|
|
Sieht gut aus! Sofern es Dich nicht stört, dass sich durch das float: right; die Reihenfolge der Links umkehrt (ausgehend von ihrer Reihenfolge im Markup). Alternative: li links floaten und ul ohne width rechts (für Opera < 8 noch display: table; dazu geben, da er sonst die li - trotz float - untereinander darstellt).
Übrigens brauchst Du hier kein clear-div - auch #content kann clear bekommen.
P.S.: Alle li haben jetzt eine Klasse - ich würde .klein rauswerfen und dessen Breite in der allg. li-Regel deklarieren, dann brauchen nur noch die beiden breiteren Links eine Klasse.
Zuletzt bearbeitet von heiko_rs am Do 21.02.2008 14:26, insgesamt 3-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Problem mit Verschiebung von Menüpunkten bei Hover
Listen-Navigation ruckelt bei bold
Problem mit IE7 und hover-Navigation
Probleme mit CSS Hover Navigation
Navigation mit Hover Elementen in Wordpress
hover-Button/hover-Bild wird darunter eingefügt
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|