CodingForums.com - Tab Navigation Layout

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Tab Navigation Layout (http://www.codingforums.com/showthread.php?t=285863)

Tab Navigation Layout

I want to create a dynamic tab navigation menu using javascript. I want the tabs/content area to be outlined with a border (1px). I want the content area to expand to the bottom of the browser's viewport (minus a margin) when there is little content then beyond when the content grows past the viewport. I was thinking I could use an unordered list for the tabs and a division for the content area. The problem that I'm having is when I set the division height to 100%, it goes below the viewport. If I use a table (nested table) I can get the desired effect but run into other problems. Can the content area be done with HTML and css or do I need javascript to control the content area height? What are your suggestion.

Height should be easily manageable with HTML and CSS.
By the way, never EVER use tables for layout. They are awful.
Can I see your code?
And have you validated?

<html>

<head>
<link rel=StyleSheet href='csspositioning1.css' type=text/css>
</head>

<body>

<ul>
<li class=thirdTab>Tab 3</li>
<li class=secondTab>Tab 2</li>
<li class=firstTab>Tab 1</li>
</ul>

<div class=contentArea>Content Area</div>

</body>
</html>

li {
width: 100px;
float: right;
border-left: 1px solid black;
border-top: 1px solid black;
list-style:none;
text-align: center;
color: blue;
font-weight: bold;
}

.firstTab {
background-color: #F0E68C;

}

.secondTab {
background-color: #98FB98;
border-bottom: 1px solid black;
}

.thirdTab {
border-right: 1px solid black;
border-bottom: 1px solid black;
background-color: #D3D3D3;
}

.contentArea {
position: relative;
bottom: 2px;
height: 100%;
clear: right;
border: 1px solid black;
background-color: #F0E68C;
z-index:-1;
}

I'm not validated, what is that?

A validator is a program that checks that your code is compliant to current industry standards.

http://validator.w3.org/

No download required.

This can catch annoying problems that are fairly simple pretty much instantly.

HTML: I've noticed you have no quotes around your values, and that could cause issues. Also, you should use a !DOCTYPE tag. These in themselves could fix whatever issues you are having. Remember to validate early and often!

CSS: It validated, so it's industry compliant, which means no novice errors. Just make sure that your values match what you want.

Hope this helped.

Now my code validates with only 2 warnings with the HTML but my Content Area (div) still goes below the view-port. I have also tried it with a container div and still get the same results.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>CSS Position 1</title>
<script type="text/javascript" src="csspositioning1.js"></script>
<link rel="StyleSheet" href="csspositioning1.css" type="text/css">
</head>

<body>

<ul>
<li class="thirdTab">Tab 3</li>
<li class="secondTab">Tab 2</li>
<li class="firstTab">Tab 1</li>
</ul>

<div class="contentArea">Content Area</div>

</body>
</html>

html, body {
height: 100%;
}

li {
width: 100px;
float: right;
border-left: 1px solid black;
border-top: 1px solid black;
list-style:none;
text-align: center;
color: blue;
font-weight: bold;
}

.firstTab {
background-color: #F0E68C;

}

.secondTab {
background-color: #98FB98;
border-bottom: 1px solid black;
}

.thirdTab {
border-right: 1px solid black;
border-bottom: 1px solid black;
background-color: #D3D3D3;
}

.contentArea {
position: relative;
bottom: 2px;
height: 100%;
clear: right;
border: 1px solid black;
background-color: #F0E68C;
z-index:-1;
}

You can create CSS class and give the border using javascript based navigation menu.

I'm not sure what you mean, do you mean instead of giving the Content Area div a static CSS value (example: 100% or 600px) to control the size (height) of the Content Area, use javascript to control the size (height).