Runboard.com
You're welcome.



       Use the black navigation bar to log in or create your account.

Jump to Page:  1  2 

 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
posticon Tableless Sidebar Layout


Why would anyone want a tableless layout? Why tables for layout is stupid: problems defined, solutions offered offers plenty of reasons.

Now that you know why CSS layouts are superior to table layouts, here you will learn how to do a simple sidebar layout in CSS. Be sure to set up a test board and test everything out before putting anything on your "real" board.

First, we'll set up the different sections, giving them each their own "id":

1)  A header (id="header") for the top of your board
2)  A content area (id="content") for your forum list, thread list, posts, etc.
3)  An area (id="sidebar") for all your sidebar contents
4)  A footer (id="footer") for the bottom of your board
5)  A container (id="container") around everything else to contain it all.

Along with this, we'll add a few boxes (class="box") inside your "sidebar", headings (<h2>) inside those boxes, and the page's main heading (<h1>) inside the "header".

 
HTML Header:

<div id="container">
<div id="header">

<h1>Your board name here</h1>

If you have a banner specified in your layout/colors screen, take it out of there.

</div><!-- end header -->
<div id="content">

<p>If you want announcements or something at the top of your board, put them here.</p>


HTML Footer:

</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 container -->


=================================
The difference between id and class:

id is used for something that occurs one time on a page. You have one header, one footer, one sidebar, and one content area per page. Also, you have one box in the sidebar with the id of "box1", one box with the id of "box2", and one box with the id of "box3". Think of an id like a home address. Each house has its own identifying address.

class is used for something that occurs more than one time on a page. Classes are used all the time in society, like "upper class", "middle class", "lower class"... Classes are classifications that more than one thing can belong to.

You can combine class and id like I did with the boxes in the sidebar. They are all classified as boxes, but each box also has its own individual identification.

At this point, your board will look something like this:

Your board name here

If you have a banner specified in your layout/colors screen, take it out of there. (You'll want to delete this line, btw)


_____________________________________________________
|Board contents&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|

First heading

something here

Second heading

something here

Third heading

something here

Footer stuff here

====================================

Now, to turn this all into a sidebar layout, you need to define those id's (container, header, content, sidebar, and footer) in your CSS. Also, you can fix up those sidebar boxes by styling them in the CSS...

Custom CSS:

First, you want to define the font for the whole page. This way, you won't have to keep defining it all over the place. You can also get rid of your page margin here. And for good measure, we'll get rid of the borders around all image links.

body { font-family: verdana,arial,sans-serif; font-size: 12px; margin: 0; }
img { border: 0; }


Next, position the different sections (divs). The width of the container id will determine the width of your board overall. You may also use a fixed px width instead of %. If you omit width: 95%; completely, your board will automatically fill the entire width of the page.


#container { position: relative; width: 95%; margin: 0 auto; }
#header { text-align: center; height: 100px; }
#content, #footer { margin-left: 155px; }
#sidebar { width: 150px; position:absolute; top: 100px; left: 0; }
#footer { text-align: center; }


If you want your sidebar to be a different width, change #sidebar's width accordingly. Also, change #content and #footer margin-left according to the #sidebar's width. I added 5px here for that margin to leave a gap between the sidebar and content.

To replace the big board name with a banner, add this:

#header h1 {
  background-image:url(http://url_to_banner.jpg);
  background-position: center;
  height: 150px;
  text-indent: -1000%;
  margin: 0;
  font-size: 1px;
}


Change the background-image with your own image that is hosted on the web somewhere, and change the height to the height of your image. If you prefer, you may change the height to something taller than your image, and the banner will automatically appear centered within that area.

Also change #header in the previous block of code (where we defined the initial layout) to accommodate the height of your banner, and in #sidebar, change the value of "top:" to move it down accordingly.

Now you have a sidebar layout, but the sidebar looks plain. Let's fix up those boxes and headings (h2) inside it.

.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;
}


You can add borders, background images, and a lot of other customizations right here in the CSS. In case you want each box in your sidebar to have different styling, I gave them each their own "id".

#box1 { font-weight: bold; }


The difference between # and .

# refers to an id
. refers to a class

It is possible to have a class and an id with the same name. By using a pound sign (aka number sign) before an id and a period before a classname, we are telling the software interpreting the code whether we are referring to a class or an id.

Now that you have the tools to make your own table-less sidebar with a CSS layout, you can work on getting rid of all those nasty <font>, <center>, <b>, <i>, and <u> tags by using CSS for style.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
8/5/2007, 4:30 pm Link to this post PM Lesigner Girl Read Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
Re: Tableless Sidebar Layout



Now that you have the tools to make your own table-less sidebar with a CSS layout, you can work on getting rid of all those nasty <font>, <center>, <b>, <i>, and <u> tags by using CSS for style.

And here's the new tutorial for that:
Stop using HTML for style




---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
8/5/2007, 6:18 pm Link to this post PM Lesigner Girl Read Blog
 
TheScribe Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 02-2003
Province: Sydney, Australia
Posts: 41
Karma: 0 (+0/-0)
ReplyQuote
Re: Tableless Sidebar Layout


I'm still working on the sidebar over at my test board and I've run into some problems. I'll see if I can work them out myself before bothering you.

However, I do have a question:

Is it possible to make the sidebar stay on the screen, even if I scroll down to the bottom of the page? I know this can be done with background images, but have no idea about a sidebar.


Edit:

I can't fix the problem. The header, sidebar and footer are in the right position, but the content is refusing to go beneath the header. I don't know what else to try. Please help! emoticon

Last revised by TheScribe, 5/3/2008, 5:35 am


---
Karen Lee Field
Author of The Land of Miu series
Available from: Smashwords or Kayelle Press
5/2/2008, 5:48 am Link to this post PM TheScribe
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
Re: Tableless Sidebar Layout


For your content <div>, you have it defined as <div class="content"> instead of <div id="content">, but you are still trying to define the id via #content in your CSS.

Once you change class to id in your HTML, you'll need to add clear:left; to your #content css.

Keeping the sidebar in view at all times can be tricky without the use of javascript. Even so, the sidebar would need to be short enough to fit into any screen resolution, or it would need its own scrollbar when the height is too big to fit into somebody's window.

Basically, you would need to put everything on the right into its own section, with the sidebar in its own section, so each side could scroll on its own. Think of how a frames page looks, and that is basically how your board would look when the sidebar is tall enough to require scrolling.

If you're still interested, I can code something up for you. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/3/2008, 7:41 pm Link to this post PM Lesigner Girl Read Blog
 
TheScribe Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 02-2003
Province: Sydney, Australia
Posts: 41
Karma: 0 (+0/-0)
ReplyQuote
Re: Tableless Sidebar Layout


Thank you for the help with the content problem I was having. I knew it would be something simple...and it was. I stared at that coding for hours (no kidding), so again thank you. emoticon

I understand what you're saying about the two sections. That type of thing looks ugly (in my opinion) so I'll forget that idea. But thank you for offering to do the coding for me. I do appreciate that.

---
Karen Lee Field
Author of The Land of Miu series
Available from: Smashwords or Kayelle Press
5/4/2008, 3:54 am Link to this post PM TheScribe
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
Re: Tableless Sidebar Layout


You're welcome, Scribe. I think the extra scrollbar would have messed up your nice layout, and since you have good taste, I figured you might feel the same way. emoticon

As for the content problem, that's one of those things where I know you were just staring and staring at the CSS to make sure there weren't any errors, checking and double checking your HTML to make sure those tags were all nested correctly, and were ripping your hair out trying to figure out why everything looked right and still wasn't working. That's where something like this comes in handy:

javascript:var t=document.getElementsByTagName('div');for(j=0;j<t.length;j++){if(t[j].id){void(t[j].style.padding='5px;');b=t[j].id;m=t[j].innerHTML;void(t[j].innerHTML='<span style=\'color:blue;font-weight:bold;display:block; font-size: 10px;\'>#'+b+' { ... }</span>'+m);void(t[j].style.border='2px solid blue');}}

If you paste that into your browser's address bar while looking at your test board and "go" there, it will show you all the divs that have IDs. When I saw that the content div didn't have an ID, that told me what to look for.

You can find this javascript link and others over at Runboard Extra in the sidebar, under the "Tester's Corner" heading. I found a few of them on a website a long time ago and used them as a template to create the others, and have had them bookmarked ever since. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/4/2008, 5:06 am Link to this post PM Lesigner Girl Read Blog
 
TheScribe Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 02-2003
Province: Sydney, Australia
Posts: 41
Karma: 0 (+0/-0)
ReplyQuote
Re: Tableless Sidebar Layout


That's a great resource. I'll make a mental note about it (which is not a good idea, because I have a memory problem these days emoticon )

On my browser at home, the page looks great! But, now I'm back at work where I have to use IE6 and naturally things change. *sigh*

Here's what I see:

[img=http://img205.imageshack.us/img205/5746/boardpu2.th.jpg]

How can I...

1. fix the image position,
2. put a 10px margin to the left and right,
3. and have a small gap between the two sidebar boxes.

I thought about not bothering about the margins, but I know it will bug me.

My apologies for taking so much of your time this past week. I do appreciate your help. Thank you again.

Last revised by TheScribe, 5/4/2008, 11:49 pm


---
Karen Lee Field
Author of The Land of Miu series
Available from: Smashwords or Kayelle Press
5/4/2008, 11:47 pm Link to this post PM TheScribe
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
Re: Tableless Sidebar Layout


No apology necessary, Scribe. I like challenges, and trying to fix a bug without the browser to test it with definitely fits into that category. emoticon

I don't know why I didn't notice it before, but the #header doesn't need to be floated when the sidebar is absolutely positioned. This also means that the #content won't need to clear anything, because there won't be a float for it to clear.

That doesn't explain why the header's left margin is doubling up like it is, but let's get rid of the header's float and the clear for the content and see what happens with that.

You actually had me checking my own code in this thread to make sure I didn't float the header. emoticon

Now for the margins... *looks at code* Each of those boxes are within a div with the class of "box", and there is no margin defined for ".box". Adding margin-bottom: 10px; to the .box class should take care of that.

In addition, <h2> tags naturally have a top and bottom margin by default, which could be why the top box is in different places in different browsers. If you add margin-top: 0; to .box h2, that might make the first box show up in the same place in all browsers, after which, you should be able to adjust the #sidebar's top position until the top box is in line with the navigation tabs in all browsers.

(Firefox plugin) TotalValidator's screen grab option would come in really handy right now. Unfortunately, I can't find a version of it that's compatible with the current version of Firefox.

As for #2, I'm not sure what you mean. I'm guessing you mean you want a margin around the whole board itself? This isn't a browser difference, but a screen resolution difference. It looks like the screen you took that grab on has a 800px wide resolution, which only leaves about 780px of available space for any layout after accounting for the scrollbar. Unfortunately, you would have to make changes to your layout in order to accommodate users with a 800px resolution without making them scroll horizontally. To help you decide whether you want to do that or not, here are some statistics:

Display Resolution

The current trend is that more and more computers are using a screen size of 1024x768 pixels or more:
Date 	 	Higher 	   1024x768   800x600 640x480  Unknown

January 2008 38% 48% 8% 0% 6%
January 2007 26% 54% 14% 0% 6%
January 2006 17% 57% 20% 0% 6%
January 2005 12% 53% 30% 0% 5%
January 2004 10% 47% 37% 1% 5%
January 2003 6% 40% 47% 2% 5%
January 2002 6% 34% 52% 3% 5%
January 2001 5% 29% 55% 6% 5%
January 2000 4% 25% 56% 11% 4%

Source

Luckily it looks like we don't need to worry about those 640px resolutions anymore. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/6/2008, 12:43 am Link to this post PM Lesigner Girl Read Blog
 
TheScribe Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 02-2003
Province: Sydney, Australia
Posts: 41
Karma: 0 (+0/-0)
ReplyQuote
Re: Tableless Sidebar Layout


I know "sorry" isn't needed, but I can't help myself. I know you put a lot of time into that post and I am sorry to make you write all that.

Having said that, I'm also pleased that you did. emoticon

Taking out the float and clear fixed the position of the header. Yay!

I now, also, have the gap between the boxes just like I wanted. Double Yay!

But... emoticon after putting in the margin-top: 0; to .box h2 (which didn't affect the board by itself), when I change the figure in top in the sidebar css, the whole thing (sidebar) dropped right down the page (I think below the point where the sidebar should end). So that's a yikes! Hehe.

As for the margin around the edge (for 800 resolution, which I am unfortunate enough to have to use at work), I can live without that (I've been promised an update in a few months anyway). emoticon

---
Karen Lee Field
Author of The Land of Miu series
Available from: Smashwords or Kayelle Press
5/6/2008, 1:55 am Link to this post PM TheScribe
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
Re: Tableless Sidebar Layout


Header: Yay! emoticon
Gaps: Yay! emoticon
Sidebar: Uh oh! emoticon

Are you saying that if you change this:

#sidebar { width: 150px; position:absolute; top: 0; left: 0;}

...to this:

#sidebar { width: 150px; position:absolute; top: 10px; left: 0;}

...it drops way down in IE6? emoticon


On a hunch, I tried it without the px just now and it did just what you said, but I was looking at it in Firefox. Is it possible you might have omitted the px?

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/6/2008, 3:44 am Link to this post PM Lesigner Girl Read Blog
 


Add to this discussion


Jump to Page:  1  2 



You are not logged in (login)
Back To Top

This board's time is GMT.

Board's time is GMT