Navileiste aktiven button mit anderem hintergrund

neulandhb

wie kann ich sowas realisieren?
Navileiste und Subnavi geht schon. aber ich weiss nicht, wie es in der Navi ein Bild laden kann oder wie sollte man so etwas machen?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

:arrow: http://forum.wordpress-deutschland.org/konfiguration/…ver-effekt.html

neulandhb

danke schön. das klappt soweit.

Code

.navigation_item a:hover, .current_page_item a, .current_page_parent a {
background: #fff  url(images/buttonre.png);
color: #3a3f81;
}

was jetzt noch nicht klapp. ich kann kein bild laden und richtig positionieren und die Schriftfarbe ändert sich nicht bei aktiven link.

marX

Dann gibts wohl spezifischere CSS-Regeln. URL zu deinem Blog?

neulandhb

>>>><<<<
danke

marX

HTTP-Auth. ;-)

neulandhb

geht jetzt ohne.
danke

marX

Dein Wrapper-Element hat die ID "navigation", nicht die Klasse "navigation". Das dürfte schon das ganze Problem sein.

IDs formatieren: SELFHTML: Stylesheets / CSS-Formate definieren / Zentrale Formate definieren
Klassen formatieren: SELFHTML: Stylesheets / CSS-Formate definieren / Zentrale Formate definieren

neulandhb

verstehe es nicht. bin ja noch am anfang:(
weiss nett, wie man das umsetzen soll. sorry.

marX

Ist doch alles schön erklärt in dem Artikel. ;-)

Code

[COLOR="#ff0000"]#navigation[/COLOR] .navigation_item a:hover,
[COLOR="#ff0000"]#navigation [/COLOR].current_page_item a,
[COLOR="#ff0000"]#navigation [/COLOR].current_page_parent a {
background: #fff  url(images/buttonre.png);
color: #3a3f81;
}

neulandhb

ok, versuche zu begreifen.
geht aber trotzdem noch nicht. hintergrund ist nicht weiss, aktive schrift nicht dunkel und das bild wird nicht richtig dargestellt.

marX

Du musst da mal noch ein wenig rumprobieren. Bearbeite mal das li-Element des aktiven Links, nicht den Link direkt. Vor allem was den Hintergrund angeht. Ich denke dann kommst du schon 2 Schritte voran. ;-)

Code

[COLOR="Blue"]#navigation .navigation_item [del]a:hover[/del],[/COLOR]
#navigation .current_page_item [del]a[/del],
#navigation .current_page_parent [del]a[/del] {
background: #fff  url(images/buttonre.png);
}

PS: Die 1. Zeile des Regelkopfes ist unnötig, du hast gar keine passende klasse in deinem Code soweit ich das sehe.

neulandhb

Code

#navigation {
  height: 20px;
  float:left;
  width:100%;
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: none;
  line-height:normal;
}
  
#navigation ul {
  margin:0;
  padding:0;
  list-style:none;
}
  
#navigation li {
  float:left;
  margin:0;
  padding:0;
}
  
#navigation a {
  display:block;
  no-repeat left top;
  padding:5px 15px;
}


#navigation .current_page_item {
  float:left;
  background:url(images/navbuttonre.png)
  no-repeat right top;
  margin:0;
  padding:0;
}
  
  #navigation .current_page_item a {
  display:block;
  background:url(images/navbuttonli.png)
    no-repeat left top;
  padding:5px 15px;

Alles anzeigen

so habe ich das erstmal geschafft.

ich bekomme es aber nicht hin, dass das bild in der navi bei der subheadline auch noch sichtbar ist. mit

Code

#navigation .current_page_parent a

geht es nicht.
und zweitens bekomme ich die naviüberschriften nicht vertikal zentriert.

wär klasse, wenn ihr mal schauen könnt:neutral:
>>>>><<<<<

marX

So sollte es auch angezeigt werden wenn du auf einer untergeordneten Seite bist:

Code

#navigation .current_page_item[COLOR="Magenta"], #navigation .current_page_[B]parent[/B][/COLOR] {
  float:left;
  background:url(images/navbuttonre.png)
  no-repeat right top;
  margin:0;
  padding:0;
}
  
  #navigation .current_page_item a[COLOR="#ff00ff"], #navigation .current_page_[B]parent[/B] a[/COLOR] {
  display:block;
  background:url(images/navbuttonli.png)
    no-repeat left top;
  padding:[COLOR="Green"][B]3px[/B][/COLOR] 15px;

Alles anzeigen

Mit diesen Änderungen solltest du alles abdecken können was noch fehlt. :-)

neulandhb

vielen, vielen dank:mrgreen:
endlich. es klappt jetzt.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Navileiste aktiven button mit anderem hintergrund

Jetzt mitmachen!