✔ Menu mehrfarbig

[dr-stein]

Hallo liebe TUTORIALSler,

ich möchte gerne eine Navigation machen welche bunt ist. Das bedeutet, dass ich z.B. möchte dass der Über uns-Button rot ist, der Kindergarten-button blau ist, usw. Hat jemand da ne Idee?

Hier der angefangene Code:

<link rel="stylesheet" type="text/css" href="test.css">

<div id="content_main">

  <div id="nav_main">
    <ul>
        <li><a href="#" class="active">Über uns</a></li>
        <li><a href="#">Kindergarten</a></li>
        <li><a href="#">Friedhof</a></li>
        <li><a href="#">Musik / Chor</a></li>
        <li><a href="#">Jugendarbeit</a></li>
        <li><a href="#">Kontakt / Impressum</a></li>
    </ul>

  </div>

</div>

body {
  background-color: white;
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: black;
  font-size: 12px;
     }
     
#content_main {
  background-color: white;
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: black;
  font-size: 12px;
  
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 50px;
                  }
                  
#nav_main {
  background-color: white;
  position: absolute;
    top: 100px;
    right: 300px;
          }
          
#nav_main ul {

}
#nav_main ul li {
    float: left;
        border-top: 6px solid grey;
    display:inline;     /* Fix für IE Doubled Float Margin Bug    */ 
    margin: 0px;
        margin-left:4px;
    padding: 0px;
    font-size: 1em;
    line-height: 1em;
    list-style-type: none;
    
}
#nav_main ul li a {
    display:block;
    width: auto;
    font-size: .855em !important;
    letter-spacing:.1755em;
    background: transparent;
    text-decoration: none;
    color: #fff;
    margin: 0;
    padding: 1em 0.24em 0.24em 0.24em;
    border-top:12px solid blue;
}
#nav_main ul li a:hover {
    background: grey;
    color: #fff;
    text-decoration: none;
}

#nav_main ul li a.active {
    display:block;
    width: auto;
    font-size: .855em !important;
    letter-spacing:.1755em;
    background: grey;
    text-decoration: none;
    color: #fff;
    margin: 0;
    padding: 1em 0.24em 0.24em 0.24em;
    border-top:12px solid blue;
}
#nav_main ul li a.active:hover {
    background: grey;
    color: #fff;
    text-decoration: none;
}

#nav_main ul li#current { 
    border-top:3px solid #f5f6f1; 
    border-bottom:0px;    
}
#nav_main ul li#current a,
#nav_main ul li#current a:hover {
    color: #fff;
    background: transparent;
    text-decoration: none;
}
}

Danke im Vorraus,

Eike

 

[Maik]

Hat jemand da ne Idee?

Jo, die hatte ich schon vor über zwei Jahren ;-)

Webmaster FAQ -> CSS Wie können Links in einer Seite unterschiedliche Schriftfarben erhalten?

mfg Maik

 

[dr-stein]

Hey Maik,

das ist eigendlich nicht schlecht, das habe ich auch schon überlegt. Allerdings habe ich ein Problem (habe ich TROTTEL nicht erwähnt), dass soll mit Joomla laufen. Hast Du da auch eine Idee, wie ich Joomla das beibringe?

Eike

 

[Maik]

Wo ist denn da in Joomla die Barriere, dein Vorhaben umzusetzen? Kenn mich darin überhaupt nicht aus.

mfg Maik

 

[Maik]

Also wie sich das grundsätzlich mit CSS technisch umsetzen lässt, hast du ja meinem "Webmaster FAQ"-Artikel entnehmen können.

Da du deinem letzten Beitrag zufolge, scheinbar auch im Backend von Joomla etwas vorzunehmen / einzurichten hast, leite ich dein Thema mit dieser CMS-spezifischen Frage mal besser in unser CMS-Forum weiter.

mfg Maik

 

[dr-stein]

Ich habe es hinbekommen, Du hattest recht!

 

[Maik]

Womit genau hatte ich Recht?

Und wie hast du es nun in Joomla umgesetzt bekommen?

mfg Maik