Zum Inhalt springen

dunkelblaue und weisse Pfoten

Erstellt am 21. Januar 2008 · 4 Antworten · letzte Antwort am 24. Januar 2008

Tags: HTML & CSS, Frage

redcurrant ·

Hallo zusammen

Ich habe gleich zwei Navigationsprobleme.
Zu sehen auf http://www.fontanas-dogworld.ch/cms

Für die horizontale Navigation sollte die aktive Seite nicht anklickbar, dafür aber dunkelblau und mit dunkelblauer Pfote sein.
Zu lösen versuchte ich das Problem über die Angabe eines speziellen CSS-Eintrags.
###########################################
#DAs Texmenue oben erstellen
###########################################
MENU_OBEN = HMENU
MENU_OBEN {
special = directory
special.value = 3
1 = TMENU
1 {

NO = 1

CUR < .NO
CUR.doNotLinkIt = 1
#CUR.wrapItemAndSub = class="current_O"

ACT < .NO
ACT.doNotLinkIt = 1

ACT.linkWrap = <a class="current_O">&nbsp;&nbsp; |</a>

}
}

-----------------------------------------------
Das zugehörige CSS
.current_O {
padding: 2px 4px 2px 22px;
color: #003399;
font-weight: bold;
text-align: left;
line-height: normal;
background-image: url(img/blaue_p.jpg);
background-position: 10px;
background-repeat: no-repeat;
}
------------------------------------------------

Das will aber einfach nicht....
in allen Varianten

da wäre ich um jeden Tipp dankbar

Problen Nummer zwei folg sogleich:
Das vertikale Menu ist soweit ganz ordentlich, wie vorgegeben nur habe ich da ein Strichploblem--->
öffnet man zum Beispiel die Veranstaltungen, so geratn die Striche ins Durcheinander. Am liebsten wären mir keine Striche im Untermenu und wenn, dann gleich nach allen.

Gelöst habe ich es folgendermassen:
#########################################
#Das Listen Menue links(menuelinks) erstellen
#######################################
MENU_LINKS = HMENU
MENU_LINKS {
special = directory
special.value = 2
entryLevel = 1
1 = TMENU
1 {
noBlur = 1
wrap = <ul>|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
wrapItemAndSub = <li>|</li>
}
CUR < .NO
CUR.doNotLinkIt = 1
CUR.wrapItemAndSub = <li class="current">|</li>

}
2 < .1
3 < .1
}

-------------------------------
Das CSS
#submenu {
float: left;
width: 191px;


}

#submenu ul{
margin: 0;
padding: 0;
list-style: none;

}

#submenu li{
margin: 0 0 2px 0;
}
*html #submenu li{
margin: 0;
border-bottom: 1px solid #ffcc66;
}
*html #submenu ul{
margin: 10 0 0px 0;
border-bottom: 1px solid #ffcc66;
}
*html #submenu ul ul{
margin: 0 0 -2px 0;
/*border-bottom: 1px solid #ffcc66;*/
}

#submenu ul a,
#submenu ul a:link,
#submenu ul a:visited {
display: block;
padding: 2px 2px 2px 22px;
color: #333399;
background-color: #9999cc;
text-decoration: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
line-height: 17px;
background-image: url(img/bild_p.gif);
background-position: 10px;
background-repeat: no-repeat;
}
#submenu ul .current {
display: block;
padding: 2px 2px 2px 22px;
color: #333333;
background-color: #9999cc;
text-decoration: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
line-height: 17px;
background-image: url(img/bild_a.gif);
background-position: 10px;
background-repeat: no-repeat;

}

#submenu ul a:hover,
/*#submenu ul .current, */
#submenu ul li.parent a,
#submenu ul li.parent a:link,
#submenu ul li.parent a:visited {
color: #333399;
text-decoration: underline;
background-color: #9999cc;
background-image: url(img/bild_o.gif);
background-position: 10px;
background-repeat: no-repeat;
}


#submenu ul ul a,
#submenu ul ul a:link,
#submenu ul ul a:visited,
#submenu ul li.parent ul a,
#submenu ul li.parent ul a:link,
#submenu ul li.parent ul a:visited {
display: block;
padding: 5px 5px 4px 22px;
color: #333333;
background-color: #9999cc;
text-decoration: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
line-height: 17px;
background-image: url(img/bild_p.gif);
background-position: 10px;
background-repeat: no-repeat;
}
#submenu ul li.parent ul .current {
display: block;
padding: 5px 5px 4px 22px;
color: #333333;
background-color: #9999cc;
text-decoration: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
line-height: 17px;
background-image: url(img/bild_a.gif);
background-position: 10px;
background-repeat: no-repeat;
}
}
#submenu ul ul a:hover,
#submenu ul li.parent ul a:hover {
font-weight: normal;
color: #333399;
text-decoration: underline;
padding-left: 22px;
background-image: url(img/bild_o.gif);
background-position: 10px;
background-repeat: no-repeat;
}

#submenu ul li .current ul a:hover,
#submenu ul li.parent ul .current{
font-weight: normal;
color: #333399;
text-decoration: underline;
padding-left: 22px;
background-image: url(img/bild_a.gif);
background-position: 10px;
background-repeat: no-repeat;
}

Wo habe ich da bloss zuviele Striche gesetzt?

Herzlichen Dank für eure Mühe[/url]

Unbekannter Benutzer ·

Also zu Problem eins:

ACT.linkWrap = <a class="current_O"> |</a>

Diese Zeile ist in mehrfacher Hinsicht nicht sinnvoll, zum einen soll der Punkt ja nicht verlinkt sein, dann wrappst du aber einen a-Tag drumherum, und zum anderen gibt es natürlich keinen linkWrap, wenn der Link abgeschaltet ist.
Mein Vorschlag:

ACT.allWrap = <span class="current_O"> |</span>

Bei Problem zwei ist mir noch nicht klar, was mit Striche gemeint ist?

Unbekannter Benutzer ·

Sorry hat etwas gedauert mit den Strichen, die sieht man nämlich nur im Internet Explorer, daher habe ich die nicht bemerkt...

Hier definierst du die border:

*html #submenu li{
margin: 0;
border-bottom: 1px solid #ffcc66;
}
*html #submenu ul{
margin: 10 0 0px 0;
border-bottom: 1px solid #ffcc66;
}
*html #submenu ul ul{
margin: 0 0 -2px 0;
/*border-bottom: 1px solid #ffcc66;*/
}

Nimmm das da überall mal raus und probier folgendes:

#submenu li{
border-bottom: 1px solid #ffcc66;
}

#submenu li li{
border-bottom: 0px none;
}
redcurrant ·

Hallo Kitsunet

vielen Dank für deine Idee. Leider bin ich noch nicht weiter mit den Strichen.
Aber die Sache mit dem Firefox beschäftigt mich schon.
Ich dachte mit dem Verweis im Typoscript gelöst:

config.doctype {
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
}

Das scheint dem Firefox aber noch zu wenig. Oder ist das falsch?