Left Sidebar, flex-width board, banner on top https://brunboarddesigns.runboard.com/t105 Runboard| Left Sidebar, flex-width board, banner on top en-us Fri, 29 Mar 2024 13:54:50 +0000 Fri, 29 Mar 2024 13:54:50 +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: Sidebar with flex-width board and banner on tophttps://brunboarddesigns.runboard.com/p503,from=rss#post503https://brunboarddesigns.runboard.com/p503,from=rss#post503Screen 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 14:54:05 +0000 Left Sidebar, flex-width board, banner on tophttps://brunboarddesigns.runboard.com/p502,from=rss#post502https://brunboarddesigns.runboard.com/p502,from=rss#post502For 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...nondisclosed_email@example.com (Pastor Rick)Sun, 30 Oct 2011 14:52:09 +0000