Hallo zusammen,
ich bastel gerade eine kleine Seite und habe in der Navigation in HTML eine Liste angelegt, bei der die <li>-Elemente mit "list-style: none" die Navigation darstellen.
Nun möchte ich gerne als hover-effekt einen grauen Rahmen nur links vom Listenpunkt haben (also "border-left: 2px solid #CCCCCC"), der allerdings ca. 2em Abstand hat.
Dadurch, dass die (list-style)Listenpunkte aber nur unsichtbar gemacht wurden, hat die Schrift in der Navigation aber automatisch einen Abstand zum linken Rand, und wenn ich ihr dann noch ein Padding-left von 2em gebe, um dem Hover-Effekt Abstand zu geben, ist die Schrift irrsinnig weit vom linken Rand entfernt.
Nun meine Frage:
Wie kann ich den Rahmen von 2px LINKS vom "unsichtbaren Listenpunkt" beim Hover darstellen, oder kennt jemand vielleicht eine ganz andere Möglichkeit?
Falls noch etwas unklar ist, sagt es bitte.
Viele Grüße im Vorraus,
Schnitzel
Hier mal das CSS:
und das HTML im Body:
ich bastel gerade eine kleine Seite und habe in der Navigation in HTML eine Liste angelegt, bei der die <li>-Elemente mit "list-style: none" die Navigation darstellen.
Nun möchte ich gerne als hover-effekt einen grauen Rahmen nur links vom Listenpunkt haben (also "border-left: 2px solid #CCCCCC"), der allerdings ca. 2em Abstand hat.
Dadurch, dass die (list-style)Listenpunkte aber nur unsichtbar gemacht wurden, hat die Schrift in der Navigation aber automatisch einen Abstand zum linken Rand, und wenn ich ihr dann noch ein Padding-left von 2em gebe, um dem Hover-Effekt Abstand zu geben, ist die Schrift irrsinnig weit vom linken Rand entfernt.
Nun meine Frage:
Wie kann ich den Rahmen von 2px LINKS vom "unsichtbaren Listenpunkt" beim Hover darstellen, oder kennt jemand vielleicht eine ganz andere Möglichkeit?
Falls noch etwas unklar ist, sagt es bitte.
Viele Grüße im Vorraus,
Schnitzel
Hier mal das CSS:
Code:
.box { /*der Kasten außenrum(gefloatet)*/
float: left;
background-color: #80C4D8;
width: 12em;
padding: 0.8em 0 0.5em;
margin: 0;
}
ul#submenu li{ /*die Listenpunkte*/
text-align: left;
list-style: none;
padding: 0;
margin: 0;
}
ul#submenu li span { /*das span-Element ist nicht relevant in*/
padding-left: 2em; /*Bezug auf diese Frage*/
font-weight: bold;
font-size: 1em;
color: black;
}
ul#submenu a { /*die Links mit Padding wegen dem Border*/
padding-left: 2em;
font-weight: bold;
font-size: 1em;
text-decoration: none;
color: white;
}
ul#submenu a:link {
color: white;
}
ul#submenu a:visited {
color: white;
}
ul#submenu a:hover {
color: #ff6600; border-left: 3px solid #CCCCCC; /*der Border-Hover*/
HTML:
<body>
<div id="header">
</div>
<div class="box">
<h5><b class="orange">.</b>navigation</h5>
<ul id="submenu">
<li><span><b>Home</b></span></li>
<li><a href="events.html"><b>Events</b></a></li>
<li><a href="galerie.html"><b>Galerie</b></a></li>
<li><a href="gaestebuch.html"><b>Gästebuch</b></a></li>
<li><a href="forum.html"><b>Forum</b></a></li>
<li><a href="kontakt.html"><b>Kontakt</b></a></li>
</ul>
</div>
</body>
Zuletzt bearbeitet von einem Moderator: