css datei mit 2 unterschiedlichen menüs

[astrastyle]

hallo,
ich habe ein paar buttons gemacht, die sich mit diesen script beim mausover ändern

<style type="text/css">
<!--
a1 {
display:block;
color:#ffffff;
background-color:#000000;
width:120px;
padding:1px;
font-size:14px;
font-family:Verdana;
font-weight:bold;
text-decoration:none;
text-align:center;
margin:1px;
border-top:1px solid #CAA8A8;
border-left:solid 1px #CAA8A8;
border-bottom:groove 1px #000000;
border-right:groove 1px #000000;
background-image:url(styles/labelover3.gif);
}
a1:hover {
display:block;
color:#420000;
border-top:1px groove #000000;
border-left:groove 1px #ffffff;
border-bottom:groove 1px #CAA8A8;
border-right:groove 1px #CAA8A8;
background-color:#000000;
background-image:url(styles/label3.gif);
}
-->
</style>

ich möchte aber diese buttons groß darstellen und 1 mal kleiner, geht das irgendwie? vom design sollte alles gleich groß sein. irgendwie geht das doch mit "class" ?

vielleicht könnte mir jemanden den code mal schreiben bitte

[wahsaga]

Re: css datei mit 2 unterschiedlichen menüs

Original geschrieben von astrastyle
a1 { ... }
a1:hover { ... }

Es gibt in HTML kein Element mit dem Namen a1.

ich möchte aber diese buttons groß darstellen und 1 mal kleiner, geht das irgendwie? vom design sollte alles gleich groß sein.

Gleich groß, aber unterschiedlich ... was denn jetzt?

Bitte formuliere deine Frage erst mal vernünftig und nachvollziehbar.

[astrastyle]

MENÜ I

<style type="text/css">
<!--
a {
display:block;
color:#ffffff;
background-color:#000000;
width:120px;
padding:1px;
font-size:14px;
font-family:Verdana;
font-weight:bold;
text-decoration:none;
text-align:center;
margin:1px;
border-top:1px solid #CAA8A8;
border-left:solid 1px #CAA8A8;
border-bottom:groove 1px #000000;
border-right:groove 1px #000000;
background-image:url(styles/labelover3.gif);
}
a:hover {
display:block;
color:#420000;
border-top:1px groove #000000;
border-left:groove 1px #ffffff;
border-bottom:groove 1px #CAA8A8;
border-right:groove 1px #CAA8A8;
background-color:#000000;
background-image:url(styles/label3.gif);
}
-->
</style>

--------------------------------------------------------------------------------


MENÜ II

<style type="text/css">
<!--
a {
display:block;
color:#ffffff;
background-color:#000000;
width:120px;
padding:1px;
font-size:14px;
font-family:Verdana;
font-weight:bold;
text-decoration:none;
text-align:center;
margin:1px;
border-top:1px solid #CAA8A8;
border-left:solid 1px #CAA8A8;
border-bottom:groove 1px #000000;
border-right:groove 1px #000000;
background-image:url(styles/labelover3.gif);
}
a2:hover {
display:block;
color:#420000;
border-top:1px groove #000000;
border-left:groove 1px #ffffff;
border-bottom:groove 1px #CAA8A8;
border-right:groove 1px #CAA8A8;
background-color:#000000;
background-image:url(styles/label3.gif);
}
-->
</style>


ich brauche eine .css datei in der beide Menüs sind.
I + II
beim Menü II sollt die Schrift kleiner sein und die Zellengrößte der Tabelle
(das ist kein Problem)


aber wie bekomme ich beide Menüs in eine css datei?

wie weiße ich dem dazugehörigen Link den style für MENÜ I oder II zu??? Wie weiß der Link welchen style er nehmen soll?

wie schaut die .css datei aus, kann mir das jemand sagen bitte?

[wahsaga]

http://de.selfhtml.org/navigation/fa..._verweisfarben