[thelist] Creating a tabbed menu - XHTML + CSS

David Bindel dbindel at austin.rr.com
Sat Apr 20 20:50:01 CDT 2002


>> I have a horizontal menu whose items are boxed using CSS.
>> Below it is a content area which is boxed as well.
>> I am trying to align the bottom border of the menu to go
>> with the top border of the content are and create a
>> tabbed menu.

I *think* I understand what you are saying.

>> I tried this so far by positioning using pixels, but that
>> does not give me uniform outcomes.

Instead of positioning with pixels, try this:

<html>
<head>
<style type="text/css">
body {
	margin: 0px;
	background: #66F;
}
#menu {
	margin: 50px 500px 0px 125px;
	background: #F66;
	border-color: #000;
	border-style: solid;
	border-width: 2px 2px 0px 2px;
}
#content {
	margin: 0px 100px 0px 100px;
	background: #6F6;
	border: 2px solid #000;
}
</style>
</head>
<div id="menu">this is the menu</div>
<div id="content">this is the content</div>
</body>
</html>

It sets the margins of the DIV's equal to 0 so there is no space
inbetween them.  Therefore they are right next to each other.  You'll
notice that when I specify widths (for example, "border-width: 2px 2px
0px 2px;") in CSS that the order is in this pattern: Top Right Bottom
Left.  So that would set the top, left and right border width to 2px and
would set the bottom border width to 0px.

>> I am searching the web, and I am not getting the results
>> I would like. Mainly the rendering is inconsistent across
>> browsers.

Unless this is a major inconsistency, you really should try to ignore
it.  All browsers are going to have their own quirks.  Bill Gates said
so.

>> I guess I could use tables, but I am hoping there is an
>> alternative.

NEVER USE TABLES!!!

>> Thank you for all the help in advance.

You're Welcome




More information about the thelist mailing list