Antworten auf deine Fragen:
Neues Thema erstellen
Status
Für weitere Antworten geschlossen.

Antworten zum Thema „Problem mit Hover im Menü aus Listenpunkten“

ScHn1tz3L

Nicht mehr ganz neu hier

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:

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*/
und das HTML im Body:
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&auml;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:

hubspe

display:schwarzgelb;

AW: Problem mit Hover im Menü aus Listenpunkten

Hallo ,

der Grund warum deine Schrift so irrsinnig weit vom linken Rand weg ist, sind die browserinternen Vorformatierungen.

Definiere in den ersten Zeilen deiner CSS-Datei:
* {
padding:0;
margin:0;
}

Damit werde erstmal alle Abstände auf null gesetzt. Der Sternchen-Selektor
gilt für alles (HTML, body, usw.). Die Abstände für die einzelnen HTML-Elemente müssen dann natürlich ggf. einzeln definiert werden.

Das ist schon deshalb sinnvoll, weil die unterschiedlichen Browser auch unterschiedliche Vorformatierungen haben.
Die Fehlersuche kann da uferlos werden.

Dein CSS-Code könnte so ausschauen:
* {
padding:0;
margin:0;
}

h5 {
padding-left:0.5em;
}

.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-left:1em;
}
ul#submenu li span { /*das span-Element ist nicht relevant in*/
font-weight: bold;
font-size: 1em;
color: black;
}
ul#submenu a { /*die Links mit Padding wegen dem Border*/
padding-left: 0.5em;
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*/
 
W

watzki78

Guest

Hay
hubspe
ich würde sie in einzelne "div" auslagern und in "class" und "id" ansprechen. Sowie mit "visible" und "hidden" arbeiten. "z-index" hilft mit Sicherheit in deinem Problem auch.
 

_schatzi_

KI ist spannend (und gefährlich)

Hallo!

@watzki78:
Und wenn du jetzt auch noch "position:absolute" vorschlägst, dann hast du wirklich ALLE Punkte zusammen, wie man es NICHT machen sollte!!!

Eine Navigation gehört in eine Liste mit Listenelementen; dort haben "div"s nix zu suchen.
"visible" und "hidden" sind hier ebenso überflüssig wie ein "z-index".
 
W

watzki78

Guest

@_schatzi_ überflüssig ist wohl eher Deine Meinung. Was machbar ist und was Du Dir wünschst sind zwei unterschiedliche Paar Schuhe... von denen Dir eines nicht passt ^^.
 

cebito

undefined

Mal abgesehen davon, daß der Thread 7 Jahre alt ist :confused: und deshalb nicht nochmal ausgebuddelt werden sollte. Für 'nen Neuling mit ziemlich wenig Ahnung reißt du hier ganz schön die Klappe auf @watzki78
 
Status
Für weitere Antworten geschlossen.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben