[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