I'm trying to make a CSS tab (something like this), it should have only three buttons, but I can't seem to work it out. If you check the source code of that link, you'll notice he just uses an unnordered list! I spent hours trying to float the list... ... And I can't understand why his simple solution works. He uses spans, I don't get it... I need the tabs to be positioned to the right of the screen, flowing from right to left. The tabs must be wrapped up in a div so it appears to be "inside" the header... My sheet would look like this...:
div#header {width: 760px;height: 135px;} div#header .photo{width: 465px;background-color: #009;float: left;} div#header div.wrapper{width: 285px;margin-left: 470px;} div#header div.wrapper .logo{width: 285px;height: 115px;background-color: #06c;} div#header div.wrapper .menu{width: 285px;height: 20px;background-color: #fc0;margin: 0;}
The HTML looks like this:
<body> <div id="header"> <div id="header" class="photo"></div> <div id="header" class="wrapper"> <div id="header" class="logo"></div> <div id="header" class="menu"</div> </div> </div></body>
The menu should be wrapped in the class="menu" div. I tried to use an <ul> which list items have anchors inside. I floated it to right, I floated the anchors to the right as well and, when I did that, the list broke through the div. Any help? Or anyone could explain the solution I linked to? The style of my <ul> is something like this:
ul#menu {list-style-type:none;float:right;}ul#menu li{ display: inline; }ul#menu a{background-color:#some_color;padding:some_padding; /*I don't know why, FF2 ignores the anchors padding when calculating line-height*/float:right;}
... and the HTML to the lists...:
<ul id="menu"> <li><a href="#">Item 1</a></li> . . . .</ul>
Thanks in advance... and sorry about the huge chunk of text...