Menu
I have got the look I desire with my css. A centered <p> and <div> one on top of the other and they are both wrapped in <a> tags.
Now my issue is that the <a> tags go for the entire width of the page, I just want to be able to click on the link where the actual content is.
example link: https://jsfiddle.net/vinko_k_design/dge4fx2z/
502
css: <style> li { width: 110px; height: 42px; background-color: black; } li a { width: 32px; height: 32px; color: white; } </style> html page: <li><a href="#">write something</a></li> you need to set anchor tag's display property as block :: 'display:block;' , then only it will accept values of height and width.
You should set body and html to position:fixed; , and then set right: , left: , top: , and bottom: to 0; . That way, even if content overflows it will not extend past the limits of the viewport.
Answer: Use the CSS display Property You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
Put the anchor tags inside the p tag.
<p class="page-nav"><a href="#map">Check out our Map</a></p>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
