Formatierungsproblem Navigation

Hier können allgemeine Fragen zu HTML und CSS gestellt und diskutiert werden.
Antworten
rklapdor
ConPresso-User
Beiträge: 34
Registriert: 31.08.2005 16:46
Wohnort: Uedem (Kreis Kleve)
Danksagung erhalten: 1 Mal

Formatierungsproblem Navigation

Beitrag von rklapdor »

Ich habe ein Problem mit der Formatierung der automatischen Navigation. Die Änderung der Schriftfarbe der aktiven Rubrik funktioniert zwar im Firefox, nicht jedoch im Internet Explorer (getestet mit den Versionen 7 und 6). Hat jemand eine Idee, woran dies liegen kann?

Nachfolgend die Formatierungen im css:

#menu{line-height:1.8em;font-weight:bold;}
#menu ul{text-align:left;margin:0;padding:10px;}
#menu li{border-bottom:1px solid #B0C4D8;width:130px;list-style-type:none;padding:2px 0;}
#menu a:link{text-decoration:none;color:#fff;font-size:10pt;}
#menu a:visited{text-decoration:none;color:#fff;font-size:10pt;}

#menu a:hover{color:#fbd618;}
#menu li.active a{color:#fbd618;}

und der generierte Quelltext:

<div id="rahmen">
<div id="seite">
<div class="links">
<div id="menu">
<ul><li><a href="http://www.fdp-online.info/portal/Rheur ... /li><li><a href="http://www.fdp-online.info/portal/Rheur ... a></li><li class="active"><a href="http://www.fdp-online.info/portal/Rheur ... /li><li><a href="http://www.fdp-online.info/portal/Rheur ... ></li></ul> </div></div>

Herzlichen Dank für Eure Hinweise und schon einmal einen guten Rutsch!

Ralf
Benutzeravatar
Matthias V
Modul-Entwickler
Beiträge: 1251
Registriert: 01.01.1970 01:00
Wohnort: Sondershausen
Hat sich bedankt: 54 Mal
Danksagung erhalten: 147 Mal
Kontaktdaten:

Beitrag von Matthias V »

Versuche es doch zusätzlich mal mit li:active:

#menu li:active a, #menu li.active a{color:#fbd618;}
mod_Guestbook 4.1.0

Features:
- Einträge als ConPresso-Artikel
- benutzt Templates, Rubriken, ...
- Captcha
- BB-Code + Smilies + Zitieren
- Badwords
- Anonymisierung
rklapdor
ConPresso-User
Beiträge: 34
Registriert: 31.08.2005 16:46
Wohnort: Uedem (Kreis Kleve)
Danksagung erhalten: 1 Mal

Beitrag von rklapdor »

Danke für die schnelle Antwort,

ich kann jedoch leider keine Veränderung feststellen. Gibt es noch weitere Möglichkeiten?
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 933 Mal
Kontaktdaten:

Beitrag von MarkusR »

Du solltest in den zusätzlichen Pseudoklassen (die Du im Grunde gar nicht brauchst) die Farbangaben weglassen:

#menu a:link{text-decoration:none;color:#fff;font-size:10pt;}
#menu a:visited{text-decoration:none;color:#fff;font-size:10pt;}
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
rklapdor
ConPresso-User
Beiträge: 34
Registriert: 31.08.2005 16:46
Wohnort: Uedem (Kreis Kleve)
Danksagung erhalten: 1 Mal

Beitrag von rklapdor »

Frage mich bitte nicht warum, aber der Firefo benötigt offenbar die Farbangabe. Beim IE konnte ich keine Veränderung feststellen.
rklapdor
ConPresso-User
Beiträge: 34
Registriert: 31.08.2005 16:46
Wohnort: Uedem (Kreis Kleve)
Danksagung erhalten: 1 Mal

Ein Schritt weiter: böses Wort gefunden

Beitrag von rklapdor »

Einen Schritt bin ich nun weiter, im IE 7 funktioniert es nun richtig. Im Doctype stand statt: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> ein transitional nach dem 4.01. Nachdem ich dies entfernt habe, funktioniert es im IE 7 wie gewünscht. der alte 6er bleibt allerdings unbeeindruckt. Gibt es da evtl. noch einen Tip?
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 933 Mal
Kontaktdaten:

Beitrag von MarkusR »

Die benötigt er solange Du keine globale Farbangabe machst (also nur #menu a).

Hast Du die CSS-Datei denn auch neu geladen? Strg+F5?
Ich hatte es mit einer Kopie getestet...
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 933 Mal
Kontaktdaten:

Beitrag von MarkusR »

Ich habe mal
http://www.fdp-online.info/portal/Rheurdt
auf einem anderen Rechner aufgerufen (der das CSS noch nicht im Cache hat) und sehe deutlich die aktiven Punkte

Das gilt für IE7 und FF2
Dateianhänge
fdp-reudt.jpg
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
rklapdor
ConPresso-User
Beiträge: 34
Registriert: 31.08.2005 16:46
Wohnort: Uedem (Kreis Kleve)
Danksagung erhalten: 1 Mal

Beitrag von rklapdor »

Danke Markus,

da haben sich offenbar unsere Bemühungen überschnitten. Im IE 7 funktioniert es inzwischen einwandfrei (soweit für mich erkennbar aufgrund des korrigierten doctype) lediglich im IE 6 fehlt die Kennzeichnung, was jedoch verzichtbar erscheint, falls Du nicht noch einen gezielten Tip hättest.

Auf jedenfall herzlichen Dank!

Ralf
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 933 Mal
Kontaktdaten:

Beitrag von MarkusR »

Du mußt erst mal Dein CSS in Ordnung bringen!

Code: Alles auswählen

#menu a: {text-decoration:none;color:#fff; font-size:10pt;}
#menu a.link{text-decoration:none;color:#fff;font-size:10pt;}
#menu a:visited{text-decoration:none; color:#fff; font-size:10pt;}

#menu a:hover{color:#fbd618;}
#menu li:active a, #menu li.active a {color:#fbd618;}
sollte eher so aussehen

Code: Alles auswählen

#menu a {text-decoration:none;color:#fff; font-size:10pt;}
#menu a:hover, #menu li.active a {color:#fbd618;}
(auf deutsch: Links im Menü sind nicht unterstrichen, weiß und Schriftgröße 10, nur beim Hovern oder wenn der Listeneintrag die Klasse active hat ist die Farbe gelb)

noch als Info
#menu a: ist keine existierende Pseudoklasse
#menu a.link kommt in Deinem Menü nicht vor
#menu li:active a existiert auch nicht, da li's keine Pseudoklasse active haben können
(immer schön auf die Verwendung von Punkt ODER Doppelpunkt achten...)
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
rklapdor
ConPresso-User
Beiträge: 34
Registriert: 31.08.2005 16:46
Wohnort: Uedem (Kreis Kleve)
Danksagung erhalten: 1 Mal

Jetzt funktioniert es

Beitrag von rklapdor »

Danke,

habe wie geschrieben den Wildwuchs (da hatte ich es wohl zu gut gemeint)beseitigt und nun klappt es tatsächlich auch im IE 6!

Inhaltlich sind mir zwar noch nicht alle Unterschiede so ganz klar, aber vielleicht kommt das ja noch in den nächsten Jahren.......

Ralf
Benutzeravatar
baluo
ConPresso-Experte
Beiträge: 607
Registriert: 14.11.2005 12:17
Hat sich bedankt: 216 Mal
Danksagung erhalten: 11 Mal

Beitrag von baluo »

Ich schlage mich mit einem aehnlichen Problem herum:

Wie kann ich in der Navigation *nur* den derzeit "aktiven" link per css kennzeichnen, auch wenn er sich in einer Unter- oder Unter-Unter-Ebene befindet ?

Beispiel: http://cpo.neulandhalle.de/de/index.php?rubric=test

Der von cpo generierte Quelltext weisst den li-Elementen auf allen drei Ebenen die classe=active zu. Ich braeuchte sie aber nur fuer die jeweils aktive Rubrik:

Code: Alles auswählen

<div id="navigation">
<ul>
...
<li><a href="../de/index.php?rubric=aktuelles">Aktuelles</a></li>
<li class="active"><a href="../mod_contact/index.php?rubric=schreiben">Schreiben Sie uns!</a>
      <ul>
      <li class="active"><a href="../de/index.php?rubric=meinung">Ihre Meinung</a>
             <ul>
             <li class="active"><a href="../de/index.php?rubric=test">test</a></li>
             </ul>
      </li>
      </ul>
</li>
<li><a href="../de/index.php?rubric=weg">Ihr Weg zu uns</a></li>
...
</ul>
</div>
Die bisherige css:

Code: Alles auswählen

/* beginn navigation */

#navigation ul 
{
	margin:25px 5px 0 5px; padding:0;
	list-style: none;
 }

#navigation ul ul,
#navigation ul ul ul
{
	margin:0 2px 0 2px; padding:0;
	list-style: none;
 }

 
#navigation ul a,
#navigation ul ul a,
#navigation ul ul ul a
 {
 display: block;
 margin:0 0 4px 0; padding: 0 2px 0 0;
 text-decoration: none; 
list-style: none;
 border:1px solid #cccfe4; 
 font-family:Arial, Helvetica, sans-serif;
 font-weight:normal;
 font-size:0.9em;
 color:#fefefe; background-color:inherit;
 text-align:right;
 }

 
/* aktiver Link */
#navigation li.active a
{ color: white; background-color:#cccfe4; }


/* hover Link */
#navigation ul li a:hover,
#navigation ul li ul li a:hover, 
#navigation ul li ul li ul li a:hover
{  color: white; background-color:#cccfe4; }	

/* ende navigation */
danke, Gerhard
Benutzeravatar
Mr. Magpie
ConPresso-Profi
Beiträge: 1004
Registriert: 01.01.1970 01:00
Wohnort: Wuppertal
Hat sich bedankt: 274 Mal
Danksagung erhalten: 59 Mal

Beitrag von Mr. Magpie »

Das fand ich auch schon immer störend und greife in solchen Fällen auf Markus' mod_menu zurück.
Das Problem ist ja, dass du das Element ul li.active abhängig davon formatieren müsstest, ob noch ein Element ul nachfolgt.
Günther Ludwig
Antworten