Runboard.com
Слава Україні!
open to all ages

Runboard       Sign upCreate Accountlearn about itSign inlost password?

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
Basic CSS Sidebar Skin (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 board banner and your board's content on the right-hand side. All 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 statement sets 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 declaration makes 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, 2/5/20, 3:07 am


---

Advertise Boards On TRDConceptsDE
2/5/20, 3:06 am Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
Re: Basic CSS Sidebar Skin (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:


Image



---

Advertise Boards On TRDConceptsDE
2/5/20, 3:08 am Link to this post Email Pastor Rick   PM Pastor Rick Blog
 


Add a Reply



You are not logged in (login)