html - Why are the links in my footer including the margin-right? -
i practicing html , css skills using notepad++ , have ran problem when adding couple of links footer. problem having each link including margin-right value of 15px (i.e. white space between each link can clicked on). want able click on words direct me particular page.
here html code footer:
<body> <div id="footer"> <div id="footerlinks"> <a href="index.html"> <span style="color: #ffffcc"> <p class="footerlink"> home </p> </span> </a> <a href="about.html"> <p class="footerlink"> </p> </a> <a href="rooms.html"> <p class="footerlink"> rooms </p> </a> <a href="divesite.html"> <p class="footerlink"> dive site </p> </a> <a href="food.html"> <p class="footerlink"> food </p> </a> <a href="news.html"> <p class="footerlink"> news </p> </a> <a href="contact.html"> <p class="footerlink"> contact </p> </a> </div> </div> </body> here css footer:
#footer { width: 100%; height: 50px; background-color: #999999; border-bottom: 1px solid black; padding-right: 20px; padding-left: 20px; clear: both; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #footerlinks { height: 100%; line-height: 45px; display: inline-block; float: left; } #footerlinks { color: #333333; } #footerlinks a:link { text-decoration: none; } #footerlinks a:hover { color: #ffffcc; } .footerlink { font-size: 14px; vertical-align: center; margin-right: 15px; display: inline; } here jsfiddle - https://jsfiddle.net/vu4qg17c/2/
i have included necessary parts of html , css code in jsfiddle. thank in advance.
instead of
<a href="about.html"> <p class="footerlink"> </p> </a> reverse position of <a> , <p>
<p class="footerlink"> <a href="about.html"> </a> </p> do same in others.
writing <a> before <p> makes whole<p> link. and, <p> has default padding, area without text becomes clickable.
Comments
Post a Comment