Antworten auf deine Fragen:
Neues Thema erstellen

[CSS] Navigation mit Bild und Unternavigation mit Text

B

Barringof

Guest

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 :/

Code:
/* 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

undefined

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

angehender Webentwickler

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
 
B

Barringof

Guest

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. :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.476
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben