html - Why isn't this anchor tag taking up 100% of the available space of its parent div? -
my understanding leads me believe putting <a>
display:block;
css property inside of <div>
supposed cause entire div "become" link (ie anywhere hover in div, considered link, because link takes 100% height , width).
that behavior doesn't seem working in example below. if you'd rather inspect element
, poke around live code, can view site @: http://shayla.phasesolutions.ca/. see nav @ top of page issue i'm describing.
html:
<header> <div class="logo"><a href="#"></a></div> <div class="nav-homepage"><a href="#"></a></div> <div class="nav-webdesign"><a href="#"></a></div> <div class="nav-graphicdesign"><a href="#"></a></div> <div class="nav-miscartwork"><a href="#"></a></div> <div class="nav-aboutme"><a href="#"></a></div> <div class="nav-contactme"><a href="#"></a></div> </header>
css:
header { .site-section; height: 125px; div { float: left; position: relative; top: 10px; { display: block; } } div:first-child { position: relative; top: 0px; } } .nav-aboutme, .nav-contactme, .nav-graphicdesign, .nav-homepage, .nav-miscartwork, .nav-webdesign, .shadow, .homepage-nav-aboutme, .homepage-nav-contactme, .homepage-nav-graphicdesign, .homepage-nav-miscartwork, .homepage-nav-webdesign, .logo{ background: url(/resource/img/sprites.png) no-repeat; } .nav-aboutme { background-position: -81px -361px ; width: 76px; height: 105px; margin-right: 49px; } .nav-contactme { background-position: 0 -360px ; width: 76px; height: 105px; } .nav-graphicdesign { background-position: -79px -246px ; width: 89px; height: 105px; margin-right: 49px; } .nav-homepage { background-position: 0 -245px ; width: 76px; height: 105px; margin-right: 49px; } .nav-miscartwork { background-position: -79px -132px ; width: 85px; height: 105px; margin-right: 49px; } .nav-webdesign { background-position: 0 -132px ; width: 76px; height: 105px; margin-right: 49px; }
i believe because block element has no content inside of it. if add letter inside anchor link anchor link become 100% of width of div.
if add width:100% , height:100% take entire div.
Comments
Post a Comment