...

View Full Version : Trouble adding social media buttons on top of header



atosite
08-08-2011, 10:59 PM
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:


body>header {
height:320px;
width: 665px;
background:#fff;
}

For the icons:


#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):


<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!

resdog
08-09-2011, 03:50 PM
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:



#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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum