CSS Problem mit <ul>

Dominic

Well-known member
ID: 38
L
24 April 2006
577
27
Ich habe in meinem Dokument eine Liste folgendermaßen definiert:

PHP:
<ul class="menuguide"><li class="item62">

In der CSS dann so:
PHP:
.menuguide ul{list-style-image:none; list-style-type:none; margin-left:0px;font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #ffffff; text-decoration:none;}

Leider funktioniert das nicht - kann mir jemand erklären warum. Bin echt am verzweifeln und versuche schon seit 1 Stunde dann hinzubekommen :-?
 
Die Textformatierung musst du dem <li>-Tag geben.

...oder was funktioniert nicht ? Installier dir für Firefox die WebDeveloper-Erweiterung. Damit siehst du, welches Element welche Formatierung gemäß welcher CSS-Regeln besitzt.


edit:
Das muss ja auch ul.menuguide heißen ;)
 
Danke für Die Hilfe. Leider funktioniert es noch immer nicht so ganz wie ich mir das vorstelle :-?

Vielleicht könnt Ihr Euch die Seite mal schnell anschauen:

https://www.london-transport.de/joomla

Das obere Menü (mit dem roten Hintergrund) ist korrekt formatiert. DAs Menü darunter soll einfach nur mit etwas kleinerer schwarzer Schrift ohne Einrückung formatiert werden.
 
HTML:
#menuguide ul {font-family: Arial, Helvetica, sans-serif; font-size: 8px;}
Ändere das mal so, wie es theHacker bereits sagte.

Also:

HTML:
ul .menuguide {font-family: Arial, Helvetica, sans-serif; font-size: 8px;}

Und dann natürlich anstelle des 'class' die 'id' verwenden ;)
 
Ich habs jetzt so geändert:

PHP:
ul .menuguide {font-family: Arial, Helvetica, sans-serif; font-size: 8px;}

Auf den HTML-Code habe ich leider keinen Einfluss, da Joomla den erzeugt. So müsste es aber doch gehen:

PHP:
<div id="menuguide"><ul class="menuguide">
 
Code:
[FONT=Courier New]ul.menuguide
  [COLOR=Red][B]|[/B][/COLOR][/FONT]
Kein Leerzeichen !
 
Code:
#mainguide ul  li {
....
}
und nimm mal die beiden klassen in ul und li raus, denn mainguide taucht ja nur einmal auf.
 
Als erstes mal der td class="tabelle_grau_middle" eine width verpassen, wobei das warscheinlich nicht so wichtig ist. Dann deiner ul einmal padding: 0; und margin:0; verpassen, ich habe jetzt zwar nicht nachgeschaut aber das sieht stark danach aus, das Du in den CSS nicht am anfang irgendwie sowas stehen hast:
Code:
* { padding: 0; margin: 0; }

Sowas mache ich immer um solche Fehler auszuschließen.
 
  1. header, menue_banner margin left: -370px?!? so zentriert man kein layout. schmeiss den kram raus - genauso wie in dem fall die absoluten positionsangaben. mach um dein layout noch ein div id="wrapper" und geb dem dann: margin: 0 auto; so sind die abstände links uns rechts aussen auf "auto" und demnach so weit wie es geht. dann dem wrapper nur noch ne feste breite geben mit width: 760px; in deinem fall und schwupps isses sauber zentriert.
  2. div id="punkte" ist nicht geschlossen.
  3. lass den kram mit dieser tabelle um deine navi. brauchst du auch nicht.
  4. Anstelle dessen dann folgende Geschichte übertragen:
    HTML:
    <style>
    #menu	{width: 165px; background:##E0E0E0;}
    #menu ul {display:inline; list-style-type: none;}
    	#menu li {border: 1px dashed #A7A7A7; padding:5px; margin:4px 0pt 4px 10px; background:#EEEEEE;}
    
    .redbottom	{width: 165px; height: 15px; background:#FF0000;}
    
    </style>
    
    </head>
    
    <body>
    <div id="menu">
        <ul>
            <li>fahrkarten-a-tarife</li>
            <li>fahrkarten-a-tarife</li>
            <li>fahrkarten-a-tarife</li>
            <li>fahrkarten-a-tarife</li>
            <li>fahrkarten-a-tarife</li>
        </ul>
    </div>
    <div class="redbottom"> </div>
    
    
    </body>
    </html>

so müsste das hinhauen. active und mouseovergeschichten dann einfach noch zb. mit der zusatzangabe:
HTML:
	#menu li a,
	#menu li a:active {color:color:#FF0000;}
	#menu li a:hover  {color:color:#00FF00;}
deklarieren. mit den entsprechenden zusatzangaben wirst du dann auch keine probleme mehr haben die schriftgröße einzustellen.

Viel Erfolg. ;)
 
Okay. Ich glaube ich mache es noch einmal komplett neu.

Da ich es nicht selbst umgesetzt hatte ist es für mich auch nicht besonders übersichtlich.

Ich poste dann noch mal den Link, wenn es fertig ist - dann könnt Ihr es Euch noch mal kurz anschauen.
 

also ich benutze IE6... ist es gewollt, dass der Text nicht markierbar ist und dass unter dem Text ein Link "versteckt" ist, der zum Forum führt?
 
Da hatte ich noch ein </a> vergessen.

Jetzt sollte es passen. Vielen Dank für den Hinweis.
 
gern. wenn du dich jetzt noch an mein code-beispiel hälst was die styles betrifft hast du auch wieder die schicken rahmen drum ;)

ach ja: pack mal noch die script geschichten zwischen die head-tags - die haben nicht wirklich was dort unten zu suchen;)

Der schicke Rahmen hat mir nun nicht mehr ganz so gut gefallen - deswegen ist er weggefallen :)

Die Script-Geschichte kam von einem fehlerhaften Joomla-Modul, dass da einfach den Google Analytics Code hinsetzt, obwohl ein Teil davon in den Header gehört. Ich habe das Modul nun deaktiviert.