Pastor Rick
Head Administrator
Registered: 07-2005
Location: Texas
Posts: 501
Karma: 12 (+12/-0)
|
|
|
Right Sidebar (banner on top) fixed width
This sidebar layout is a bit more detailed. It is a fixed width layout set at the highest width you can get for people who have screens with a 1024x768px resolution. The banner is on top and there is a footer area at the bottom.
The CSS codes
body { font: 12px verdana, arial, helvetica, sans-serif; }
#wrapper { width: 990px; margin: 0 auto; border: 2px solid #cc0000; }
#header {background: #FFFF00; text-align: center; }
#header h1 { font-size: 20px; }
#content { float: left; width: 827px; margin: 2px; background: #FFDDFF; }
#content p { text-align: left; } /* required to override Runboard settings below message board */
#sidebar { float: right; width: 150px; margin: 2px; background: #80FFFF; }
#sidebar ul, #sidebar li { margin: 0; padding: 0; }
#sidebar li { list-style: none; }
.sidebox { margin: 2px; border: 1px solid #ccc; }
.sidebox h2 { margin: 0; background: #eee; font-size: 12px; text-align: center; padding: 2px; }
#footer { background: #FFFF80; clear: both; text-align: center; }
The HTML goes like this:
In The HTML Header Box
<div id="wrapper">
<div id="header">
<h1>Right Sidebar (fixed width: banner area on top & centered)</h1>
<p>You can put other stuff in the header as well</p>
</div><!-- end header -->
<div id="content">
<p>Anything you put here will go above the forums, but inside the "content" area.</p>
In The HTML Footer Box
<p>You can put stuff here too, if you want.</p>
</div><!-- end content -->
<div id="sidebar">Above "sideboxes"
<div class="sidebox">
<h2>First sidebox</h2>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- end sidebox -->
Between "sideboxes"
<div class="sidebox">
<h2>2nd sidebox</h2>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- end sidebox -->
Below "sideboxes"
</div><!-- end sidebar -->
<div id="footer"> Footer area with a
"<a href="#">Back to top</a>" link already in place.
</div><!-- end footer -->
</div><!-- end wrapper -->
|
10/30/2011, 1:20 pm
|
|
Pastor Rick
Head Administrator
Registered: 07-2005
Location: Texas
Posts: 501
Karma: 12 (+12/-0)
|
|
|
Re: Right Sidebar (banner on top) fixed width
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, 1:24 pm
|
|