Autor |
Nachricht |
-

badweb
Wohnort: BaWü
|
12.07.2010 um 19:08 (UTC) Titel: CSS: Aktuelle Seite hervorheben |
|
|
Hi,
da ich mal wieder an etwas arbeite, bin ich mal wieder auf ein Problem oder besser eine Frage, gestoßen.
Wie kann ich die Seite die aktuell betrachtet wird in der Navigation hervorheben?
Beispiel: http://files.nuo-designs.de/design/3/
Nuo arbeitet mit irgendwelchen Subklassen von denen ich allerdings nichts verstehe. Kann mir da jemand aushelfen?
MfG
Sascha ______________ Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
  |
|
↑
|
|
 |
-

aka-design
|
13.07.2010 um 00:20 (UTC) Titel: |
|
|
diese "subklasse" methode kannste aber nicht im hpbk verwirklichen, jedoch ist es möglich, wenn du mit den vorgegebenen "nav" id's arbeitest... der teil wo du suchst wäre dann:
li.checked_menu a{
font-weight: bold;
}
das mit den subklassen wäre nur dann möglich, wenn du die html-seiten einzeln bearbeiten könntest. beim hpbk würde nur der erste menüpunkt auf jeder seite hervorgehoben bleiben...
greez aka ______________ Born to be a N3rd
Zuletzt bearbeitet von aka-design am 13.07.2010, 01:27, insgesamt einmal bearbeitet
|
|
↑
|
|
 |
-

akiralea
|
13.07.2010 um 05:09 (UTC) Titel: |
|
|
Der Code funktioniert. Aber wieso nimmt er die Farbangabe nicht? Daran tüftle ich nämlich schon seit Tagen rum und bekomm es nicht hin.... ______________  |
|
↑
|
|
 |
-

habboreflex
|
13.07.2010 um 09:23 (UTC) Titel: |
|
|
Code: tr.checked_menu {
background-image: url(Hier die URL für das Hintergrundbild);
}
Für einen Hover-Effekt:
Code: tr.checked_menu:hover {
background-image: url(Hier die URL für das Hintergrundbild);
} ______________  |
|
↑
|
|
 |
-

aka-design
|
13.07.2010 um 09:28 (UTC) Titel: |
|
|
Zitat:
Der Code funktioniert. Aber wieso nimmt er die Farbangabe nicht? Daran tüftle ich nämlich schon seit Tagen rum und bekomm es nicht hin....
tr.checked_menu td a{
font-family: comic sans ms, arial;
font-size: 18px;
color: #ffefd5;
text-decoration: none;
}
geht doch oder nicht? ______________ Born to be a N3rd |
|
↑
|
|
 |
-

akiralea
|
13.07.2010 um 10:31 (UTC) Titel: |
|
|
nein, geht leider nicht....
Ich bin auf meiner Testseite am ausprobieren und er nimmt die Farbe einfach nicht, Fettschrift aber schon.
Allerdings müsste es doch "tr.checked_menu a" heißen, ohne td?!
Aber egal, es geht weder mit noch ohne td.
Edit:
Ich habs hinbekommen  ______________ 
Zuletzt bearbeitet von akiralea am 13.07.2010, 21:17, insgesamt einmal bearbeitet
|
|
↑
|
|
 |
-

badweb
Wohnort: BaWü
|
13.07.2010 um 14:00 (UTC) Titel: |
|
|
aka-design hat Folgendes geschrieben: diese "subklasse" methode kannste aber nicht im hpbk verwirklichen, jedoch ist es möglich, wenn du mit den vorgegebenen "nav" id's arbeitest... der teil wo du suchst wäre dann:
li.checked_menu a{
font-weight: bold;
}
das mit den subklassen wäre nur dann möglich, wenn du die html-seiten einzeln bearbeiten könntest. beim hpbk würde nur der erste menüpunkt auf jeder seite hervorgehoben bleiben...
greez aka
Ok ich verwende allerdings in diesem Fall nicht die Standart IDs sondern eine Extra Navigation mit folgendem Aufbau:
Code: #navigation
#navigation a
#navigation li
Und irgendwie versage ich gerade dabei den Code zu übersetzen. ______________ Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
  |
|
↑
|
|
 |
-

aka-design
|
13.07.2010 um 22:23 (UTC) Titel: |
|
|
Zitat: #navigation {
width: 800px;
float: left;
}
#navigation a {
font-family: verdana;
color: #9f9f9f;
float: left;
margin-bottom: 5px;
padding: 10px;
text-decoration: none;
}
#navigation a:hover {
color: #f2f2f2;
}
#navigation li {
list-style-type: none;
}
so sieht deine navi im mom aus, im normal fall würdest du jetzt noch eine klasse machen, z.b:
Zitat:
li. aktiv{
font-weight: bold;
color: #f2f2f2
}
aber wie willst du diese in deine html datei bekommen?
evtl. über seiteneditor? oO ...umständlich!
versuch ma diesen hier mit deiner aktuellen navi zu tauschen:
Zitat:
#nav_container {
width: 800px;
float: left;
}
li.nav_element a {
font-family: verdana;
color: #9f9f9f;
float: left;
margin-bottom: 5px;
padding: 10px;
text-decoration: none;
}
li.nav_element:hover {
color: #f2f2f2;
}
li.checked_menu a{
font-weight:bold;
color: #f2f2f2;
}
-------------------------------------------------------------------------------------------------
#nav_container {display: none;} <--- nicht dabei vergessen diesen teil zu löschen
und den hier auch:
<div id="navigation"><li><a href="/Home.htm">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</div>
gn8 aka ______________ Born to be a N3rd |
|
↑
|
|
 |
-

badweb
Wohnort: BaWü
|
14.07.2010 um 21:10 (UTC) Titel: |
|
|
Erstmal danke für die Antwort zu so später Stunde.
Allerdings hätte ich mit deiner Version wieder die Standartnavigation im Design, was ich eigentlich vermeiden wollte. Naja, mal schaun ob ichs noch hinbekomme.
Ps:
Du hast bei deiner Variante die Klasse ul#nav vergessen, die die Auflistung der Links beschreibt. ______________ Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
  |
|
↑
|
|
 |
-

zax66
|
15.07.2010 um 00:29 (UTC) Titel: |
|
|
Es geht, ja aber nur mit der Standard nav, änderst ist's im hpbk Net möglich, außer mit nem Riesen Aufwand... |
|
↑
|
|
 |
|