Seite 1 von 1

Frage zu CSS-Formatierung im Menü aus we_demo

Verfasst: Fr 25. Nov 2005, 14:10
von webst
Hallo,
ich möchte das Menü aus der we_demo-Seite einbauen, was bis jetzt auch super geklappt hat. Jetzt habe ich aber ein Problem mit evtuell notwendigen zweizeiligen Links. Da ja der Link mit CSS als Block definiert ist, der eine feste Höhe (21px) hat.

}

#navContainer ul li a{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFE47B;
display: block;
height: 21px;
line-height: 18px;
padding-left: 22px;
margin-top: 0px;
font-size: 11px;
color: #000000;
text-decoration: none;
font-weight: bold;
background-image: url("../../layoutimg/b_menu.gif"); /* grpfeil normal */
}

Wenn der Link zweizeilig ist, wird im Firefox + Netscape der Linkblock nicht automatisch höher dargestellt.
http://web23.s146.weserver.net/Akademie ... nschen.php


Jetzt habe ich das CSS folgendermaßen angepasst und diese Zeile noch dazugefügt:

}
#navContainer a.zweizeilig:link a.zweizeilig:visited a.zweizeilig:hover {
height: 41px;

}

Der Redakteur soll bei zweizeiligen Links bei Linkattribute einfügen: class="zweizeilig"

Klappt aber nicht, die Linkbox wird nicht höher.

Kann mir jemand einen Tipp geben, wie ich eine Klasse innerhalb eines ID-Selektors vergebe?

Vielen Dank!

Verfasst: Fr 25. Nov 2005, 17:07
von Ralf Pospiech
Hallo,

das "#" am Anfang eines Styles bedeutet ID und bewirkt das diese Klasse einem Container mit dieser ID zugewiesen wird, per class oder style="" lassen sich diese nicht integrieren!

Einfacher: Komplett umbauen!

Neuer Versuch mit #navContainer

Verfasst: Fr 25. Nov 2005, 18:01
von webst
Hallo,
ich habe jetzt mal folgendes probiert:

#navContainer ul li a{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFE47B;
display: block;
line-height: 18px;
padding-left: 22px;
margin-top: 0px;
font-size: 11px;
color: #000000;
text-decoration: none;
font-weight: bold;
background-image: url("../../layoutimg/b_menu.gif"); /* grpfeil normal */
}
a.einzeilig:link#navContainer {
height: 21px;
}
a.zweizeilig:link#navContainer {
height: 41px;
}


Im Firefox + Netscape läuft alles prima, aber diesmal nicht im IE. Er macht horizontale Abstände zwischen die Button. Schaue ich nach einem Befehl, der die Abstände zwischen den Button regelt, was aber bis jetzt auch nicht geklappt hat.


Oder:
Den navContainer weglassen und die Links mit verschiedenen Linkklassen formatieren. Wenn das ginge, warum haben Sie das dann meiner Meinung nach so kompliziert mit id gemacht, um dem Redakteur das eingeben der Linkklasse zu ersparen?

Liege ich da richtig, das Ganze mit Linkklassen zu machen?

oder besser gefragt: Haben Sie noch einen Tipp für mich, worauf ich beim "Umbau" der Linkformatierung achten sollte?

Vielen Dank!