Runboard.com
You're welcome.

runboard.com       Sign up (learn about it) ● Sign in (lost password?)


 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator
 (Top of the page)
● Premium User ●


Registered: 07-2005
Location: Texas
Posts: 493
Karma: 12 (+12/-0)
Reply Quote
Basic CSS Sidebar (fixed width)


The first and most basic sidebar layout consists of fixed width elements and has the sidebar on the left hand side with both your boards banner and your boards content on the right hand side. All of this is enclosed in a wrapper which centers the layout on the browser window. The codes below set up this type of sidebar with a total board width of 990px. This is the maximum width you can have without a scrolling bar at the bottom for those who are stuck with a 1024x768 screen resolution.

The CSS portion of the layout goes like this and sets up a sidebar 150px wide and a banner/logo area that is 840px wide and 250px high:

The CSS Codes
#wrapper {
position:relative;
width:990px;
margin:0 auto;
}

#header {
float: right;
width:840px;
height:250px;
}

#sidebar {
float:left;
width:150px;
margin:0 auto;
}

#content {
width:840px;
float: right;
}

.clear {
clear: both;
}

The HTML goes like this:

In the HTML Header:
<div id="wrapper">
<div id="header">Put your banner/logo image here</div>
<div id="sidebar">Your Sidebar content, Like links, text and images goes here</div><!-- end sidebar -->
<div id="content">The message board and any add-ons to the message board area go here.

In your HTML Footer:
</div><!-- end content -->
<div class="clear"></div><!-- clears all floats -->
</div><!-- end wrapper -->

-----------------------------------------------------
NOTE: The CSS for the content is set to "float: right." This is done to make sure any add-ons you make to the board side of things will stay in the area assigned to them and not bleed over or position themselves into either the banner or sidebar area.

Last edited by Pastor Rick, 10/29/2011, 5:57 pm


---

RSFRDAdvertise Boards On TRDREITB
10/23/2011, 10:40 pm Link 2 this post Send Email to   Send PM to Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator
 (Top of the page)
● Premium User ●


Registered: 07-2005
Location: Texas
Posts: 493
Karma: 12 (+12/-0)
Reply Quote
Re: Basic CSS Sidebar (fixed width)


Here is a picture of the basic sidebar layout. I added colors and the Runboard logo to the pic and then enclosed the pic in quotes so you can have a visual of what the code does:
quote:


--Log in or sign up to see linked image content--



Last edited by Pastor Rick, 10/25/2011, 11:42 pm


---

RSFRDAdvertise Boards On TRDREITB
10/25/2011, 11:38 pm Link 2 this post Send Email to   Send PM to Blog
 


Add a Reply





You are not logged in (login)