Wordpress Themes - WP Forum at BFA

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)

morgana123 Jun 18, 2014 03:12 PM

[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/ :(

juggledad Jun 18, 2014 04:59 PM

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??)

morgana123 Jun 18, 2014 05:07 PM

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

juggledad Jun 18, 2014 07:56 PM

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;}


morgana123 Jun 26, 2014 08:03 AM

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

All the best,
morgana123

morgana123 Jul 2, 2014 12:09 PM

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

:)


All times are GMT -6. The time now is 07:49 AM.

Powered by vBulletin® Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.