Runboard.com
Слава Україні!

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

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 501
Karma: 12 (+12/-0)
Reply Quote
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 -->

---

Advertise Boards On TRDConceptsDE
10/30/2011, 1:20 pm Link 2 this post Send Email to   Send PM to Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 501
Karma: 12 (+12/-0)
Reply Quote
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:

Image



---

Advertise Boards On TRDConceptsDE
10/30/2011, 1:24 pm Link 2 this post Send Email to   Send PM to Blog
 


Add a Reply





You are not logged in (login)