Navigation. Jeder Punkt in seiner Farbe

**olek07** · 05.08.2009, 10:57

Hallo zusammen,

Das Menü auf der Website muss so realisiert werden, dass jeder Menü-Punkt ja nach dem Bereich in seiner eigenen Farbe dargestellt werden muss. Ich habe nur eine Idee, dass ich im Template entsprechende CSS-Klasse festlege. Gibt es andere Lösungen?

**MacKP** · 05.08.2009, 11:01

Ja, die gibt es.

Unter Seitenstruktur kannst ne Klasse vergeben.
Oder du änderst das Template, wenn du das automatisiert haben möchtest so, das ne Klasse mit dem Seitenalias erstellt wird.

Viele Grüße

**olek07** · 05.08.2009, 11:18

ach, ich depp. Natürlich.
"Die Klasse wird sowohl in der Navigation als auch im Body-Tag verwendet."
es ist sogar besser, als ich brauche :-)
Vielen Dank

**Swirl** · 20.08.2009, 10:30

ich habe das gleiche "problem".
wie wurde es denn nun gelöst!?

es handelt sich um eine seite die bereits besteht, nun aber in tl umgesetzt werden soll.
der template code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
<head>
<base href="<?php echo $this->base; ?>"></base>
<title> <?php echo $this->pageTitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
<link rel="stylesheet" type="text/css" href="offset.css" media="screen" />
<script type="text/javascript" src="plugins/countdown/countdown.js"></script>

   
</head>

<body onload="countdown(); <?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>

<div id="header">
<?php echo $this->header; ?>

 <div class="spacer">
 
  <div id="navigation">
    <ul class="nav">
      <li class="current_cyan"><a href="index.php/beratung.html">Kostenlose Beratung</a></li>
      <li class="magenta"><a href="index.php/warum.html">Warum? Darum!</a></li>
      <li class="yellow"><a href="index.php/kontakt.html">Kontakt</a></li>
    </ul>
  </div>
 </div>
</div>

<div id="content">
<?php echo $this->content; ?>
 <div class="spacer">
<div class="content">


</div>

  </div>



 <div id="banner">
  <table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="http://www.defw-bannertausch.de" target="_blank"><img src=		"http://www.defw-bannertausch.de/bannertausch.gif" width="5" height="41" border="0" alt="Bannerexchange von DEFW-Bannertausch.de"></a></td><td><iframe src="http://www.defw-bannertausch.de/adframe.php?member=JKL591YB" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="120" height="600"></iframe></td></tr></table>

 
</div> 
 </div>
</div>
<div id="footer">
<div class="spacer"></div>
</div>

<!-- indexer::stop -->
<img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
<!-- indexer::continue -->
<?php echo $this->mootools; ?>

<?php if ($this->urchinId): ?>

<script type="text/javascript" src="<?php echo $this->urchinUrl; ?>"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
try {
var pageTracker = _gat._getTracker("<?php echo $this->urchinId; ?>");
pageTracker._trackPageview();
} catch(err) {}
//--><!]]>
</script>
<?php endif; ?>




</body>
</html>

und die css

Code:

@charset "utf-8";

html {
  }

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans;
  }

.spacer {
  margin: 0 auto 0 auto;
  padding-left: 50px;
  width: 801px;

  }

/* header
--------------------------------------------------------------------------------------- */

#header {
  height: 96px;
  background: #08070C;
  }
  
#header.headcyan{
  border-bottom: 5px solid #009DE0;
}

#header.headmagenta{
  border-bottom: 5px solid #E2017B;
}

#header.headyellow{
  border-bottom: 5px solid #FFEC01;
}

*+html #header {
  background: #08070C;
  }

* html #header {
  background: #08070C;
  }

#header .spacer {
  background: #08070C url('nav-header.png') repeat-y 0 0;
  height: 96px;
  }

#header h1 {
  background: url('logo.gif') no-repeat 0 0;
  display: block;
  margin: 0;
  padding: 0;
  float: left;
  width: 400px;
  height: 68px;
  }

* html #header h1 {
  background-image: url('logo.gif');
  }

#header h1 a {
  display: block;
  margin: 0;
  padding: 0;
  float: left;
  width: 400px;
  height: 66px;
  border: 0;
  text-decoration: none;
  }

#header h1 a span {
  visibility: hidden;
  }

#header h1 a span.my {
  color: #fff;
  letter-spacing: 0;
  }

#header h1 a span.live {
  color: #725a4c;
  }

#header h1 a span.shopping {
  color: #00c6ff;
  }

#header h1 a span.beta {
  position: relative;
  top: -22px;
  left: -25px;
  color: #00c6ff;
  font-weight: normal;
  letter-spacing: 0;
  font-size: 10px;
  }
  


/* subnav
--------------------------------------------------------------------------------------- */

#subnav {
  height: 7px;
  width: 100%;
  clear: both;
  }

#subnav p {
  width: 200px;
  float: right;
  margin: 0 auto 0 auto;
  line-height: 25px;
  height: 25px;
  font-size: 11px;
  text-align: right;
  }

#subnav p select {
  width: 180px;
  font-size: 10px;
  }

#subnav p select {
  position: relative;
  top: 5px;
  }

*+html #subnav p select {
  top: 4px;
  }

/* nav
--------------------------------------------------------------------------------------- */

ul.nav {
  float: right;
  display: block;
  font-size: 14px;
  height: 27px;
  line-height: 27px;
  margin: 0 auto 0 auto;
  padding: 0;
  width: 801px;
  }

ul.nav li.opposite,
ul.nav li {
  float: right;
  margin: 0 1px 0 0;
  list-style: none inside;
  font-size: 12px;
  }

ul.nav li.opposite {
  float: left;
  margin: 0 0 0 1px;
  }

ul.nav li span.icon {
  padding-left: 18px;
  background: url('rss-icon.jpg') no-repeat 0 50%;
  }

ul.nav li a {
  display: block;
  padding: 0 11px 0 11px;
  text-decoration: none;
  color: #fdfdfd;
  background: #4B3C31;
  }

ul.nav li.current {
  }

ul.nav li.current a {
  }

ul.nav li a:hover {
  background: #00c6ff;
  }

ul.nav li.current a:hover {
  }

/* nav 2
--------------------------------------------------------------------------------------- */

#navigation {
  clear: both;
  }

#navigation ul.nav {
  clear: both;
  display: block;
  font-size: 12px;
  float: left;
  height: 28px;
  line-height: 28px;
  margin: 0;
  padding: 0;
  width: 801px;
  margin: 0 auto 0 auto;
  }

#navigation ul.nav li {
  float: left;
  margin: 0 5px 0 0;
  list-style: none inside;
  font-size: 11px;
  }

#navigation ul.nav li a {
  background-color: #666;
  display: block;
  padding: 0 20px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  }

#navigation ul.nav li a:hover {
  }

#navigation ul.nav li{
  background: #666;
  }

#navigation ul.nav li.current {
  }

#navigation ul.nav li.current a {
  }


#navigation ul.nav li.current_cyan a {
  background: #009DE0;
  }

#navigation ul.nav li.cyan a:hover {
  background: #009DE0;
  color: #08070C;
  }

#navigation ul.nav li.current_magenta a {
  background: #E2017B;
  }

#navigation ul.nav li.magenta a:hover {
  background: #E2017B;
  color: #08070C;
  }  

#navigation ul.nav li.current_yellow a {
  background: #FFEC01;
  color: #08070C; 
  }

#navigation ul.nav li.yellow a:hover {
  background: #FFEC01;
  color: #08070C;
  }
  

#navigation ul.nav li a:hover {
  }

#navigation ul.nav li.current a:hover {
  background-image: none;
  cursor: default;
  }

div.clear {
  clear: both;
  }

/* content
--------------------------------------------------------------------------------------- */

#content{
  background: #fff url('../gfx/content-back.gif') repeat-x scroll 0% 0%;
  font-size: 12px;
  font-family: Arial,Helvetica,Verdana,Geneva,Sans;
  padding-top: 10px;
  height: 600px;
  }

#content h1{
 font-size: 22px;
 font-family: Arial,Helvetica,Verdana,Geneva,Sans;
 color: #08070C;
}
    
span.small{
 font-size: 10px;
 color: #666;
}

label{
 padding-top:10px;
 display: block;
 font-size: 8px;
}

/* footer
--------------------------------------------------------------------------------------- */

#footer{
  background: #fff url('../gfx/footer-back.jpg') repeat-x scroll 0% 0%; 
  height: 265px; 
  bottom:0pt;
  padding:0pt;
  right:0pt;
  width:100%;
}

#footer div.spacer{
  background: #fff url('../gfx/printmaschine.jpg') no-repeat scroll 0% 0%; 
  height: 265px;  
  width: 375px;
}


#banner {width:120px; height:600px; float:left; margin-left:60px;}

.content {float:left;}

**MacKP** · 20.08.2009, 10:56

Hallo Swirl,
ich glaube ich versteh dich noch nicht so ganz... Template Ausgabe und CSS sehen doch ganz gut aus.

Unter Seitenstruktur kannst ne Klasse vergeben.

Wenn es an dieser Stelle hakt: Jeder Seite kannst du in den Einstellungen selber eine Klasse zuweisen...

Viele Grüße
----
Ich seh gerade du hast das fest ins fe_page.tpl reingekloppt.. Kannst die Navi da einfach raus nehmen und dann ein Modul Navigation in Seitenlayout in den Header packen (unter den sonstigen Teil von deinem Header). Den Spacer kannst du dann auch entfernen und einfach mit CSS machen, eventuell mit .mod_navigation {margin-top:10px;}.
Und dann wie schon gesagt den Seiten eine für dich passende Klasse zuweisen...

**Swirl** · 20.08.2009, 11:15

Du hast eine PN

**MacKP** · 20.08.2009, 11:18

Du auch...

Aber bitte bitte schreibt lieber hier im Forum...
Es sei denn Ihr wollt mir unbedingt ein Passwort oder so übermitteln...

Hier im Forum haben dann auch andere was davon.

Viele Grüße

**Swirl** · 20.08.2009, 12:17

Bin da leider nicht viel weiter gekommen.
1. Bild mit Modul
2. Bild ohne Modul

und das menü steht nach wie vor in der fe_page.tpl
wenn ich es rausnehme ... erscheint nix mehr.
wie auch ... weiß nicht wo ich es deklarieren soll

**MacKP** · 20.08.2009, 12:25

Hallo Swirl,
ohne einen direkten Link zu haben ist so etwas immer schwer.. aber versuch doch mal der Navi ein margin-top zu verpassen...

Viele Grüße
----
Du musst wie gesagt ein Modul machen mit einem Menü (link hast du ja zum Tutorial im Wiki)...
Warum dann nichts kommt kann ich dir so ohne nähere Beschreibung nicht sagen.