Tab Control

Ali Al Omairi Abu AlHassan

Guys; I have created this control to present a tab page control

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tab Control</title>
<style type="text/css">
.tabcontrol {
list-style:none;
padding: 8px;
margin:3px;
background-color:lightgray;
position:relative;
}
.tabcontrol>li {
float:left;
margin-right:4px;
}
.tabcontrol>li>span {
display:inline-block;
background-color:gray;
margin:0;
padding:3px;
border:solid 1px silver;
cursor:pointer;
}
.tabcontrol>li>span:hover {
background-color:lightgray;
}
.tabcontrol>li.selected>span {
background-color:#fff;
font-weight:bold;
}
.tabcontrol>li>ul {
display:none;
left:0;
right:0;
position:absolute;
background-color:#fff;
border:solid 1px silver;
margin: 0 8px;
padding:4px;
list-style:none;
}
.tabcontrol>li.selected>ul {
display:block;
}
.tabcontrol>li>ul>li {
float:left;
width:100px;
height:100px;
background-color:blue;
color:#fff;
margin:5px;
padding:2px;
text-align:center;
}
</style>
</head>
<body>
<ul class="tabcontrol" style="height:154px;">
<li>
<span>Tab page 1</span>
<ul>
<li>Box 1.1</li>
<li>Box 1.2.</li>
<li>Box 1.3.</li>
</ul>
</li>
<li class="selected">
<span>Tab page 2</span>
<ul>
<li>Box 2.1.</li>
<li>Box 2.2.</li>
<li>Box 2.3.</li>
</ul>
</li>
<li>
<span>Tab page 3</span>
<ul>
<li>Box 3.1.</li>
<li>Box 3.2.</li>
<li>

Richard Deeming

As the contents of the .tabcontrol are floated, you'll need a "clearfix"[^] to clear the floats.

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}

.clearfix:after {
clear: both;
}

/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Ali Al Omairi Abu AlHassan

Thanks Richard, clearfix solution is a great idea for getting rid of the unwanted floating (I'll consider to use that ;) ) but I was talking about the lists in the second level they are absolutely positioned relative to the outer list. it is just like they were removed from the page and anchored to the outer list using left, right, and top. what I am for is how to stretch the height of the outer list without setting the height with java script.

Help people,so poeple can help you.

Richard Deeming

As far as I'm aware, there's no CSS solution to make parent elements stretch to fit absolutely-positioned children. Javascript is the only solution I've seen.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Ali Al Omairi Abu AlHassan

because they don't belong to the page flow but anchored to the page, right? :)

Help people,so poeple can help you.

Richard Deeming

Yes, that's right.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer