Unsichtbarer Rahmen

qsrs

Erfahrenes Mitglied
Hallo,

ich bin mir nicht sicher, ob der im Titel genannte Ansatz der richtige Weg ist, um mein Problem zu lösen. Ich habe folgendes CSS:

Code:
.menu_link {
	margin-bottom:5px;
	padding:4px;
	padding-left:20px;
	color: #000;
	text-decoration:none;
	text-align:left;
	display: block;
	font-weight:bold;
	background-repeat:repeat-x;
}
.menu_link:hover {
	border: 1px solid #bfcdd7;
	background: url("../media/images/bg_menu_link.png");
	background-repeat:repeat-x;
}

Dies erzeugt bei einem Link eine Art Box, welche für ein Menü geeignet ist. Im nicht aktiven Zusatand soll aber kein Rahmen, sondern nur der Text angezeigt werden. Im o.g. Beispiel springt nun die Schrift, da ich den Rahmen im nicht aktiven Zustand ja nicht habe. Ich habe schon versucht mit padding zu arbeiten, allerdings nicht mit dem gewünschten Ergebnis.

Kann man den Rahmen erzeugen, jedoch ohne ihn anzuzeigen bzw. gibt es hier einen anderen Lösungsansatz?
 
Du könntest die border-color gleich der background-color machen dann hättest du deinen unsichtbaren Rahmen.

Oder du machst folgendes
CSS:
.menu_link:hover {
    border: 1px solid #bfcdd7;
    background: url("../media/images/bg_menu_link.png");
    background-repeat:repeat-x;
    padding-top:3px;
    padding-left:19px;
}
 
Zurück