Current_page_item in suckerfish/droplinetabs Navigation

Hallo Forum,

auf Jochenvoss.com seht ihr ein Wordpress 2.8.5 mit horizontaler Navigation auf zwei Ebenen durch Drop Line Tabs http://www.dynamicdrive.com/style/csslibra…drop_line_tabs/

Zwei Probleme bekomme ich nicht gelöst. Habe Beiträge in englischen Foren gefunden, die das behandeln, aber ich bekomme die Änderungen einfach nicht auf mein Menu transferiert, da sich entweder nichts tut oder ich mir regelmäßig die gesamte Navi zerstöre.

So wie es jetzt ist, funktionieren die a:hover ganz gut. Es fehlt aber die current_page Anzeige, dazu soll die jeweils aktuelle Seite im Menu einen roten background und weiße Schrift bekommen (Level1) bzw. einen roten list-style-type: square (Level2). Ist eine Unterseite ausgewählt, darf ihre Mutterseite auch rot bleiben. Umgekehrt sollen aber nicht alle Unterseiten rot werden, wenn man auf der Mutterseite ist. Desweiteren kriege ich die untere Subnavi nicht zentriert. Habe jetzt geschlagene 10h ohne Ergebnis gecodet und gesucht, aber mir scheint, ich verstehe einfach die Systematik nicht ganz.

CSS bisher:

style.css

#navBar {
	margin:0px 0 0px 0;
	padding:0;
	height: 40px;
	clear:both;
	border-bottom: 2px solid #c5091d;
	background-color:#FFF;
	}


#navBar ul {


}
	
#navBar ul li {


	background-color:#F00;
}
	
#navBar ul li a {
	color:#666;
	text-decoration:none;
	font-size:1.5em;
	font-family:Verdana, Geneva, sans-serif;
	margin: 10px 20px 10px 20px;
}


#navBar ul li.current_page_item a {
	color:#666;
	list-style-type:square;}


#navBar ul li a:hover {
	color:#ffffff;
	text-decoration:none;
	background-color:#515756;
}


#navBar ul li ul li a {
	color:#666;
	text-decoration:none;
	font-size:1.1em;
	font-family:Verdana, Geneva, sans-serif;
	text-transform:none;
	padding: 3px 6px 3px 6px;
	background-color:#transparent;
	background-image:url(img/square.png);
}


#navCenter {
	width: 775px;
	margin: auto;
	text-align:center;
}

droplinetabs.css

.droplinetabs{
overflow: hidden;
}


.droplinetabs ul{
font: 11px Verdana, sans-serif;
margin: 0;
padding: 0;
width: 100%;
}


.droplinetabs li{
display: inline;
margin: 0 0px 0 0;
padding: 0;
text-transform: uppercase;
}


.droplinetabs li.current_page_item {
background-color:#c5091d;
}


.droplinetabs a{
float: left;
color: white;
margin: 10px 0px 10px 0px;
padding: 0px 30px 4px 30px;
letter-spacing: 1px;
line-height:1.2em;
}


.droplinetabs a:link, .droplinetabs a::visited, .droplinetabs a:active{
color: white;
}


.droplinetabs a span{
float: left;
display: block;
background: transparent;
padding: 7px 9px 3px 6px;
cursor: pointer;
}


.droplinetabs a span{
float: none;
}




.droplinetabs a:hover{
background-color: #515756; /*background color of tabs onMouseover*/
color: white;
}


.droplinetabs a:hover span{
background-color: transparent;
}


/* Sub level menus*/
.droplinetabs ul li ul{
text-transform:none;
position: absolute;
z-index: 100;
padding-top: 16px;
margin: auto;
visibility: hidden;
}


/* Sub level menu links style */
.droplinetabs ul li ul li a.current_page_item {
	background-color:#F00;
	border: 2px solid red;
}

Wäre nett, wenn sich jemand die Seite mal (mitm Firebug) ansieht und mir vielleicht Tipps gibt.

http://www.jochenvoss.com steht da oben auch :)

Cool, Danke für die schnelle Antwort. Ich werds ausprobieren.

Beides in eine CSS zu schreiben, habe ich versucht. Da bin ich ebenfalls an meine Grenzen gestoßen, da die beiden Teile nicht wirklich kompatibel waren, zumindest hab ich sie nicht kompatibel hingekriegt.

Werde sehen, was das gibt, aber Danke erstmal. :)

Habe schon einiges in den Griff gekriegt. Der Code ist deutlich kürzer und liegt jetzt komplett in der droplinetabs.css. Wie gewünscht bleiben vor allem jetzt die Subpages im Untermenu transparent, wenn ein parentmenu angewählt ist.

1) So wie jetzt dürfte es bleiben, mit dem Unterschied, dass in der unteren Navi nicht der Hintergrund geändert werden soll, sondern der list-style in "square", also kleine rote Vierecke neben den li's. Bin die gesamte CSS (style.css, reset.css, droplinecats.css) durchgegangen, habe alle list-style: none rausgenommen, aber ich kriege sie dort nicht angezeigt. Woran könnte das liegen? Am padding von ul/li? Ändere auch da schon, hab die Bullets noch nicht zu Gesicht bekommen.

2) Das untere Menu bekomme ich immer noch nicht zentriert. Wenn man auf Dr. JochenVoss klickt, stehen die Punkte trotzdem ganz links am Rand. Hängt wahrscheinlich mit position: absolute zusammen?

Vielleicht hat noch jemand wertvolle Tipps parat.

Zitat von hero-master

Arbeite da lieber mit Hintergrundbildern, als mit List-Style. Der Listenpunkt nimmt die Schriftfarbe an, du kannst ihn also fabrlich von der Menupunktfarbe nicht abheben.

´
Habe ich ebenfalls probiert und hat nicht funktioniert. Aber wo du es sagst, das gehe ich nochmal durch, hat sich noch einiges getan.

Zitat von hero-master

Jap, musst du mit "left" bzw. "right" korrigieren

Das hatte ich bereits mit padding-left im Sub-ul gemacht. geht zwar, ist aber auch statisch. Die Menus haben ja verschieden viele Punkte. Hatte hauptsächlich mit margin: auto oder text-align: center bei ul probiert.

Zitat von hero-master

wenn du absolut positionierte Objekte zentriert haben willst, kommst du mit text-align und margin: auto nicht weit.
Versuche es mal so:

Code

#zentriertes-objekt {
width: 400px;
left: 50%;
margin-left: -200px /* Negative Hälfte der Breite */

Den Trick kenn ich von MySpace, der Benutzerunfreundlichsten Seite wo gibt. Aber das isn anderes Thema. Hatte ich gar nicht dran gedacht, funktioniert so pauschal aber auch nicht, da sich das ganze nur nach links verschiebt, nicht jedoch prozentual nach rechts. Muss ich wohl noch die übergeordnete width definieren schätze ich.

Den Rest hab ich jetzt hingekriegt. Ziemlich viel gewurste, aber läuft. Ist wohl wie immer, da muss man einfach ein paar mal lange dran rumprobieren bis man es versteht. Danke für die Hilfe schonmal, für heute muss ich Feierabend machen. Wünsch ich auch dem Rest...

moemoney