Runboard.com
You're welcome.
Runboard Extra Chat Room Support Search Facebook





Runboard.com       Sign up learn about it | Sign in lost password?

 
The Mooseman Profile
Live feed
Blog
Friends
Miscellaneous info

 


Registered: 03-2005
Location: Looking for my brain...
Posts: 1047
Karma: 76 (+83/-7)
Sidebar in CSS - basics


This eg gives you a 200px high header where you can add a board logo/banner
CSS :

#wrapper{position:relative;width:100%;}
#header{position:absolute;top:0;left:0;width:100%;height:200px;
text-align:center;background-color:#ff0000;}
#sidebar{position:absolute;left:0;top:201px;width:180px;background-color:#f25826;}
#content{position:absolute;left:181px;top:201px;background-color:#000080;}

HTML Header:
<div id="wrapper">
<div id="header">Put your banner/logo image here</div>
<div id="sidebar">Sidebar content<br/>Like links , text and images goes here</div>
<div id="content">

Dont copy this line. Content holds your main board

And add this in your HTML Footer:
</div></div>

This is all there is to it.
If you want more specifics, refer to this post and ask questions.


Everything is changable, positioning, colors, fonts...the works
The sidebar gets bigger the more stuff you add in it


Last edited by The Mooseman, 9/11/2007, 11:41 am


---
~ Quickly, I must hurry, for there go my people and I am their leader ~
7/23/2007, 6:20 pm Link to post PM The Mooseman
 


You are not logged in (login)