Runboard.com
You're welcome.




Runboard DesignBoard Links ->  Runboard Design
  Coder's PlazaCoder's Plaza
    Left Sidebar, flex-width board, banner on topLeft Sidebar, flex-width board, banner on top
Chat room 
Support Search Facebook Twitter RSS 

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: 500
Karma: 12 (+12/-0)
Reply Quote
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


---

○ Advertise Boards On TRD ○ Concepts ○ DE ○
10/30/2011, 2:52 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: 500
Karma: 12 (+12/-0)
Reply Quote
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:
Image


---

○ Advertise Boards On TRD ○ Concepts ○ DE ○
10/30/2011, 2:54 pm Link 2 this post Send Email to   Send PM to Blog
 


Add a Reply





Powered by AkBBS 1.1 - Link to us - Blogs - Hall of Honor - - Create your free forum
You are not logged in (login)