• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

li soll link sein!

B

benbas39

Mitglied
Hallo, ich habe ein Sidebar Menu. Jetzt will ich, dass die ganze <li> ein link ist und nicht nur das <a> Element:

Html-Code:
<div id="sidebar_nav"> <ul> <li><i id="a" class="fa fa-home fa-2x"></i><a class="a" href="#">Home</a></li> <li><i id="b" class="fa fa-user fa-2x"></i><a class="b" href="#">Über Mich</a></li> <li><i id="c" class="fa fa-envelope fa-2x"></i><a class="c" href="#">Website-Anfrage</a></li> <li><i id="d" class="fa fa-users fa-2x"></i><a class="d" href="#">Team</a></li> <li><i id="e" class="fa fa-bars fa-2x"></i><a class="e" href="#">Impressum</a></li> </ul></div> <!-- #sidebar_nav -->

CSS-Code:

#sidebar_left {
position: fixed;float: left;width: 22%;background-color: #222729;height: 100%;}
#sidebar_nav {
width: 100%;margin-top: 100px;background-color: transparent;}
#sidebar_nav ul {
list-style: none;}
#sidebar_nav ul li {
height: 40px;width: 100%;margin-bottom: 20px;padding-top: 3px;padding-bottom: 3px;-webkit-transition: padding-left 0.6s;-webkit-transition:all .9s ease;-moz-transition:all .9s ease;-ms-transition:all .9s ease;transition:all .9s ease;}
#sidebar_nav ul li:hover {
padding-left: 50px;background-color: #222721;}
#sidebar_nav a {
position: absolute;margin-top: 15px;color: #ffffff;}
#sidebar_nav a.a {
margin-left: 106px;}
#sidebar_nav a.b {
margin-left: 66px;}
#sidebar_nav a.c {
margin-left: 32px;}
#sidebar_nav a.d {
margin-left: 105px;}
#sidebar_nav a.e {
margin-left: 76px;}

LG benbas39










 
Werbung:
Dem a- Element via display: inline-/block; zu einem Block Element machen und ihm eine Breite zuweisen :)

Code: 
/*Pseudocode*/

nav li a {

  display: block; /*oder inline-block*/
  width: 10px; /*Zahl anpassen*/

}
 
Werbung:
Gemacht @hannover96xd Musst mal auf die Seite gucken. Irgendwie geht der Link weiter runter als die li und weiter nach rechts:

#sidebar_nav {
width: 100%;margin-top: 100px;background-color: transparent;}
#sidebar_nav ul {
list-style: none;height: 40px;}
#sidebar_nav ul li {
height: 40px !important;width: 100%;margin-bottom: 20px;-webkit-transition: padding-left 0.6s;-webkit-transition:all .9s ease;-moz-transition:all .9s ease;-ms-transition:all .9s ease;transition:all .9s ease;}

#sidebar_nav ul li:hover {
padding-left: 50px;background-color: #222721;}

#sidebar_nav li a {
float: left;height: 40px;margin-top: -23.5px;color: #ffffff;display: block;width: 100%;line-height: 10px;}
#sidebar_nav a.a {
margin-left: 215px;}
#sidebar_nav a.b {
margin-left: 173px;}
#sidebar_nav a.c {
margin-left: 145px;}
#sidebar_nav a.d {
margin-left: 217px;}
#sidebar_nav a.e {
margin-left: 185px;}
 
Werbung:
Werbung:
Bsp:
Wenn man sich ca. 130px außerhalb der Navigation mit der Maus auf gleicher Höhe, wie z. B. "Impressum" befindet, dann wird schon der hover Effekt ausgelöst. Ich schätze mal, dass das nicht beabsichtigt ist?

EDIT:
Benutze mal die Entwicklerkonsole um die Ursache zu finden (Rechtsklick -> Element untersuchen)
 
Ja eben, das ist auch eins meiner Probleme hier ist der Code nochmals, bitte helfe mir. Ich brauche das unbedingt ;-)
#sidebar_nav {
width: 100%;margin-top: 100px;background-color: transparent;}
#sidebar_nav ul {
list-style: none;height: 40px;}
#sidebar_nav ul li {
height: 40px;width: 100%;margin-bottom: 20px;-webkit-transition: padding-left 0.6s;-webkit-transition:all .9s ease;-moz-transition:all .9s ease;-ms-transition:all .9s ease;transition:all .9s ease;}

#sidebar_nav ul li:hover {
padding-left: 50px;background-color: #222721;}

#sidebar_nav li a {
float: left;height: 40px;margin-top: -23.5px;color: #ffffff;display: block;width: 100%;line-height: 10px;}
#sidebar_nav a.a {
margin-left: 215px;}
#sidebar_nav a.b {
margin-left: 173px;}
#sidebar_nav a.c {
margin-left: 145px;}
#sidebar_nav a.d {
margin-left: 217px;}
#sidebar_nav a.e {
margin-left: 185px;}

@hannover96xd
 
Hab das hingekriegt, hab bei
#sidebar_nav li a height und width auf auto gesetzt. Jetzt noch das Problem, dass ebn nur der a link der link ist und nicht die ganze li:
#sidebar_nav{
width: 100%;margin-top: 100px;background-color: transparent;}
#sidebar_navul {
list-style: none;height: 40px;}
#sidebar_navul li {
height: 40px;width: 100%;margin-bottom: 20px;-webkit-transition: padding-left 0.6s;-webkit-transition:all .9s ease;-moz-transition:all .9s ease;-ms-transition:all .9s ease;transition:all .9s ease;}

#sidebar_navul li:hover {
padding-left: 50px;background-color: #222721;}

#sidebar_navli a {
float: left;height: auto;margin-top: -23.5px;color: #ffffff;display: block;width: auto;line-height: 10px;}
#sidebar_nava.a {
margin-left: 215px;}
#sidebar_nava.b {
margin-left: 173px;}
#sidebar_nava.c {
margin-left: 145px;}
#sidebar_nava.d {
margin-left: 217px;}
#sidebar_nava.e {
margin-left: 185px;
 
Werbung:
Werbung:
Ne Frage wie kann ich jetzt den Text z.B Home etc. bearbeiten? Ist ja im gleichen a wie das Icon, das bedeutet wenn ich z.B a { font-size: 10pt;} mache wird auch das Icon kleiner.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben