Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

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


  #1  
Old Jun 18, 2014, 02:12 PM
morgana123
 
48 posts · Jun 2010
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.

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

Last edited by juggledad; Jun 18, 2014 at 06:57 PM.
  #2  
Old Jun 18, 2014, 03:59 PM
juggledad's Avatar
juggledad
 
23,672 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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??)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jun 18, 2014, 04:07 PM
morgana123
 
48 posts · Jun 2010
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!!
  #4  
Old Jun 18, 2014, 06:56 PM
juggledad's Avatar
juggledad
 
23,672 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jun 26, 2014, 07:03 AM
morgana123
 
48 posts · Jun 2010
Thanks very much, juggledad ... I had missed your second reply until just now, and greatly appreciate it!

All the best,
morgana123
  #6  
Old Jul 2, 2014, 11:09 AM
morgana123
 
48 posts · Jun 2010
I would hug you for this if you were nearby - this is an excellent fix - THANK YOU, THANK YOU!!


Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] How to add social media icons pamlita Atahualpa 3 Wordpress theme 2 Oct 11, 2012 12:01 PM
Social Media Icons in Header sleenie Header configuration & styling 15 May 25, 2012 09:27 PM
Positioning of Social Media tags nick51 Post-Kicker, -Byline & -Footer 1 Jun 8, 2011 03:13 PM
Add social icons to header dingest Header configuration & styling 1 Dec 16, 2010 08:23 PM


All times are GMT -6. The time now is 05:22 PM.


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