D
Disc Magnet
I was reading this article to make HTML CSS tabs.
In the first selection on "Inline list-items" it suggests how to
create tabs using 'display: inline' and a selected tab by 'padding-
bottom: 1px'. I have created a temporary example here: http://www.webdevout.net/test?0C
(It has a padding-bottom: 2px though since 1px didn't seem enough).
Code reproduced below.
<html>
<head>
<style type="text/css">
#header ul {
list-style: none;
padding:0;
margin:0;
}
#header li {
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
}
#header li a {
padding: 0 1em;
}
#content {
border: 1px solid;
}
#header #selected {
padding-bottom: 2px;
background: white;
}
</style>
</head>
<body>
<div id="header">
<h1>Tabs</h1>
<ul>
<li><a href="#">This</a></li>
<li id="selected"><a href="#">That</a></li>
<li><a href="#">The Other</a></li>
<li><a href="#">Banana</a></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
But later in the section on "Floated list-items", the author says,
"For the very same reason that the "selected" tab works by spilling
over onto the content box, padding cannot be applied to the initial
tab states. They just wouldn't behave."
Under what circumstances the practice of "display: inline" and
"padding-bottom: 2px" can go wrong?
The alternative he suggests is: "float: left" and "positive: relative;
top: 1px". How is this better?
In the first selection on "Inline list-items" it suggests how to
create tabs using 'display: inline' and a selected tab by 'padding-
bottom: 1px'. I have created a temporary example here: http://www.webdevout.net/test?0C
(It has a padding-bottom: 2px though since 1px didn't seem enough).
Code reproduced below.
<html>
<head>
<style type="text/css">
#header ul {
list-style: none;
padding:0;
margin:0;
}
#header li {
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
}
#header li a {
padding: 0 1em;
}
#content {
border: 1px solid;
}
#header #selected {
padding-bottom: 2px;
background: white;
}
</style>
</head>
<body>
<div id="header">
<h1>Tabs</h1>
<ul>
<li><a href="#">This</a></li>
<li id="selected"><a href="#">That</a></li>
<li><a href="#">The Other</a></li>
<li><a href="#">Banana</a></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
But later in the section on "Floated list-items", the author says,
"For the very same reason that the "selected" tab works by spilling
over onto the content box, padding cannot be applied to the initial
tab states. They just wouldn't behave."
Under what circumstances the practice of "display: inline" and
"padding-bottom: 2px" can go wrong?
The alternative he suggests is: "float: left" and "positive: relative;
top: 1px". How is this better?