Haupt- und Servicenavigation

vivi · Beitrag von **vivi** » Mi 17. Dez 2003, 12:15

Hallo,
bin ziemlich neu und hab so gut wie keine Ahnung.
Aber ich hab auf meiner Seite links die Hauptnavigation und oben will ich als Balken eine weiter Navigation. Beide haben die gleichen "Punkte". Also immer "Wir über uns", "Geschäftsfelder", "Solutions". Klappt eigentlich alles ganz gut.
Jetzt will ich in der oberen Navi, bei mir Modul Servicnavigation, erreichen, dass auf der aktiven Seite der Hintergrund ein anderer ist.
In meinem css hab ich die Möglichkeiten active, hover, link und visited. Aber bei keinem davon bleibt der Hintergrund der gewählten Seite anders.

Etwas kompliziert, trotzdem danke!

wolfganggarella · Beitrag von **wolfganggarella** » Mi 17. Dez 2003, 13:12

hi vivi,

nimm' Dein Standardlayout und "kopiere es". Neuer Name z.B. Service. In diesem Layout ganz normal im <head> einen style definieren z.b: body { background-color: #FF6666; }.
Erzeuge ein neues Template z.B. "Service" auf der Basis des Layout Service. Vorkonfigurieren.
Im Content der Kategorie Servicenavi das Template Service zuordnen.
Jedem Artikel der Kategorie das Template Service zuordnen.

Voila, ein gedämpftes rot als Background der Servicenavi.
Grüße
Wolfgang

vivi · Beitrag von **vivi** » Mi 17. Dez 2003, 14:24

Hallo,

ich muss was falsch gemacht haben, denn ich hab keine Veränderung bemerkt...
Hier ist mein "neues" Layout (iTmServiceLayout):

<html>
<head>
<title>blablabal</title>
<link rel="stylesheet" type="text/css" href="css/format.css">
</head>
<body style="margin:0" background-color: #FF6666>
<table border="0" cellpadding="0" cellspacing="0" width="800" ID="TableTitle">
<tr>
<td class="titlebar" >

<img src="itmImages/logoKlein.gif"/>
</td>
<td bgcolor="#8caade" align="right">
<img src="itmImages/bannerKlein.jpg" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="800" ID="TableMenuBar">
<tr>
<td class="banner" width="190"> </td>
<td class="banner" width="610">CMS_CONTAINER[3]</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="800" height="100%" ID="TableContent">
<tr>
<td width="190" height="111" vAlign="top">
<table border="0" height="100%" cellpadding="0" cellspacing="0" ID="TableMenu" >
<tr>
<td class="indexHome" height="25" width="100%" >Home</td>
</tr>
<tr>
<td class="index" width="100%" bgcolor="#8caade" vAlign="top" >CMS_CONTAINER[5]</td>
<tr class="index2" width="100%" </tr>
</tr>
</tr>
</table> </td>
<td width="610" height="111" vAlign="top">
<table border="0" cellpadding="0" cellspacing="0" class="content" width="100%" ID="TableInnerContent">
<tr>
<td class="headline" height="40" width="100%">CMS_CONTAINER[6]</td>
</tr>

<tr>
<td class="subheadline" height="30" width="100%">CMS_CONTAINER[7]</td>
</tr>
<tr>
<td class="content" width="100%">CMS_CONTAINER[8]</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Wo muss denn da jetzt das: body { background-color: #FF6666; } hin?
Anschließend hab ich das Template iTmServiceT erstellt und dem das iTmServiceLayout zugewiesen.
Im container 3 hab ich das Modul Service Navigation. usw.
Im Content gibt es die Kategorie Servicenavi nicht, die heißt glaub Hilfsnavigation, dieser hab ich das iTmServiceT zugewiesen und auch den Artikeln darunter.
Hm, wie gesagt, funtst nicht.

Grüßle Vivi

vivi · Beitrag von **vivi** » Mi 17. Dez 2003, 14:36

Mittlerweile glaub ich, dass wir uns falsch verstanden haben, weil jetzt hab ich glaub das geschafft, was Du meintest. Der Hintergrund der ganzen Seite/Artikel wird rot. Ich will aber, dass nur der "Reiter" inder Service Navigation rot wird und zwar der, von der Kategorie, die gerade aktiv ist.

ttb · Beitrag von **ttb** » Mi 17. Dez 2003, 14:39

Du musst vermutlich die Template-Dateien in cms/templates anpassen.

vivi · Beitrag von **vivi** » Mi 17. Dez 2003, 14:44

Für die Servicanavigation find ich kein Template und wenn ich cms\templates\hilfsnavi.html verändere, tut sich nichts. Welches wäre denn das richtige Template?

ttb · Beitrag von **ttb** » Mi 17. Dez 2003, 14:50

Oops, die Servicenavigation wird über die Modulausgabe definiert.

vivi · Beitrag von **vivi** » Mi 17. Dez 2003, 14:54

Dazu muss man wohl php können und das fehlt mir leider. Hast Du ne Idee? Es ist doch das Modul "Service Navigation"? Nur, damit wir beide vom gleichen reden ,-)

ttb · Beitrag von **ttb** » Mi 17. Dez 2003, 15:01

Ja, das meinte ich.

Die Ausgabe sieht in der Modulausgabe etwa so aus:

Code: Alles auswählen

echo '<td height="21" class=".navigation" style="border: 0px; border-top:1px; border-color: #F7C473; border-style: dashed; background-color: #FFFFFF; padding-left:7px; padding-right:7px;">
<a class="klein" href="front_content.php?idcat='.$db->f("idcat").'">'.$db->f("name").'</a></td>';

die kannst du z.B. durch ne Klassendefinition im a-Tag erweitern. Alternativ könntest du auch einfach über Style -> Styleeditor die Klassen klein und navigation ändern.

vivi · Beitrag von **vivi** » Mi 17. Dez 2003, 15:19

Mein Teil sieht da so aus

Code: Alles auswählen

echo '<td height="21" class="menubar" >
          <a class="klein" href="front_content.php?idcat='.$db->f("idcat").'">'.$db->f("name").'</a></td>';

Das passende css so:

Code: Alles auswählen

...
.menubar {padding-left:3px; padding-right:3px; color:#FFFF00}

A.klein:active {background-color: #00ff00;} /*keine Panik, nur zum Test*/
A.klein:hover	{font-family: arial, helvetica, sans-serif; text-decoration: none; color: #ffffff; background-color: #8caade;}
A.klein:hover	{border-top: 2px solid #81f5cd; padding-top: 3px; }
A.klein:visited {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #ffffff;}
A.klein:visited {font-weight:bold; height: 21px; padding: 6px 8px 2px; }

Schnaggelts bei Dir? Bei mir leider nicht...

ttb · Beitrag von **ttb** » Mi 17. Dez 2003, 15:33

Mh, das kann auch schlecht funktionieren, weil es bei den Pseudoformaten eine bestimmte Reihenfolge gibt, die unbedingt eingehalten werden muss!
Richtige Reihenfolge: :link, :visited, :hover, :active
Siehe http://selfhtml.teamone.de/css/eigensch ... tive_focus

vivi · Beitrag von **vivi** » Mi 17. Dez 2003, 15:44

Peinlich, ok, das sollte man dazu natürlich wissen.

Jetzt hab ichs so:

Code: Alles auswählen

A.klein:link {font-family: arial, helvetica, sans-serif; font-weight: bold; text-decoration: none; height: 21px; padding: 7px 9px 3px; }

A.klein:hover	{font-family: arial, helvetica, sans-serif; text-decoration: none; color: #ffffff; background-color: #8caade;}
A.klein:hover	{border-top: 2px solid #81f5cd; padding-top: 3px; }


A.klein:visited {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #ffffff;}
A.klein:visited {font-weight:bold; height: 21px; padding: 6px 8px 2px; }

A.klein:active {background-color: #00ff00;}

Aber die gerade aufgerufene Seite, also damit die ein anderes aussehen hat, bzw. der link dahin, dafür gibt es kein Format oder tag. Oder seh ich das falsch?

kuchi · Beitrag von **kuchi** » Mi 17. Dez 2003, 16:14

Hallo,

wenn ich Deine Frage richtig deute, dann möchtest Du, daß Dein aktiver Link als Beispiel eine bestimmte Farbe annimmt? Wenn ja, dann geht das mit

a.klein:active {...color:#009933 oder red/blue..;...}
wenn Du das meinst.

Gruß kuchi

vivi · Beitrag von **vivi** » Do 18. Dez 2003, 08:47

Hallo,

ja genau das will ich. Mit dem
a.klein:active {...color:#009933 oder red/blue..;...}
hb ichs schon probiert, das bleibt immer nur ganz kurz in der anderen Farbe. Fast so, wie wenn die andere Farbe nur genau während des Mausklicks an ist.

Trotzdem danke!

wolfganggarella · Beitrag von **wolfganggarella** » Do 18. Dez 2003, 10:55

hi vivi,

hatte Dich zunächst falsch verstanden.
In Contenido sind die Links im Standard grundsätzlich aktiviert, auch der zum aktiven Inhalt.
Ich habe das bei mir für die Service-Navi so gelöst:
In der while-Schleife im Modul der Servicenavi wird nach der Ausgabe der td's mit:

Code: Alles auswählen

echo '<td height="21" class=".navigation" style="border: 0px; border-top:1px; border-color: #F7C473; border-style: dashed; background-color: #FFFFFF; padding-left:7px; padding-right:7px;">';/*hier echo abschließen*/

die Bedingung eingebaut:

Code: Alles auswählen

if($db->f("idcat")!=$idcat){ 
          echo '<a class="klein" href="front_content.php?idcat='.$db->f("idcat").'">'.$db->f("name").'</a>';
}else{
echo '<span class="nonavi">'.$db->f("name").'</span>';}

und dann die td abgeschlossen:

Code: Alles auswählen

echo '</td>';

Hierzu musst Du noch die Klasse .nonavi erstellen mit dengleichen Eigenschaften wie der hover-Zustand beim Link, ggfs zusätzlich noch mit display: block formatieren.
Sollte das gewünschte Ergebnis bringen.

Gruß
Wolfgang

CONTENIDO Forum

Haupt- und Servicenavigation

Haupt- und Servicenavigation

Navigation

Re: Navigation