Hallo zusammen!
Ich bin daran meine private Homepage zu verbessern. Im Zusammenhang mit dem Design der Vaigationsleiste will ich, dass die jeweils aktive Seite nicht mehr anklickbar (bzw. jedenfalls nicht mehr ladbar) ist. Dazu habe ich zuerst den Link in der Navigationsleiste für die aktive Seite mit
aufrufen lassen, was das Ziel zu einem Teil erreicht hat. Das Problem ist, dass dadurch die aktive Seite in Wirklichkeit dennoch auf Klick hin geladen wird oder wohl korrekter, dass jedenfalls versucht wird "irgendetwas" (das dann nicht vorhanden ist) zu laden. Zudem habe ich mir in einem anderen Fred sagen lassen, es gelte als wenig chic "leere" Links dieser Art zu setzen.
Mir wurde empfohlen das Ganze mit <span> zu machen. Das klappt an sich auch, und tatsächlich ist so die aktive Seite wirklich nicht mehr auf Klick hin ladbar. Komischerweise taucht nun aber ein Whitespace -Problem in der Leiste auf, und zwar ist es so, dass oben und unten im Bereich der Leiste (des <li> oder des <ul>) ein weisser Rand erscheint. Es scheint so zu sein, dass nun die gewünschte Hintergrundfarbe für den Button auf der aktiven Seite (die verschieden ist von der Farbe der ganzen Leiste) nicht mehr wie gewünscht aufs ganze <li> bezogen wird, sondern nur noch aufs <span>. Irgendwie reagiert das Design auf <span> anders als auf <a>, kurz gesagt.
Nun zu den nötigen Angaben und Codes:
1) Die optisch gewünschte, aber technisch unerwünschte Lösung gibts unter Michael Ritter (also die Variante mit <a> ).
2) Die technisch gewünschte, aber optisch fehlerhafte Lösung gibts unter Michael Ritter (also die Variante mit <span>.
HTML-Code von 1) soweit relevant:
HTML-Code von 2) soweit relevant:
CSS-Code von 1):
CSS-Code von 2)
Ergänzend noch folgende Info: Ich habe die Frage unter der aktuellsten Firefox-Version und der aktuellesten IE-Version getestet, das Problem besteht bei beiden Browsern identlisch. Es liegt somit praktisch sicher keine browserspezifische Problematik vor.
Ich nehme an, dass ich ganz einfach etwas falsch gemacht habe (irgendwie vermute ich, dass <span> und <a> sich nicht gleich verhalten, aber weshalb nicht und wie löst man das?).
Ich bin HTML- und CSS-Anfänger und für die Hilfe dankbar!
Lg Xeno
Ich bin daran meine private Homepage zu verbessern. Im Zusammenhang mit dem Design der Vaigationsleiste will ich, dass die jeweils aktive Seite nicht mehr anklickbar (bzw. jedenfalls nicht mehr ladbar) ist. Dazu habe ich zuerst den Link in der Navigationsleiste für die aktive Seite mit
HTML:
<a href=""blabla</a>aufrufen lassen, was das Ziel zu einem Teil erreicht hat. Das Problem ist, dass dadurch die aktive Seite in Wirklichkeit dennoch auf Klick hin geladen wird oder wohl korrekter, dass jedenfalls versucht wird "irgendetwas" (das dann nicht vorhanden ist) zu laden. Zudem habe ich mir in einem anderen Fred sagen lassen, es gelte als wenig chic "leere" Links dieser Art zu setzen.
Mir wurde empfohlen das Ganze mit <span> zu machen. Das klappt an sich auch, und tatsächlich ist so die aktive Seite wirklich nicht mehr auf Klick hin ladbar. Komischerweise taucht nun aber ein Whitespace -Problem in der Leiste auf, und zwar ist es so, dass oben und unten im Bereich der Leiste (des <li> oder des <ul>) ein weisser Rand erscheint. Es scheint so zu sein, dass nun die gewünschte Hintergrundfarbe für den Button auf der aktiven Seite (die verschieden ist von der Farbe der ganzen Leiste) nicht mehr wie gewünscht aufs ganze <li> bezogen wird, sondern nur noch aufs <span>. Irgendwie reagiert das Design auf <span> anders als auf <a>, kurz gesagt.
Nun zu den nötigen Angaben und Codes:
1) Die optisch gewünschte, aber technisch unerwünschte Lösung gibts unter Michael Ritter (also die Variante mit <a> ).
2) Die technisch gewünschte, aber optisch fehlerhafte Lösung gibts unter Michael Ritter (also die Variante mit <span>.
HTML-Code von 1) soweit relevant:
HTML:
<body>
<ul id="navigationsleiste">
<li id="aktiv">
<a href="">Hauptseite</a>
</li>
<li>
<a href="http://www.michaelritter.ch/kontakt.htm">Kontakt</a>
</li>
<li>
<a href="http://www.michaelritter.ch/changelog.htm">Changelog</a>
</li>
<li>
<a href="http://www.michaelritter.ch/impressum.htm">Impressum</a>
</li>
</ul>
...
</body>HTML-Code von 2) soweit relevant:
HTML:
<body>
<ul id="navigationsleiste">
<li id="aktiv">
<span>Hauptseite</span>
</li>
<li>
<a href="http://www.michaelritter.ch/kontakt.htm">Kontakt</a>
</li>
<li>
<a href="http://www.michaelritter.ch/changelog.htm">Changelog</a>
</li>
<li>
<a href="http://www.michaelritter.ch/impressum.htm">Impressum</a>
</li>
</ul>
...
</body>CSS-Code von 1):
Code:
* { margin:0; padding:0; }
p, ul { margin:0px 0 20px 20px; }
h1, h2 { margin:0px 0 5px 20px; }
body { background-color:#B4DC00; font-family:Verdana, sans-serif; }
a { text-decoration:none; }
a:link { color:#2F54FF; }
a:visited { color:#FF4B4B; }
a:hover { color:#FEFF49; }
#navigationsleiste { overflow:auto; width:100%; height:30px; background-color:#FFFFFF; }
#navigationsleiste li { float:left; list-style-type:none; padding:5px 0 5px 0; }
#navigationsleiste a { padding:10px; }
#navigationsleiste a:link { background-color:#FFFFFF; }
#navigationsleiste a:hover { color:#FF40CF; }
#navigationsleiste #aktiv a { background-color:#D2A5FF }CSS-Code von 2)
Code:
* { margin:0; padding:0; }
p, ul { margin:0px 0 20px 20px; }
h1, h2 { margin:0px 0 5px 20px; }
body { background-color:#B4DC00; font-family:Verdana, sans-serif; }
a { text-decoration:none; }
a:link { color:#2F54FF; }
a:visited { color:#FF4B4B; }
a:hover { color:#FEFF49; }
span { color:#2F54FF; }
#navigationsleiste { overflow:auto; width:100%; height:30px; background-color:#FFFFFF; }
#navigationsleiste li { float:left; list-style-type:none; padding:5px 0 5px 0; }
#navigationsleiste a { padding:10px; }
#navigationsleiste a:link { background-color:#FFFFFF; }
#navigationsleiste a:hover { color:#FF40CF; }
#navigationsleiste #aktiv span { background-color:#D2A5FF }Ergänzend noch folgende Info: Ich habe die Frage unter der aktuellsten Firefox-Version und der aktuellesten IE-Version getestet, das Problem besteht bei beiden Browsern identlisch. Es liegt somit praktisch sicher keine browserspezifische Problematik vor.
Ich nehme an, dass ich ganz einfach etwas falsch gemacht habe (irgendwie vermute ich, dass <span> und <a> sich nicht gleich verhalten, aber weshalb nicht und wie löst man das?).
Ich bin HTML- und CSS-Anfänger und für die Hilfe dankbar!
Lg Xeno
