Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trouble adding social media buttons on top of header

    I'm kinda new at this, and I had an extensive look at how I can solve this issue, but none of the fixes are working for me.

    The site: http://annatorv.org/test
    I'm trying to get the social media icons over the header (in the area where the picture of the icons are), but they either lie behind the header, or on top of it, pushing the rest of the page down.

    Here is my CSS for the header:

    Code:
    body>header {
        height:320px;
        width: 665px;
        background:#fff;
    	}
    For the icons:

    Code:
    #header_icons{
    float:right;
    }
    
    #header_icons ul {
    height:50px
    width:50px
    }
    
    #header_icons ul li {
    	display: inline;
    	float:left;
    	height:50px
    	margin:0px;
    	padding:0px;
    }
    #header_icons img {
    	display: inline;
    	float:left;
    	margin:0px;
    	padding-left: 2px
    }
    And the html (I tried moving the code for the icons before the <header>, after it, and in the <nav> part, and nothing works):

    Code:
    <body <?php body_class(); ?>>	
    
    	<header>
    	<div id="header_icons">
    <ul>
    <li><a href="http://twitter.com/annatorvdotcom" title= "Twitter"><img src = http://annatorv.org/test/wp-content/themes/ATO2011/images/twitter.png></a></li&gt;
    <li><a href="http://facebook.com/annatorvdotcom" title= "Facebook"><img src = http://annatorv.org/test/wp-content/themes/ATO2011/images/facebook.png></a></li&gt;
    <li><a href="http://youtube.com/annatorvdotcom" title= "Youtube"><img src = http://annatorv.org/test/wp-content/themes/ATO2011/images/YouTube.png></a></li&gt;
    <li><a href="http://annatorvdotcom.tumblr.com" title= "Tumblr"><img src = http://annatorv.org/test/wp-content/themes/ATO2011/images/tumblr.png></a></li&gt;
    <li><a href="http://annatorv.com/rss" title= "RSS"><img src = http://annatorv.org/test/wp-content/themes/ATO2011/images/rss.png></a></li&gt;
    </ul>
    </div>
    <a href="<?php bloginfo('url'); ?>">
      <img src="http://annatorv.org/test/wp-content/themes/ATO2011/images/ATO_header.jpg" alt="<?php bloginfo('name'); ?>" />
        </a>
         <h1><a href="<?php bloginfo('url'); ?>"></a>
    </header>
    		<nav id="topNav">
    			<ul>
    				<li><a href="http://annatorv.com/anna" title="Anna">ANNA</a></li>
    				<li><a href="http://annatorv.com/multimedia" title="Multimedia">MULTIMEDIA</a></li>
                    		<li><a href="http://annatorv.com/gallery" title="Gallery">GALLERY</a></li>
                 			<li><a href="http://fanforum.com/f972" title="FanForum">FORUM</a></li>
                    		<li><a href="http://annatorv.com/interactive" title="Interactive">INTERACTIVE</a></li>
    				<li><a href="http://annatorv.com/site" title="Site">SITE</a></li> 
    
                </ul>
    		</nav>
    Help! And thanks in advance!

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    This is where absolute positioning will work for you. First, you need to keep the header_icons div inside the header div. Then for your #header css, add "position: relative;" to it. then for the "header_icons" div, add the styles:

    Code:
    #header_icons {
     position: absolute;
     right: 5px;
     top: 5px;
    }
    Now open your site and use firebug to adjust the position of the #header_icons div so it is over the links.

    Setting the div to absolute position removes it from the document flow. Making #header div position: relative makes the #header_icons position relative to the #header div. This way, when you right: 5px, it's 5px from the right of the header and not the main body element. Hope that helps!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •