Runboard.com
Слава Україні!
open to all ages

Runboard       Sign upCreate Accountlearn about itSign inlost password?

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
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 base coding 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 user's screen resolution. This behavior means you should probably keep announcements and such relatively short so your users don't complain.

---

Advertise Boards On TRDConceptsDE
2/6/20, 1:52 am Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
Re: Left Sidebar, flex-width board, banner on top


Screenshot 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
2/6/20, 1:53 am Link to this post Email Pastor Rick   PM Pastor Rick Blog
 


Add a Reply



You are not logged in (login)