Unterscheidliche Bilder in Navigation einbinden

[funomat]

Nur das:

Code: Alles auswählen

<ul>
            {items}
          </ul>

[idea-tec]

inhalt gelöscht, weil mit obigem post überschneidend

gruß karsten

[Stephan73]

Oha! Es geht! Ich danke Euch!
Habe jetzt noch ein Problemchen, dass die komplette Unterkategorie bei Aufruf gleichermaßen "Gehighlightet" ist und beim Mouseover nicht markiert wird.
Ich teste das mal im css ...

Herzlichen Dank und noch einen schönen Tag!
Stephan

[funomat]

Kein Problem. Einem dem die Zahl 73 so am herzen liegt helf ich gerne

[Stephan73]

Geburtsjahr, Funomat!

[funomat]

Natürlich! Das beste

[F-Grisu]

Hallo,
*******
ich bin noch ein ziemlicher Neuling im Thema "Contenido", aus diesem Grund hoffe ich auch Eure Unterstzützung.
Ich habe folgende Fragen, vielleicht kann mir jemand weiter helfen.

a.) wie bekomme ich einen silbernen Hintergrund (alle 200px breit) hinter die jeweiligen Kategorien und wie erstellt mein die Trennstrich ober und unterhalb der Links?

b.) in meinem Bsp. (siehe Anhang) befindet sich vor den jeweiligen Links ein Punkt und zudem sind die Links unterstrichen. Nicht gerade schön.

c.) die Links auf der Ebene 2 werden eingerückt. kann man diese auch auf der gleichen Line wie die Ebene 1 belassen?

Kann mir jemand helfen, wie ich meine Navigation so hin bekomme, wie im obrigen Beispiel? DANKE

Grüße ...
F-Grisu

[GaMbIt_]

ich sehe zwar keinen Ahnhang...

Tippe aber mal auf CSS ...

Ist ne ganz einfache Sache...

www.css4you.de

[funomat]

Hallo F-Grisu,

natürlich nervst Du nicht, nur bevor man eine PN schickt sollte man erst hier seine Probleme Posten

Also, Du hast scheinbar nicht ein Problem mit Contenido, sondern eher mit CSS! Bei solchen Überarbeitungen des ursprünglichen Beispielmandanten, sollte man nicht einfach alles an CSS löschen, sondern lieber behutsam an seine Bedürfnisse anpassen. Du hast nämlich sämtliche CSS-Formatierungen für die Navigation entfernt!!

Hier noch einmal der komplette CSS-Quellcode für die Navigation ohne die von Dir gewünschten Anpassungen, damit sie auch jeder benutzen kann:

Code: Alles auswählen

/* ###################################################### */
/* ####################### NAVIGATION ################### */
/* ###################################################### */

/* Level 1 */
#navigation ul {
	width:230px;
	margin:0;
	padding:0;
	margin-top:10px;
	/*background-color:#F2F2F2;*/
	background-color:transparent;
}
#navigation ul li {
	width:210px;
	margin:0;
	padding:0 0 0 10px;
	list-style-type:none;
}
#navigation ul li a {
	display:block;
	width:210px;
	height:19px;
	line-height:19px;
	margin:0;
	padding:0 0 0 10px;
	font-size:11px;
	color:#666;
	background-image:url(../images/navi_pfeil_zu.gif);
	background-repeat:no-repeat;
	background-position:210px 3px;
	border-bottom:1px solid #ccc;
	text-decoration:none;
}
#navigation ul li a:hover, #navigation ul li.active a {
	background-image:url(../images/navi_over.gif);
	background-repeat:no-repeat;
	background-position:0 0;
	color:#fff;
}

#navigation #nav_1 { border-left: 10px solid #ff90d2; }
#navigation #nav_2 { border-left: 10px solid #ff9090; }
#navigation #nav_3 { border-left: 10px solid #ffbc90; }
#navigation #nav_4 { border-left: 10px solid #ffe590; }
#navigation #nav_5 { border-left: 10px solid #f0ff90; }
#navigation #nav_6 { border-left: 10px solid #baff90; }

/* Level 2 */
#navigation ul.subNavigation {
	width:210px;
	margin:0;
	padding:0;
}
#navigation ul.subNavigation li a {
	background-image:url(../images/subnavi_pfeil_zu.gif);
	background-repeat:no-repeat;
	background-position:199px 8px;
	border-bottom:1px dotted #ccc;
	color:#666;
	width:210px;
}
#navigation ul.subNavigation li.active a {
	color:#fff;
}
#navigation ul.subNavigation li a:hover, #navigation ul.subNavigation li.active a {
	background-image:url(../images/subnavi_over.gif);
	background-repeat:no-repeat;
	background-position:0 0;
}

/* Level 3 */
#navigation ul.subSubNavigation {
	width:200px;
	margin:0;
	padding:0;
}
#navigation ul.subNavigation li ul.subSubNavigation li a {
	background-image:none;
	border-bottom:0;
	color:#666;
	width:200px;
}
#navigation ul.subNavigation li ul.subSubNavigation li a:hover, #navigation ul.subNavigation li ul.subSubNavigation li.active a {
	background-image:url(../images/subsubnavi_over.gif);
	background-repeat:no-repeat;
	background-position:0 0;
}

Evtl. müssen die Pfade für die Bilder noch an die eigene Struktur angepasst werden.
Wenn man die Bilder nicht benötigt, einfach die Bereiche background-image, background-repeat und background-position entfernen.

So, jetzt zu Deinen Fragen:

a.)
1. Im Bereich "#navigation ul li a {..." setzt Du zusätzlich noch die background-color auf z.B. silver.
2. Grundsätzlich sollte man immer nur oben oder unten einen Trennstrich setzen. Ist aber in dem oben erwähnten CSS-Code auch schon drin.

b.) Sollte bei Einsatz des oben erwähnten CSS-Codes nicht mehr passieren.

c.) siehe Punkt b.

Gruß,
funomat

[F-Grisu]

Hallo,
=====
nachdem ich heute Contenido neu installiert habe, konnte ich nun auch die Navigation anpassen.
Ich hatte wohl beim ersten Versuch, zu voreilig einige Stellen in der CSS Datei gelöscht.

Aber nun habe ich auch das gleiche Problem wie "Stefan73" - ("Habe jetzt noch ein Problemchen, dass die komplette Unterkategorie bei Aufruf gleichermaßen "Gehighlightet" ist und beim Mouseover nicht markiert wird.")

Kann mir einer von Euch auch hierbei helfen? Ich bedanke mich mal bereits im vorraus für Eure Unterstützung.

Grüße ...
F-Grisu

[funomat]

Hallo F-Grisu,

das Problem ist dass Du scheinbar nicht viel von CSS verstehst! Wie GaMbIt_ schon erwähnte kann man sich unter http://www.css4you.de einiges selber beibringen. Da Dein Problem nichts mehr mit dem Modul an sich oder Contenido zu tun hat, möchte ich Dich bitten, Dich dort erstmal schlau zu machen. Eine Neuinstallation war für die Behebung Deines Problems allerdings nicht nötig. Es hätte gereicht den Bereich der CSS-Datei zu überschreiben in dem es um die Navigation geht (#navigation...).

Gruß,
funomat

[F-Grisu]

Hallo nochmal,
=============
ich habe euren rat befolgt und mich durch css4you bzw. selfhtml durchgekämpft.
leider ohne erfolg. was ich aber inzwischen gelernt habe ist, das wenn ich mir meinen Quelltext anzeigen lasse, ein </li> wohl an der falschen stelle sich befindet. anbei der quelltext mit dem </li> an der falschen stelle (ganz unten)

Code: Alles auswählen

 <div id="contentContainer" class="clearfix">
                <div id="navigation">
                            <ul>

                
                    <li><a id="nav_1" href="front_content.php?idcat=2" title="Aktuelles">Aktuelles</a></li>

                    <li><a id="nav_2" href="front_content.php?idcat=3" title="Über uns">Über uns</a></li>

                    <li><a id="nav_3" href="front_content.php?idcat=4" title="Vorstand">Vorstand</a></li>

                    <li><a id="nav_4" href="front_content.php?idcat=11" title="Mannschaften">Mannschaften</a></li>

                    <li class="active"><a id="nav_5" href="front_content.php?idcat=12" title="Vereinsanlage">Vereinsanlage</a>    <ul>

                
                    <li><a href="front_content.php?idcat=13" title="Hosting">Hosting</a></li>

                    <li><a href="front_content.php?idcat=14" title="Dedizierte Server">Dedizierte Server</a></li>

                    <li><a href="front_content.php?idcat=15" title="Hardware">Hardware</a></li>

                    <li><a href="front_content.php?idcat=16" title="Redaktion">Redaktion</a></li>

                    <li><a href="front_content.php?idcat=17" title="Bilddatenbanken">Bilddatenbanken</a></li>

                    <li><a href="front_content.php?idcat=18" title="Shopsysteme">Shopsysteme</a></li>

                    <li><a href="front_content.php?idcat=19" title="Newsletter">Newsletter</a></li>

                    <li><a href="front_content.php?idcat=20" title="Webstatistik">Webstatistik</a></li>


              </ul></li>

und hier der manuell korrigiert quellcode, wo ich meine, das das li-tag </li> hinter die zeile class=active sollte, ungefähr in der mitte

Code: Alles auswählen

 <div id="contentContainer" class="clearfix">
                <div id="navigation">

                            <ul>

                
                    <li><a id="nav_1" href="front_content.php?idcat=2" title="Aktuelles">Aktuelles</a></li>

                    <li><a id="nav_2" href="front_content.php?idcat=3" title="Über uns">Über uns</a></li>

                    <li><a id="nav_3" href="front_content.php?idcat=4" title="Vorstand">Vorstand</a></li>

                    <li><a id="nav_4" href="front_content.php?idcat=11" title="Mannschaften">Mannschaften</a></li>

                    <li class="active"><a id="nav_5" href="front_content.php?idcat=12" title="Vereinsanlage">Vereinsanlage</a>    </li>
					<ul>

                
                    <li><a href="front_content.php?idcat=13" title="Hosting">Hosting</a></li>

                    <li><a href="front_content.php?idcat=14" title="Dedizierte Server">Dedizierte Server</a></li>

                    <li><a href="front_content.php?idcat=15" title="Hardware">Hardware</a></li>

                    <li><a href="front_content.php?idcat=16" title="Redaktion">Redaktion</a></li>

                    <li><a href="front_content.php?idcat=17" title="Bilddatenbanken">Bilddatenbanken</a></li>

                    <li><a href="front_content.php?idcat=18" title="Shopsysteme">Shopsysteme</a></li>

                    <li><a href="front_content.php?idcat=19" title="Newsletter">Newsletter</a></li>

                    <li><a href="front_content.php?idcat=20" title="Webstatistik">Webstatistik</a></li>


              </ul>

wenn ich die manuell korrigiert html file startet, bekomme ich folgenden screen. aber ich weiß nicht, wo ich den eventuellen fehler korriegiren soll. ich hoffe ich nerve euch nicht, aber "stefan73" hat oder hatte dieses problem ja auch.

grüße ...
F-Grisu

[idea-tec]

das li-Tag ist nicht falsch, da fehlt ein schließendes ul-tag hinter dem letzten "falschen" li-Tag
ich hoffe, dass das einer versteht

also bei "Vereinsanlage" geht ein UL auf
dies beinhaltet: alles ab "Webhosting" bis "Webstatistik"
dann wird dieses UL geschlossen und auch das li von "Vereinsanlage" wird dicht gemacht

ABER -> Das geöffnete ul hinter dem div mit der id "navigation" wird NICHT geschlossen!!!

[funomat]

Das </li>-Tag sitzt schon an der richtigen stelle (s. http://de.selfhtml.org/html/text/listen.htm, zweites Beispiel). Dein Problem ist auf jeden Fall der benötigte CSS-Code. Vergleiche ihn mal ganz genau mit dem von mir geposteten. Im Bereich für Level 2 hast Du 100%ig was geändert, was Du nicht hättest ändern dürfen.

[romaro]

Hallo,

hab da mal eine Frage zur Navigation. Ich möchte dem aktiven Menüpunkt ein anderes Template zuweisen. In diesem Template soll der Menüpunkt nicht mit einem <a-Tag umschlossen sein.

Blick nicht ganz, wie ich die Funktion - $sSubcatsX = $tpl... auflösen kann. Wenn ich das Modul richtig verstehe, werden hier ja die Templates (html-Templates) zugewiesen.

Krieg ich das vielleicht mit einer "foreach(..."- hin?

Dank für einen Tipp.