Liste "springt" zwischen Aktiv/Normal

Jana

Hallo ihr,

ich lasse ein Menü über TypoScript erzeugen. Die Formatierung hab ich in einer CSS-Datei.
Leider "springt" der angeklickte Link immer ein paar Pixel nach vorn, wenn man ihn anklickt. (siehe hier: http://www.hamburger-logistiktage.de/114.0.html)

Was ist das Problem?? Kann mir jemand helfen?

Gruß,
Jana

CSS:

#left ul {
list-style: none;
padding: 0 12px;
margin: 0;
}

#left ul a, #left ul .cur {
display: block;
line-height: 15px;
text-decoration: none;
background-color: #FFFFFF;
padding: 0 12px;
margin: 0;
color: #4E4E4E;
}

#left ul a:hover, #left ul .act a {
color: #000000;
background-color: #FFFFFF;
padding: 0 12px;
margin: 0;
}

#left li {
padding: 0 12px;
margin: 0;
}

Dodo

meinst du, dass der link etwas nach links geht?
bzw: wie soll es denn aussehen?

Unregistriert

Ja, genau... ich möchte, dass die Hauptmenüpunkte untereinander bleiben... und die Untermenüpunkte halt n Stück eingerückt sind...

Dodo

Code

#left ul {
list-style: none;
padding-left: 12px;
margin: 0;
}




#left ul a, #left ul .cur {
display: block;
line-height: 15px;
text-decoration: none;
background-color: #FFFFFF;
margin: 0;
color: #4E4E4E;
}




#left ul a:hover, #left ul .act a {
color: #000000;
background-color: #FFFFFF;
margin: 0;
}




#left li {
margin: 0;
}

Alles anzeigen

Jana

Super - funktioniert wunderbar

Danke!

Dodo

Bitteschön

Unregistriert

Mh... jetzt klebt immer der vorige Menüeintrag an dem nächsten (z.B. wenn man auf Lager klickt)..

Und wenn man auf Logistikkonzepte klickt, klebt Arbeitswirtschaft auch da direkt dran - danach ist aber viel zu viel Platz.

Welches sind die Einträge mit denen ich das ädern kann?

Dodo

Bau das mal ein und spiel dich mit den beiden Abständen, bis es dir gefällt.

CSS

#left ul {
list-style: none;
padding: 0px;
padding-left: 12px !important; /*Abstand der Listen-Ebenen nach links */
margin: 0;
}




#left ul a, #left ul .cur {
display: block;
line-height: 15px;
text-decoration: none;
background-color: #FFFFFF;
margin: 0;
padding: 0px;
color: #4E4E4E;
}




#left ul a:hover, #left ul .act a {
color: #000000;
background-color: #FFFFFF;
margin: 0;
padding: 0px;
}




#left li {
margin: 0;
padding: 0px;
padding-top: 5px !important; /* Abstand der Listen-Elemente nach oben */
}

Alles anzeigen

Dodo

Achja:

http://validator.w3.org/check?uri=http…=Inline&group=0

Jana

Oki - das hab ich jetzt auch.

Danke - die <br> waren noch vom ausprobieren übrig geblieben..

Irgendwie macht mich das Menü irre *g
Wenn ich jetzt auf einen Unterpunkt klicke, verändert sich der Abstand zu seinem Überpunkt noch - das soll auch gleich bleiben - was muss ich tun?

Und ich würd gern die Unterpunkte eingerückt haben... hab versucht mit padding-left dem zweiten <ul> eine Klasse zuzuweisen... aber das macht er irgendwie nicht

Sorry, das ich so viele Fragen stell. Vielleicht sitz ich da auch einfach schon zu lange dran und hab n Brett vorm Kopf ..

Dodo

gib mal wieder meinen style rein und beschrib dann bitte, was genau das problem ist.
ich verstehs grad nicht so ganz

Jana

--> Problem 1
Also - wenn du auf Logistikkonzepte klickst - und dann auf Arbeitswirtschaft.
Bei dem Klick ändert sich der Abstand von Logistikkonzepte zu Arbeitswirtschaft. Wieso macht er das?
Sieht nicht hübsch aus

--> Problem 2
Wie kann ich die Unterpunkte (also z.B. Arbeitswirtschaft) einrücken?

Dodo

CSS

#left ul {
list-style: none;
padding: 0px;
padding-left: 12px !important; /*Abstand der Listen-Ebenen nach links */
margin: 0;
}




#left ul a, #left ul .cur {
display: block;
line-height: 15px;
text-decoration: none;
background-color: #FFFFFF;
margin: 0;
padding: 0px;
color: #4E4E4E;
}




#left ul a:hover, #left ul .act a {
color: #000000;
background-color: #FFFFFF;
margin: 0;
padding: 0px;
}




#left li {
margin: 0;
padding: 0px;
padding-top: 5px !important; /* Abstand der Listen-Elemente nach oben */
}

Alles anzeigen

Problem 1: Das liegt daran:

HTML

<li class="act"><li class="cur">Arbeitswirtschaft</li></li>

mach das mal zu dem:

HTML

<li class="act cur">Arbeitswirtschaft</li>

Problem 2: Steht doch eh da

CSS

padding-left: 12px !important; /*Abstand der Listen-Ebenen nach links */

Tags