[CSS] Navigation mit Bild und Unternavigation mit Text

[Barringof]

Hallo,

ich beschäftige mich seit einiger Zeit nun erst mit CSS und alles ist irgendwie Neuland für mich. Und jetzt komm ich nicht weiter. Ich hab schon Google gequält und alles mögliche ausprobiert, aber nichts half. Mittlerweile weiß ich auch gar nicht mehr, wie ich mein Problem beschreiben bzw. nach welcher Hilfe ich suchen soll?! Ich hoffe, ihr könnt mir helfen.

Folgendes:
Ich will mit CSS eine horizontale Navigation erstellen. Statt dem Text "Startseite" soll dort aber ein Bild zu sehen sein. Quasi eine Navigation aus Bildern. Es soll aber auch eine Unternavigation geben, die aber nur aus Text ohne sonstigen Schnickschnack sein soll.

In der Theorie sieht das ganze so aus. (Das ist eine Fotomontage)


Das mit der Bildnavigation bekomm ich hin. Sieht sogar gut aus Aber die Unternavigation macht mich fertig. Er setzt dort jedesmal das Bild mit rein. Das will ich aber nicht! Es soll nur der Text zu sehen sein.




Ich stell mal den CSS-Code mit dazu, den ich mir so zusammengezimmert habe. Ich hoffe, man blickt da durch und ihr könnt mir helfen :/

/* NAVIGATION */

#page #navigation
{
    height:50px;
    width:960px;
    }

#page #navigation_inner
{
    overflow:hidden;
    width:960px;
    }

#page #navigation #navigation_66004 li#navigation_66004_66005 span.inner,
#page #navigation #navigation_66004 li#navigation_66004_66006 span.inner,
#page #navigation #navigation_66004 li#navigation_66004_66007 span.inner,
#page #navigation #navigation_66004 li#navigation_66004_66008 span.inner,
#page #navigation #navigation_66004 li#navigation_66004_66009 span.inner,
#page #navigation #navigation_66004 li#navigation_66004_66010 span.inner
{
    display:none;
    }

#page #navigation UL.level_1 A
{
    background-color: #846439 !important;
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    text-align: left;
    margin: 0px;
    }

#page #navigation UL.level_1 LI.level_1 .active
{
    background-color: #725630 !important;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    text-align: left;
    } 


/* NAVI START */

#page #navigation #navigation_66004 li#navigation_66004_66005 a span.outer
{
    background-image:url('/files/www/navi_test.png');
    background-position:0px 0px;
    background-repeat:no-repeat;
    height:50px;
    overflow:hidden;
    width:186px;
}

#page #navigation #navigation_66004 li#navigation_66004_66005 a span.active,
#page #navigation #navigation_66004 li#navigation_66004_66005 a:hover span.outer
{
    background-image:url('/files/www/navi_test.png');
    background-position:0px -50px;
    background-repeat:no-repeat;
    height:50px;
    overflow:hidden;
    width:186px;
}


/* NAVI KINDER */

#page #navigation #navigation_66004 li#navigation_66004_66006 a span.outer
{
    background-image:url('/files/www/navi_test.png');
    background-position:-186px 0px;
    background-repeat:no-repeat;
    height:50px;
    overflow:hidden;
    width:168px;
    }
    
#page #navigation #navigation_66004 li#navigation_66004_66006 a span.active,
#page #navigation #navigation_66004 li#navigation_66004_66006 a:hover span.outer
{
    background-image:url('/files/www/navi_test.png');
    background-position:-186px -50px;
    background-repeat:no-repeat;
    height:50px;
    overflow:hidden;
    width:168px;
    }

Könnt ihr mir sagen, was ich noch ergänzen muss, damit statt dem Bild einfach nur der Text in der Unternavigation zu sehen ist? Danke

 

[cebito]

AW: [CSS] Navigation mit Bild und Unternavigation mit Text

Poste bitte einen Link zu deinem Problem, da liegt wohl noch mehr im Argen, oder warum brauchts das "!important"? Und - wir wissen ja auch alle, welche Links die entsprechenden ID's haben. Sorry, Glaskugel putt...

 

[Raphale]

AW: [CSS] Navigation mit Bild und Unternavigation mit Text

Versuch erstmal die ganzen ID zu löschen... und nimm immer nur die anfangselemente als Id (div id="menu") =
#menu ul {
...
}
...#menu ul li ul li (wäre dann ein untermenueintrag usw.)

du musst auch nicht die IDs von davor bennen! #... #... #... a {} !
sonder nur diejengie welche du auch ansprechen möchtest #... a {}

Bin aber selber anfänger aber hoffe es hilft !!
MFG Raphaele

 

[Barringof]

AW: [CSS] Navigation mit Bild und Unternavigation mit Text

Hallo,

danke für den Tipp
Ein Bekannter hat mir sowas ähnliches auch geraten. Ich hätte es wohl "zu vollgemüllt". Jetzt gehts aber.