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

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

 
Joshin Josh Profile
Live feed
Blog
Friends
Miscellaneous info

Banned user

Registered: 11-2004
Posts: 953
Karma: 10 (+10/-0)
Reply | Quote
Tabled Side-Bar (For Beginners)


I am going to write a simple tutorial on how to make a nice looking sidebar using tables. There is a better was to make a sidebar, using CSS divs rather than HTML tables, however I think this tutorial will be good for beginners. I am going to put a css classes on the table, and Make each classes border be a different color, then I will post a screen shot of what the code does, hopefully my color coding which class effects what will be helpful lol. You will have to edit the code to add the colors you want and to decrease the border width, if you use this.

So first of all lets put this in the CSS:
/*Main Table*/
#container{
width : 90%;
border : 10px solid #426F42;
}

/*Header Cell*/
#header {
width : 100%;
border : 10px solid #FF6600;
background-color:#cccccc;
color : #000000;
}

/*Sidebar Cell*/
#sidebar{
width : 13%;
border : 10px solid #EE0000;
background : #cccccc;
}

/*Forums Cell*/
#main {
width : 87%;
border : 10px solid #D9D919;
background : #cccccc;
}

/*Inner Sidebar Tables and Link colors*/
.sidebox {
width : 150px;
background : #ffffff;
font-size : 12px;
text-align : center;
border : 10px solid #000000;
}

.sidebox ul, .sidebox li {
margin : 0;
padding : 0;
list-style : none;
display : inline;
}

.sidebox ul a:link, .sidebox ul a:visited {
text-decoration : none;
display : block;
border : 1px solid #000000;
margin : 1px;
padding : 2px;
}

.sidebox ul a:hover {
text-decoration : none;
background : #767676;
}

.sidebox h2 {
background : url(http://img.runboard.com/img/layouts/epikk3_2/tableheaderbg.jpg);
font-size : 15px;
margin : 1px;
height : 20px;
text-align : center;
border : 1px solid #000000;
}

Before I begin to post the custom html, I thought I should explain the difference between the #css and the .css names. For example #sidebar is called a div id and is put in the html with <div id="Sidebar"> and .sidebox is a CSS class and goes into the html as <div class="sidebox">

Now go to your Custom HTML and put in this:


<div align="center">
<table id="container" cellpadding="0" cellspacing="10">
<tr><td id="header" colspan="2"><div align="center"><h1>BANNER GOES HERE</h1></div></td></tr>
<tr><td id="sidebar" valign="top">
<table><tr><td class="sidebox">
<h2>Welcome</h2>
Put welcome message here</td></tr></table>
<br>
<table><tr><td class="sidebox">
<h2>links</h2>
<ul>
<li><a href="http://www.runboard.com">Link</a></li>
<li><a href="http://www.runboard.com">Link</a></li>
<li><a href="http://www.runboard.com">Link</a></li>
<li><a href="http://www.runboard.com">Link</a></li>
<li><a href="http://www.runboard.com">Link</a></li>
<li><a href="http://www.runboard.com">Link</a></li>
<li><a href="http://www.runboard.com">Link</a></li>
<li><a href="http://www.runboard.com">Link</a></li>
</ul>
</td></tr></table>
</td>
<td id="main" valign="top">

And put this in your HTML Footer:
</td></tr></table></div>

This is what this code would look like:
Image

I just added that css to the board.. but if you would fix the borders/colors to your liking and add some runboard css then you would have a sharp looking board :)

If there are any questions feel free to ask.

Last edited by Joshin Josh, 7/6/2007, 11:04 pm


---

7/6/2007, 10:51 pm Link to this post Send PM to Joshin Josh Blog
 


Add a Reply





You are not logged in (login)