Have added a social bar to my forum. http://www.trestleboard.us on the right. I am trying to make it independent from the logo and description on the left. When I change the margin-top in the below code, both sides move. I would like to be able to move the social bar up and down without the other moving.
This is what I am using in the stylesheet.css
Code: Select all
/* phpBB3 Style Sheet
--------------------------------------------------------------
Style name: prosilver Special Edition
Based on style: prosilver (the default phpBB 3.0.x style)
Original author: Tom Beddard ( http://www.subblue.com/ )
Modified by: phpBB Group ( http://www.phpbb.com/ )
--------------------------------------------------------------
*/
@import url("common.css");
@import url("links.css");
@import url("content.css");
@import url("buttons.css");
@import url("cp.css");
@import url("forms.css");
@import url("tweaks.css");
@import url("colours.css");
@import url("menu.css");
@import url("mm.css");
@import url("mchat.css");
}
#social_bar {
height: 20px;
margin: 0 auto;
position: relative;
right: 10px;
top: -53px;
}
#social_bar{
margin-top:15px;
text-align: right;
}
}Code: Select all
<div style="height: 130px;">
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>
<div id="social_bar">
<div id="social_buttons">
<a href="http://www.facebook.com/pages/TrestleBoard/302959413099487"target="_blank"><img alt="Facebook" src="{T_THEME_PATH}/images/social/face.png"></a>
<a href="http://www.trestleboard.us/feed.php"target="_blank"><img alt="RSS" src="{T_THEME_PATH}/images/social/rss.png"></a>
<a href="radio.php" onclick="window.open('radio.php','','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, width=440, height=380, left=0, top=0'); return false;"><img alt="Radio" src="{T_THEME_PATH}/images/social/radio.png"></a>
</div>
</div>