Wordpress Themes - WP Forum at BFA - [SOLVED] horizontal social icons overlay header image: positioning woes

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - [SOLVED] horizontal social icons overlay header image: positioning woes (http://forum.bytesforall.com/showthread.php?t=22580)

[SOLVED] horizontal social icons overlay header image: positioning woes

Hi Juggledad and lmilesw,

Running WP 3.9.1 ATA 3.7.15.

Not great at CSS, sorry. Trying to display social icons horizontally over header image, but display:inline doesn't change the ul to horizontal.

In ATO -> Header image -> Overlay header image, I have:

HTML Code:

<div id="header_image_sociable">

  <ul>

    <li><a href="mailto:CLWardHT@me.com"><img class="aligncenter size-full wp-image-164" alt="email" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/email.png" width="32" height="32" /></a></li>

    <li><a href="http://www.linkedin.com/pub/cherry-lee-ward/13/24b/816"><img class="aligncenter size-full wp-image-162" alt="linkedin" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/linkedin.png" width="32" height="32" /></a></li>

    <li><a href="https://plus.google.com/103385025499347441047/posts"><img class="aligncenter size-full wp-image-163" alt="googleplus" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/googleplus.png" width="32" height="32" /></a></li>

    <li><a href="https://twitter.com/ShamanicHealing"><img class="aligncenter size-full wp-image-161" alt="twitter" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/twitter.png" width="32" height="32" /></a></li>

    <li><a href="http://facebook.com/cherrylee.ward"><img class="aligncenter size-full wp-image-160" alt="facebook" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/facebook.png" width="32" height="32" /></a></li>

    <li><a href="http://pinterest.com/"><img class="aligncenter size-full wp-image-159" alt="pinterest" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/pinterest.png" width="32" height="32" /></a></li>

    <li><a href="http://feeds.feedburner.com/Cherry-leeWardsBlog"><img class="aligncenter size-full wp-image-165" alt="rss" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/rss.png" width="32" height="32" /></a></li>

  </ul>

 </div>

In ATO -> CSS inserts, I have:

HTML Code:

#header_image_sociable {position: fixed; top: 140px; right: 100px;}

#header_image_sociable ul {list-style-type: none;}

#header_image_sociable ul li { display: inline; }

Please, what am I doing wrong?

TIA for any points in the right direction!! Pointers to a recommended CSS tutorial much appreciated, too. :confused:

Site in question: http://cherry-leeward.com/DEV2/ :(

1) if you want the images horizontal, why are you putting them in a list?
2) have you used the FireBug extension inn FireFox to look at the CSS - you should, you can change the CSS on the fly and see what it does (use the 'examine' button and then select an element on teh page)
3) if you don't know CSS tahe a tutorial - http://htmldog.com/guides/css/beginner/ is a good start and remember you won't learn it all in a day or week or month, but if you do a little each day, you will learn it over time (did you learn math in a week??)

Good pointer on the tutorial - THANK YOU!

I was placing them in a UL to add the positioning to them all at once, but I gather that's not right. I'll try using Firebug to see how to add positioning for each individually, yes?

Thank You again!! :o

I assume you want them in a line, so try this instead
code overlay

HTML Code:

<div id="header_image_sociable">

<a href="mailto:CLWardHT@me.com"><img class="aligncenter size-full wp-image-164" alt="email" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/email.png" width="32" height="32" /></a>

<a href="http://www.linkedin.com/pub/cherry-lee-ward/13/24b/816"><img class="aligncenter size-full wp-image-162" alt="linkedin" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/linkedin.png" width="32" height="32" /></a>

<a href="https://plus.google.com/103385025499347441047/posts"><img class="aligncenter size-full wp-image-163" alt="googleplus" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/googleplus.png" width="32" height="32" /></a>

<a href="https://twitter.com/ShamanicHealing"><img class="aligncenter size-full wp-image-161" alt="twitter" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/twitter.png" width="32" height="32" /></a>

<a href="http://facebook.com/cherrylee.ward"><img class="aligncenter size-full wp-image-160" alt="facebook" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/facebook.png" width="32" height="32" /></a>

<a href="http://pinterest.com/"><img class="aligncenter size-full wp-image-159" alt="pinterest" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/pinterest.png" width="32" height="32" /></a>

<a href="http://feeds.feedburner.com/Cherry-leeWardsBlog"><img class="aligncenter size-full wp-image-165" alt="rss" src="http://www.cherry-leeward.com/wp-content/uploads/2013/08/rss.png" width="32" height="32" /></a>

</div>

css inserts

HTML Code:

#header_image_sociable {position: absolute; right:40px; top: 20px;}

#header_image_sociable  a:link,

#header_image_sociable  a:visited,

#header_image_sociable  a:active,

#header_image_sociable  a {float:right;}

Thanks very much, juggledad ... I had missed your second reply until just now, and greatly appreciate it! :)

All the best,
morgana123

I would hug you for this if you were nearby - this is an excellent fix - THANK YOU, THANK YOU!!

:)