I am working on tabs for my website which is mocked up here:
Mockup
The behavior I'm looking for is for the main content to have a continuous 1px black solid border, with the tabs all resting on top.
When a tab is either :hovered or belonging to the active page, I want to style to change to white background, black text, and a white bottom border. So far so good with that.
My issue is with the implementation and which will be easier to tune and more browser-compatible. Right now I have some sloppy things taking place, such as the "top" border being drawn by the UL (seemed to allow me to get it to "disappear") and stretching the sides up ~30px by having a <br> at the top of the main content area. Is there a more sensible way to achieve this effect?
I tried raising the Z-factor of the a:hover pseudo class so that it's white bottom border would be topmost and over-draw the black border when it was a continuously drawn border around the main content (and not a border-bottom of the UL) and that didn't result in my desired effect...
My other issue which I would like to fix is that currently the dark yellow borders on each <li> intrude into the content border. Is there a way to get those drawn with a different priority? I did some searching on this and wasn't able to come up with much. Thanks for an answer, you all are so helpful!
Alex
Full Version: Overlapping borders and technique critique
The <br> could be replaced by adding padding to div#main or margin to the h3 at the top of div#main.
QUOTE(Darin McGrew @ Feb 1 2008, 01:33 PM) 
The <br> could be replaced by adding padding to div#main or margin to the h3 at the top of div#main.
That works excellently. I'm working locally, (but that's not a big update to show you all), but does anyone know of information regarding the drawing order of elements in various browsers? I've found that:
1) Z-index only works in absolutely positioned elements
and
2) My "white bottom border" trick only works in firefox.
Oooh, I'm close to a solution, I can smell it!
I can up with a mostly satisfactory solution:
If I make the position of the a:hover pseudo-class "relative" but don't change its position relative TO anything, it still gets displayed within the inline flow where it needs to be. What this does is make the z-index applicable, so I bump that to 50 (it's that high for emotional reasons
) and when I hover, the white border will cover up the #main div's border.
I say mostly satisfactory because when two colors of border intersect, it seems to make a diagonal split instead of a nice cutoff, but what can you do. This leaves a little "rounding" effect where the tab now intersects the page.
If anyone has any leads on that...
If I make the position of the a:hover pseudo-class "relative" but don't change its position relative TO anything, it still gets displayed within the inline flow where it needs to be. What this does is make the z-index applicable, so I bump that to 50 (it's that high for emotional reasons
) and when I hover, the white border will cover up the #main div's border.I say mostly satisfactory because when two colors of border intersect, it seems to make a diagonal split instead of a nice cutoff, but what can you do. This leaves a little "rounding" effect where the tab now intersects the page.
If anyone has any leads on that...
There are loads of approaches for making tabbed menus with CSS. Mileage may vary but I find the following to be the simplest way for this kind of tab. It uses a negative margin to ensure the nav overlaps the main content:
CODE
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
ul {display:block; position:relative; z-index:10; clear:both; list-style:none; padding:0; margin:0; line-hight:1.5em;}
li {display:block; float:left; margin-right:10px;}
li a {display:block; border:1px solid #333; padding:0 10px; background-color:#FFFFCC;}
li a:hover {border-bottom-color:#fff; background-color:#fff;}
#main {display:block; position:relative; z-index:9; border:1px solid #333; margin-top:-1px; padding:10px;}
.clear {clear:both;}
</style>
</head>
<body>
<ul>
<li><a href="">hmm</a></li>
<li><a href="">hmm</a></li>
<li><a href="">hmm</a></li>
<li><a href="">hmm</a></li>
</ul>
<div class="clear"></div>
<div id="main"><p>Blah blah?</p><p>Yes, blah.</p></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
ul {display:block; position:relative; z-index:10; clear:both; list-style:none; padding:0; margin:0; line-hight:1.5em;}
li {display:block; float:left; margin-right:10px;}
li a {display:block; border:1px solid #333; padding:0 10px; background-color:#FFFFCC;}
li a:hover {border-bottom-color:#fff; background-color:#fff;}
#main {display:block; position:relative; z-index:9; border:1px solid #333; margin-top:-1px; padding:10px;}
.clear {clear:both;}
</style>
</head>
<body>
<ul>
<li><a href="">hmm</a></li>
<li><a href="">hmm</a></li>
<li><a href="">hmm</a></li>
<li><a href="">hmm</a></li>
</ul>
<div class="clear"></div>
<div id="main"><p>Blah blah?</p><p>Yes, blah.</p></div>
</body>
</html>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.