html - ul list gets hidden under a div -


i've been having issue in different places have ul list , im trying add on top of div (image, or background) list not appear on top. wonder if gets sent in back..i added z-index

jsfiddle

css

.toolbar p{ text-align: right; padding: 10px 180px 0 0; color: #fff; font-size: 26px; z-index: 1; } .toolbar { width: auto; height: 50px; background-color:  #cc1e2c; z-index: 1;} .social-icons { z-index: 2;} 

html

<div class="col_full toolbar">              <p>call now: +1 555.555.1234</p>             <ul class="social-icons">                 <li> <a href="graphics/twitter_icon.jpg" target="_blank"> </a></li>                 <li> <a href="graphics/instagram_icon.jpg" target="_blank"> </a></li>                 <li> <a href="graphics/facebook_icon.jpg" target="_blank"> </a></li>             </ul>         </div> 

the reason aren't seeing because posted links, without content. if added words, list appear:

<div class="col_full toolbar">              <p>call now: +1 555.555.1234</p>             <ul class="social-icons">                 <li> <a href="graphics/twitter_icon.jpg" target="_blank">twitter </a></li>                 <li> <a href="graphics/instagram_icon.jpg" target="_blank"> instagram</a></li>                 <li> <a href="graphics/facebook_icon.jpg" target="_blank"> facebook</a></li>             </ul>         </div> 

on example made height bigger see links in fact on top.

if want see images, need use image tag so:

<li> <a href="path/to/twitter.com" target="_blank"><img src="path/to/your/twitter_image.jpg"/> </a></li> 

jsfiddle


Comments

Popular posts from this blog

php - Zend Framework / Skeleton-Application / Composer install issue -

c# - Better 64-bit byte array hash -

python - PyCharm Type error Message -