Pastor Rick
Head Administrator
Registered: 07-2005
Location: Texas
Posts: 501
Karma: 12 (+12/-0)
|
|
|
Left Sidebar, flex-width board, banner on top
For those who like flexible width message board areas and a banner on top this code provides that. Credit goes to Lesigner Girl for most of the code and the inspiration. I have added background colors and/or borders to each area to show where things are and placed the Runboard logo in the banner/logo area to show that bit off a little more.
The CSS Codes
body { font-family: verdana,arial,sans-serif; font-size: 12px; margin: 0; }
img { border: 0; }
#wrapper { position: relative; width: 95%; margin: 0 auto; border:2px solid #FF0000;}
#header { text-align: center; height: 100px; background: #FFFF80; }
#content, #footer { margin-left: 155px; border: 1px solid #0000FF; }
#sidebar { width: 150px; position:absolute; top: 100px; left: 0; background: #80FFFF; }
#footer { text-align: center; background: #FFFF80; }
#header h1 {
background-image:url(http://url_to_banner.jpg);
background-position: center;
height: 150px;
text-indent: -1000%;
margin: 0;
font-size: 20px;
color: #000040;
}
.box {
border: 1px solid #ccc;
margin: 1px; padding: 3px;.
font-size: 11px;
text-align: center;
}
.box h2 {
background-color: #333333;
color: #ffffff;
margin: 0;
font-size: 12px;
}
.box p {
margin: 1em auto;
}
The HTML goes like this
In the HTML Header box
<div id="wrapper">
<div id="header">
board banner/logo goes here<h1>Your board name here</h1>
</div><!-- end header -->
<div id="content">
<p>If you want announcements or something at the top of your board, put them here.</p>
In the HTML Footer box
</div><!-- end content -->
<div id="sidebar">
<div class="box" id="box1">
<h2>First heading</h2>
<p>something here</p>
</div><!-- end box1 -->
<div class="box" id="box2">
<h2>Second heading</h2>
<p>something here</p>
</div><!-- end box2 -->
<div class="box" id="box3">
<h2>Third heading</h2>
<p>something here</p>
</div><!-- end box2 -->
</div><!-- end sidebar -->
<div id="footer">
Footer stuff here
</div><!-- end footer -->
</div><!-- end wrapper -->
-----------------------------------------------------
NOTE: This layout will cause the message board area to expand or contract depending on your users screen resolution. This means you should probably keep announcements and such relatively short so your users don't complain...
Last edited by Pastor Rick, 10/30/2011, 5:19 pm
|
10/30/2011, 2:52 pm
|
|
Pastor Rick
Head Administrator
Registered: 07-2005
Location: Texas
Posts: 501
Karma: 12 (+12/-0)
|
|
|
Re: Sidebar with flex-width board and banner on top
Screen shot with the different areas either color coded or with color borders around the areas so you can see what does what.
quote:

|
10/30/2011, 2:54 pm
|
|