mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 14:13 Benutzername: Passwort: Auto-Login

Thema: CSS Menüproblem vom 18.02.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> CSS Menüproblem
Autor Nachricht
DaniH
Threadersteller

Dabei seit: 19.08.2005
Ort: Moos-Weiler
Alter: 41
Geschlecht: Männlich
Verfasst Do 18.02.2010 11:07
Titel

CSS Menüproblem

Antworten mit Zitat Zum Seitenanfang

Ich versuche schon seit Tagen ein CSS Menü zu erstellen, allerdings bekomme ich es nicht so hin wie ich es mir vorstelle ...

Es wird unterschieden zwischen verschiedenen ebenen, und zwischen aktiv und Passiv.

Leider wird das hintergrund bild horizontal und vertikal wiederholt. Vor dem Text (ich habe den Text 10px nach links verschoben) wird das Bild angezeigt und bei dem Text wird es erneut angezeigt.

Code:

<div class="menue_links">
<ul class="rex-navi1">
  <li id="rex-article-29" class="rex-normal"><a href="29-0-Buecher.html">Bücher</a></li>
  <li id="rex-article-94" class="rex-active"><a class="rex-active" href="94-0-Kategorie+1.html">Kategorie 1</a>

    <ul class="rex-navi2">
      <li id="rex-article-95" class="rex-current"><a class="rex-current" href="95-0-Kategorie+2.html">Kategorie 2</a></li>
    </ul>
  </li>
</ul>


Der CSS Code sieht so aus:
Code:

/* Navigation links */
.rex-navi1 {
   list-style-type:decimal;
   list-style:none;
   padding-left: 0px;
   margin-left: 0em;
}
.rex-navi1 li {
   line-height: 32px;
   display: block;
   padding-left:12px;
   background: url(../images/navigation/bg_passiv.gif) 0 0px;
   background-repeat: repeat-y;
}
.rex-navi1 .rex-active {
   line-height: 32px;
   display: block;
   font-weight: bold;
   background-repeat: none;
   background: url(../images/navigation/bg_aktiv.gif) 0 0px;
}
.rex-navi1 .rex-normal {
   line-height: 32px;
   display: block;
   font-size: 10pt;
}
.rex-navi2 li {
   line-height: 32px;
   display: block;
   background: none;
}
.rex-navi2 {
   list-style-type: none;
   padding-left: 0px;
   margin-left: 0em;
   font-weight:normal;
   background-image: none;
   background-color: #ffffff;
}
.rex-navi2 .rex-active {
   line-height: 32px;
   display: block;
   font-weight: bold;
   background: none;
}
.rex-navi2 li {
   line-height: 32px;
}
.rex-navi3 {
   list-style-type: none;
   padding-left: 10px;
   margin-left: 0em;
   font-weight: normal;
   background-image: none;
   background-color: #ffffff;
}
.rex-navi3 li {
   line-height: 32px;
}
.rex-current { /* aktuelles Objekt */
   font-weight: bold;
}


Hat mir jemand ein Tipp, wie ich das verhindern kann?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
emorikaner

Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 18.02.2010 11:50
Titel

Antworten mit Zitat Zum Seitenanfang

kannst du das vlt. mal online stellen?
Probiermal für background-repeat statt "none", "no-repeat" zu nehmen.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
DaniH
Threadersteller

Dabei seit: 19.08.2005
Ort: Moos-Weiler
Alter: 41
Geschlecht: Männlich
Verfasst Mo 22.02.2010 10:43
Titel

Antworten mit Zitat Zum Seitenanfang

Ich glaube ich habe gerade das Problem gefunden.

das LI element wird mittels "class=rex-active" als aktives Element gesteuert.
Ebenfalls wird aber das A element über das gleiche "class=rex-active" gesteuert.

Ich wiederhole also die Hintergrund grafik selbst.

Nun habe ich versucht im CSS diese 2 Elemente zu trennen:

Code:
.rex-active {
   line-height: 24px;
   display: block;
   font-weight: bold;
   background: url(../images/navigation/bg_aktiv.gif) 0 0px;
   background-repeat:no-repeat;
   background-position:0px 0px;
}
a .rex-active {
   font-weight: bold;
   background: none;
   font-size: 36px;
}


Aber bringt weiterhin 2x das Hintergrundbild.


  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mo 22.02.2010 10:50
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
.rex-active {
   line-height: 24px;
   display: block;
   font-weight: bold;
   background: url(../images/navigation/bg_aktiv.gif) no-repeat 0 0;
}
.rex-active > a {
   font-weight: bold;
   background: none;
   font-size: 36px;
}


Zuletzt bearbeitet von sahnemuh am Mo 22.02.2010 10:50, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
DaniH
Threadersteller

Dabei seit: 19.08.2005
Ort: Moos-Weiler
Alter: 41
Geschlecht: Männlich
Verfasst Mo 22.02.2010 11:05
Titel

Antworten mit Zitat Zum Seitenanfang

Besten Dank sahnemuh!!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.