Forum Moderators: not2easy
I'm using a set of hyperlinks to simulate the selection part of a tab page construct. I can't figure out the proper CSS to use so that the rows of hyperlinks don't overlap each other when the browser is made narrow and the hyperlinks flow from one row into more than 1 row. The page below shows my issue. If I eliminate the "padding" attribute from the .TabItemActive and .TabItemInactive styles, there is no overlap when they flow into rows.
Can anyone offer help on the styling that will solve my problem?
TIA
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>
Trial Page
</title>
<style>
.TabContainer
{
font-family: Arial, Sans-Serif;
font-size: 8pt;
width: auto;
margin-top: 4px;
padding-top: 6px;
background-color: azure;
}
.TabItemActive
{
border-top: 1px solid #f5f5f5;
border-left: none;
border-right: 1px solid #aaaaaa;
border-bottom: none;
text-decoration: none;
background-color: #bbbbbb;
text-align: center;
padding: 6px 2px 0px 2px;
}
.TabItemInactive
{
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
border-right: 1px solid #aaaaaa;
border-bottom: none;
background-color: #d3d3d3;
text-align: center;
text-decoration: none;
padding: 6px 2px 0px 2px;
}
.TabItemInactive:hover
{
background-color: #808080;
}
</style>
</head>
<body>
<div id="PanelNavView1" class="TabContainer">
<span id="lblView1" class="TabItemActive">Tab for View1</span>
<a id="lbView2FromView1" class="TabItemInactive" href="">Tab for View2</a>
<a id="lbView3FromView1" class="TabItemInactive" href="">Tab for View3</a>
<a id="lbView4FromView1" class="TabItemInactive" href="">Tab for View4</a>
<a id="lbView5FromView1" class="TabItemInactive" href="">Tab for View5</a>
<a id="lbView6FromView1" class="TabItemInactive" href="">Tab for View6</a>
</div>
</body>
</html>
Note also there is no "Inactive" now, it's just changed to .TabContainer a, ul, and li - this is so you don't have to clutter up the html with redundant classes.
I used em's for the line height so if the text is resized it should resize the tab with it, but it messes with your top margin a little bit. Adjust as required.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype all on one line -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<style type="text/css">
.TabContainer {
font-family: Arial, Sans-Serif;
font-size: 8pt;
margin-top: 4px;
padding-top: 6px;
background-color: azure;
}
.TabContainer ul { margin:0; padding:0; }
.TabContainer ul li {
display: inline;
list-style: none;
white-space: nowrap;
}
.TabContainer a, .TabItemActive {
line-height: 2.2em;
border-top: 1px solid #f5f5f5;
border-right: 1px solid #aaaaaa;
text-decoration: none;
padding: 6px 2px 0px 2px;
text-align: center;
}
.TabItemActive { background-color: #bbbbbb; }
.TabContainer a { border-left: 1px solid #f5f5f5; background-color: #d3d3d3; }
.TabContainer a:hover { background-color: #808080; }
</style>
</head>
<body>
<div id="PanelNavView1" class="TabContainer">
<ul>
<li class="TabItemActive">Tab for View1</li>
<li><a href="">Tab for View2</a></li>
<li><a href="">Tab for View3</a></li>
<li><a href="">Tab for View4</a></li>
<li><a href="">Tab for View5</a></li>
<li><a href="">Tab for View6</a></li>
</ul>
</div>
</body>
</html>
<li class="TabItemActive">Tab for View1</span></li>
to
<li><span class="TabItemActive">Tab for View1</span></li>
There are two more issues with the solution that I can't figure out:
- when decreasing the width of the browser window to the point just before the end tab wraps to the next row, you can make it disappear although it seems to still be in the top row as the cursor changes when you hover over it
- when the tabs wrap to the second row, the leftmost button is narrower than the rest and its text extends past the left of the background (very noticeable when hovering over it)
Anyone have solutions to these?
- replacing the spaces in the text of the <li> elements with
- removing the "white-space: nowrap" style from the ".TabContainer ul li" selector's styling
Now when the tabs wrap into rows, tha tabs in the bottom row are sized the same as the top row's tabs. They are, however, offset to the right relative to the top row tabs by the 1px border width. That, I can live with. If someone else can't and would like to solve it, I'm all ears.
Thanks.
<li class="TabItemActive">Tab for View1</li>
to
<li><span class="TabItemActive">Tab for View1</span></li>
Ahh, this is only a problem in IE. Missed it. Instead of bloating up the HTML, try experimenting with the margin attribute on TabItemActive as a list item.
- when decreasing the width of the browser window to the point just before the end tab wraps to the next row, you can make it disappear although it seems to still be in the top row as the cursor changes when you hover over it
The reason for the difference in widths - one I noticed - is because you have no widths assigned to these. You might want to set a width on the selector .TabContainer a, .TabItemActive in ems so it's consistent when resized.
Per your other fixes - instead of adding , you should really adjust this in style sheets instead of using html or entities to fake it. You should be able to make all the fixes you mentioned by experimenting with the margins on TabItemActive.
They are, however, offset to the right relative to the top row tabs by the 1px border width.
I wondered why you had a border in one state and not another, which is naturally going to take up space. Try adding a pixel to the margin on hover to keep it the same.
