Right Sidebar (banner on top) fixed width https://brunboarddesigns.runboard.com/t103 Runboard| Right Sidebar (banner on top) fixed width en-us Fri, 29 Mar 2024 07:11:09 +0000 Fri, 29 Mar 2024 07:11:09 +0000 https://www.runboard.com/ rssfeeds_managingeditor@runboard.com (Runboard.com RSS feeds managing editor) rssfeeds_webmaster@runboard.com (Runboard.com RSS feeds webmaster) akBBS 60 Re: Right Sidebar (banner on top) fixed widthhttps://brunboarddesigns.runboard.com/p499,from=rss#post499https://brunboarddesigns.runboard.com/p499,from=rss#post499Screen shot with the different areas either color coded or with color borders around the areas so you can see what does what. quote:nondisclosed_email@example.com (Pastor Rick)Sun, 30 Oct 2011 13:24:37 +0000 Right Sidebar (banner on top) fixed widthhttps://brunboarddesigns.runboard.com/p498,from=rss#post498https://brunboarddesigns.runboard.com/p498,from=rss#post498This 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 -->nondisclosed_email@example.com (Pastor Rick)Sun, 30 Oct 2011 13:20:46 +0000