Autor | Zpráva | ||
---|---|---|---|
robbie Profil * |
#1 · Zasláno: 31. 5. 2016, 20:50:36
Zdravím a chci se optat, v responsivním menu, po najetí myši :hover nad první položku menu nejsem schopen docílit, aby se červené zvýraznění položky menu zobrazilo hned od zvrchu menu, zustavá me tam nevzhledný kousek y vrchu bloku a nevím, jak se toho zbavit. Přikládám kod menu:
Jestli někdo poradí budu jenom rád, zkoušel jsem menit margin, padding, ale nedaří se mi červený hover efekt zarovnat k vršku bloku menu. Děkuji html: <html> <head> <style> /* normal css */ #head{height:70px; background-color:#CCCCFF; margin-bottom:3px; border-radius:5px; } #head ul{margin: 0 auto; } #head ul li {display: inline; float:left; list-style:none; width: 50px; margin:20px 15px; } #head ul li a{color:white; text-decoration:none;} #head ul li:hover a{color:#CC3333;} /*responsive css menu */ # #head{height:160px; background-color:#CCCCFF; margin:0px auto 2px auto; border-radius:5px; } #head ul li {text-align:center; display:block; float:left; list-style:none; width: 100%; margin:5px 0px; height:22px; } #head ul:last-child li{margin-bottom:0px;} #head ul li a{text-align:center; } #head ul li:hover a{color:white; margin:3px auto;} #head ul li a:hover{background-color:#CC3333; color:white; height:30px; display:block; margin:0px auto; padding:2px auto; </style> </head> <body> <div id="head"> <ul> <li id="first"><a href="#">Service</a></li> <li><a href="#">About</a></li> <li><a href="#">Prizes</a></li> <li><a href="#">Help</a></li> <li><a href="#">Map</a></li> </ul> </div> </html> |
||
Trejpa Profil |
#2 · Zasláno: 31. 5. 2016, 21:08:41
robbie:
Může za to margin na položkách: #head ul li { margin:5px 0px; } Doporučil bych chování změnit: 1) nastavit odkazům display: block rovnou bez :hoveru,
2) nastavit jim výšku a svislý padding nebo line-height 3) položky seznamu maximálně přetypovat na blok bez odrážek, paddingu, marginu a zadané výšky 4) v responzivní verzi zrušit plavání položek seznamu a s tím i výšku seznamu, která se bude přizpůsobovat položkám |
||
juriad Profil |
#3 · Zasláno: 31. 5. 2016, 21:29:39
Teda ty jsi umělec. Polovina toho, co jsi napsal, nedává smysl. Řešil bych to asi takto:
Živá ukázka |
||
Časová prodleva: 8 let
|
0