html - Navigation bar extended clickable area -
i've been playing around html , css , i've got problem. how can make padding left-right have link property too?
<div class="baranavigatie"> <ul class="lista"> <li><a href="default.html">bine ati venit!</a></li> <li><a href="cinesunt.html">cine sunt?</a></li> <li><a href="ceofer.html">ce ofer?</a></li> <li><a href="evenimente.html">evenimente</a></li> <li><a href="contact.html">contact</a></li> </ul> </div>
^a part of html code^
li{ font-size:25px; display:inline; padding-left:40px; padding-right:40px; } .baranavigatie{ height:33px; background-color:blue; text-align:center; } li a{ text-decoration:none; color:white; font-weight:bold; font-family: 'avant garde', avantgarde, 'century gothic', centurygothic, applegothic, sans-serif; } li:hover{ background-color:#6a92ff; }
^css^
sorry bad english also.
easy - apply padding-left
, padding-right
<a>
element instead of <li>
. the <a>
tag creates clickable link.
try this:
li { font-size:25px; display:inline; } .baranavigatie { height:33px; background-color:blue; text-align:center; } li { padding-left:40px; padding-right:40px; text-decoration:none; color:white; font-weight:bold; font-family: 'avant garde', avantgarde, 'century gothic', centurygothic, applegothic, sans-serif; } li:hover { background-color:#6a92ff; }
Comments
Post a Comment