Printnavigation und css

Fragen zur Implementierung und/oder Anpassung von ConPresso 4 werden in diesem Forum diskutiert.
Antworten
Marko

Printnavigation und css

Beitrag von Marko »

Hallo zusammen,

ich bin grad dabei ein mit Sicherheit nicht barrierefreies Menü auf css umzustellen. Dazu musste ich die printnavigation.php aufbohren: z.B. habe ich den erzeugten Links eine Klasse auf den Weg gegeben, die dann in css interpretiert wird. (Farbe des Links)

Code: Alles auswählen

// print caption
if (empty($link)) echo htmlspecialchars($v['caption']);
else { echo '<a class="color'.$GLOBALS["Menu_Color"].'" '; // vorher stand da nur: '<a '
echo '>'.htmlspecialchars($v['caption']).'</a>';}
So weit so gut. Ich stehe jetzt nur vor folgendem Problem: Das letzte Element in der zweiten Navigationsebene (hier: "Lage") soll in der printnavigation wie oben gekennzeichnet werden. Sinn der Sache ist, dass es dann per css stylesheet eine Linie verpasst bekommt. (border-bottom: 1px solid #EC5F00;)

Hat jemand eine Idee, wie ich die printnavigation entsprechend ändern könnte?
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Hast Du Dir diese ausführliche Anleitung schon durchgelesen?

-> http://community.conpresso.de/viewtopic.php?t=2560
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
Marko

Beitrag von Marko »

Ja habe ich. Habe nur das Gefühl, dass ich nicht drum herum komme, balus rekursives Meisterwerk anzupassen. Mit css allein geht das nicht - glaube ich. ... und das wegen einer doofen Linie: http://www.virchow-zentrum.uni-wuerzburg[punkt de]/rudolf/index.php?rubric=Rudolf-Virchow-Zentrum
Marko

Beitrag von Marko »

oh: im ersten Posting fehlt die Seite auf die ich mich beziehe: http://www.rudolf-virchow-zentrum.de/rudolf/rudolf.html
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

ok... sehe ich ein.

Klemmt es denn nur an der Linie und der Rest geht schon perfekt oder muss das auch noch gemacht werden.

Beim ersteren könntest Du ja Deinen Code und Style hier posten und die "Testseite" zeigen, damit man sich Gednken drüber machen kann.
CSS bietet ja immerhin die Möglichkeit das letzte Element einer Klasse besonders zu definieren.

In meinem Modul gibt es entsprechende Platzhalter für Levelwechsel und Levelende, die man mit sowas beaufschlagen kann, aber da Du das nicht benutzt sollten wir uns mit deinem Code beschäftigen...
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
Marko

Beitrag von Marko »

Der Rest geht perfekt. Zu bewundern ist das auf der Seite, die ich in meinem zweiten Posting erwähnt habe. (Link muss komplett eingetragen werden, sonst wird man umgeleitet.) Hier mein bisheriges Stylesheet:

Code: Alles auswählen

img {
border: 0px solid white; }

#navlist
{
padding: 0 0px 0px;
margin-left: 0;
background: #eeeeee;
}

#navlist li
{
background: white;
list-style: none;
margin-top: 27px;
margin-bottom: 0px;
text-align: left;
width: 167px;
}

#navlist li a
{
font: 12px Verdana, sans-serif;
display: block;
padding: 0.25em 0.0em 0.25em 5px;
background: #white;
text-decoration: none;
}

#navlist li a.col6A6B75
{
font: 12px Verdana, sans-serif, #6A6B75;
display: block;
padding: 0.25em 0.0em 0.25em 5px;
border-left: 4px solid #6A6B75;
border-top: 1px solid #6A6B75;
border-bottom: 1px solid #6A6B75;
background: #white;
text-decoration: none;
}


#navlist li a.colCC0000
{
font: 12px Verdana, sans-serif;
display: block;
padding: 0.25em 0.0em 0.25em 5px;
border-left: 4px solid #CC0000;
border-top: 1px solid #CC0000;
border-bottom: 1px solid #CC0000;
background: #white;
text-decoration: none;
}

#navlist li a.colEC5f00
{
font: 12px Verdana, sans-serif;
display: block;
padding: 0.25em 0.0em 0.25em 5px;
border-left: 4px solid #EC5F00;
border-top: 1px solid #EC5F00;
border-bottom: 1px solid #EC5F00;
background: #white;
text-decoration: none;
}

#navlist li a.col006633
{
font: 12px Verdana, sans-serif;
display: block;
padding: 0.25em 0.0em 0.25em 5px;
border-left: 4px solid #006633;
border-top: 1px solid #006633;
border-bottom: 1px solid #006633;
background: #white;
text-decoration: none;
}

#navlist li a.col1C2F67
{
font: 12px Verdana, sans-serif;
display: block;
padding: 0.25em 0.0em 0.25em 5px;
border-left: 4px solid #1C2F67;
border-top: 1px solid #1C2F67;
border-bottom: 1px solid #1C2F67;
background: #white;
text-decoration: none;
}

#navlist li li
{
list-style: none;
margin-top: 0px;
border-top: 0px;
margin-left: 0px;
margin-right: 0px;
border-bottom: 0px;
text-align: left;
width: 167px;
}

#navlist li li a
{
font: 11px Verdana, sans-serif;
display: block;
padding: 0.25em 0.0em 0.25em 0.75em;
border-left: 0px solid #cc0000;
border-top: 0px solid #EC5F00;
border-bottom: 0px solid #EC5F00;
background: #white;
text-decoration: none;
}

#navlist li li a.col6A6B75
{
font: 11px Verdana, sans-serif;
display: block;
padding: 0.25em 0.0em 0.25em 0.75em;
border-left: 0px solid #cc0000;
border-top: 0px solid #EC5F00;
border-bottom: 0px solid #EC5F00;
background: #white;
text-decoration: none;
}

#navlist li li a.colCC0000
{
font: 11px Verdana, sans-serif;
display: block;
padding: 0.25em 0.0em 0.25em 0.75em;
border-left: 0px solid #cc0000;
border-top: 0px solid #EC5F00;
border-bottom: 0px solid #EC5F00;
background: #white;
text-decoration: none;
}

#navlist li li a.colEC5f00
{
font: 11px Verdana, sans-serif;
display: block;
padding: 0.25em 0.0em 0.25em 0.75em;
border-left: 0px solid #cc0000;
border-top: 0px solid #EC5F00;
border-bottom: 0px solid #EC5F00;
background: #white;
text-decoration: none;
}

#navlist li li a.col006633
{
font: 11px Verdana, sans-serif;
display: block;
padding: 0.25em 0.0em 0.25em 0.75em;
border-left: 0px solid #cc0000;
border-top: 0px solid #EC5F00;
border-bottom: 0px solid #EC5F00;
background: #white;
text-decoration: none;
}

#navlist li li a.col1C2F67
{
font: 11px Verdana, sans-serif;
display: block;
padding: 0.25em 0.0em 0.25em 0.75em;
border-left: 0px solid #cc0000;
border-top: 0px solid #EC5F00;
border-bottom: 0px solid #EC5F00;
background: #white;
text-decoration: none;
}

#navlist li a:link { color: #000; }
#navlist li a:visited { color: #000; }
#navlist li a:hover
{
color: #555;
}

#navlist li li a:link { color: #448; }
#navlist li li a:visited { color: #667; }
#navlist li li a.colCC0000:link { color: #cc0000; }
#navlist li li a.colCC0000:visited { color: #cc0000; }
#navlist li li a.colEC5f00:link { color: #EC5f00; }
#navlist li li a.colEC5f00:visited { color: #EC5f00; }
#navlist li li a.col6A6B75:link { color: #6A6B75; }
#navlist li li a.col6A6B75:visited { color: #6A6B75; }
#navlist li li a.col006633:link { color: #006633; }
#navlist li li a.col006633:visited { color: #006633; }
#navlist li li a.col1C2F67:link { color: #1C2F67; }
#navlist li li a.col1C2F67:visited { color: #1C2F67; }


Die printnavigation.php aus habe ich nicht großartig verändert. s.o.
Marko

Beitrag von Marko »

Meinst Du die strukturelle Pseudoklasse (toller Begriff:-)) "last-of-type". Die steht angeblich bisher weder im IE noch im firefox zur Verfügung.
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Füge Deinem Style doch mal

Code: Alles auswählen

#navlist ul {
	border-bottom: 1px solid black;
}
#navlist ul ul {
	border-bottom: none;
}
#navlist ul ul ul {
	border-bottom: none;
}
hinzu, wobei ich jetzt mal von maximal 3 Ebenen ausgegangen bin, für jede weitere muß ein ul dazu...
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
Marko

Beitrag von Marko »

Es funktioniert! Und so bekomme ich auch noch meine Farben mit ins Boot:

Code: Alles auswählen

    $ulstart = '<ul id="navlist" ###class="col'.$GLOBALS["Menu_Color"].'"###>';
    $ulend  = '';
    foreach ($navi as $k=>$v) {
        if ($v['level']<$level) $level = 0;            // printed all childs of active parent => clear $level

Code: Alles auswählen

#navlist ul.colCC0000 {border-bottom: 1px solid #CC0000;}
#navlist ul.colEC5f00 {border-bottom: 1px solid #EC5f00;}
#navlist ul.col6A6B75 {border-bottom: 1px solid #6A6B75;}
#navlist ul.col006633 {border-bottom: 1px solid #006633;}
#navlist ul.col1C2F67 {border-bottom: 1px solid #1C2F67;}

#navlist ul ul {
   border-bottom: none;
}
#navlist ul ul ul {
   border-bottom: none;
} 
Vielen Dank und gute Nacht!
Antworten