| 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: 9 let
|
|||
0