Tab Navigation Layout

rjpeek25 · 01-16-2013, 03:23 AM

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.

L0adOpt1c · 01-16-2013, 01:45 PM

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?

rjpeek25 · 01-17-2013, 01:35 AM

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

rjpeek25 · 01-17-2013, 01:36 AM

I'm not validated, what is that?

L0adOpt1c · 01-17-2013, 01:00 PM

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.

L0adOpt1c · 01-17-2013, 03:07 PM

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.

rjpeek25 · 01-18-2013, 03:03 AM

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

webdevs · 01-18-2013, 06:31 AM

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

rjpeek25 · 01-19-2013, 10:29 PM

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).