Wie eine Box um einen Link?

[Fleck06]

Hallo,

ich möchte ein Menü, in dem die Links in einer Box sind: Sprich eine Tabelle mit Rahmen.
Nun möchte ich beim MouseOver eine Farbänderung der Box!

Wie mache ich das Ganze! Bitte genau! thx

 

[Sven Mintel]

gebe dem Link per CSS das Format display:block und regle das mit dem mouseover dann ebenfalls per CSS über das Pseudoformat a:hover

 

[Fleck06]

Kannst du mal ein Beispiel posten? Wenn ich das mache kommt eine riesige rechteckige Box mit einer großen Länge ...

 

[Maik]

Dann weise dem Link eine feste Breite zu:

a:link, a:visited {
display: block;
width: 150px;
background: #dfdfdf;
text-decoration: none;
color: #000;
}

a:hover {
background: #000;
color: #fff;
}

Der Thread wandert ins CSS-Board.

 

[Fleck06]

Ich habe es nun folgender maßen gemacht:

a.m:link    {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #dfdfdf;}

a.m:visited {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #dfdfdf;}

a.m:hover   {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #FF0000;}

Und jetzt ordnet er alle Links (die vorher nebeneinander waren) untereinander...

Ich möchte sie pixelgenau nebeneinander haben mit einem 1 Pixel Border!

Wie muss ich das dazu machen?

 

[Maik]

In diesem Fall benötigen die Links zum einen die float- und zum anderen die border-Eigenschaft.

 

[Fleck06]

Das funktioniert so alles nicht...

Hier der HTML Code (aus einer Template):

                <a href="%[LINK_HOME]%" class=m>Home</a>
                  |   <a href="%[LINK_1%" class=m>Menu 2</a>
                %[MENU_3]%
                %[MENU_4]%
                %[MENU_5]%
                %[MENU_6]%
                %[MENU_7]%
                %[MENU_8]%
                 |   <a href="menu_9.php" class=m>Menu 9</a>

Und hier der extern ausgelagerte CSS-Code:

a.m2:link    {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #dfdfdf; float:left; border:medium #000066;}

a.m2:visited {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #dfdfdf;
float:left; border:medium #000066;}

a.m2:hover   {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #FF0000;
float:left; border:medium #000066;}

 

[Maik]

Wenn du den fehlenden Rahmen meinst, dann notiere den Rahmentyp in der border-Eigenschaft.

border: medium solid #000066;

Ansonsten überprüfe auch mal die unterschiedlich lautenden Klassennamen im CSS- und HTML-Code.

 

[Fleck06]

Ich habe es jetzt folgender maßen gemacht:

Hier der HTML-Code:

<a href="menu_1.php" class="m2">Menu 1</a>
<a href="menu_2.php" class="m2">Menu 2</a>
<a href="menu_3.php" class="m2">Menu 3</a>
<a href="menu_4.php" class="m2">Menu 4</a>
<a href="menu_5.php" class="m2">Menu 5</a>
<a href="menu_6.php" class="m2">Menu 6</a>
<a href="menu_7.php" class="m2">Menu 7</a>

Hier der CSS-Code:

//

a.m2:link    {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #dfdfdf; float:left; border: 1px; border-left:medium  solid #000066; border-bottom: medium solid #000066; border-top:medium solid #000066;}

a.m2:visited {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #dfdfdf;
float:left;  border: 1px; border-left:medium  solid #000066; border-bottom: medium solid #000066; border-top:medium solid #000066;}

a.m2:hover   {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #FF0000;
float:left;  border: 1px; border-left:medium  solid #000066; border-bottom: medium solid #000066; border-top:medium solid #000066;}

//

Ich möchte das der Border dieser Blocks 1px beträgt, weiß; und dann soll der Link in diesem Block noch zentriert sein (Mitte: links/rechts & oben/unten), ganz wichtig ist auch, dass der Block genauso breit ist wie die Länge des Textes, nur 2 px breiter...

Da muss man ja studiert haben Bitte gebt mir keinen Link, wo ich selber gucken muss! Ich will nur die 3 Sachen wissen, nicht CSS lernen...

 

[Maik]

• Weißer Rahmen mit 1px Stärke:

border: 1px solid #ffffff;

• Horizontale und vertikale Zentrierung für den Linktext:

text-align: center;
line-height: 29px; /* anstelle von height:29px; */

• Horizontaler Innenabstand:

padding: 0 2px; /* anstelle von width:100px */

Etwas mehr Eigeninitiative und die Recherche auf den entsprechenden SELFHTML-Seiten wäre aber schon angebracht.