Prev: CSS dropdown menu
Next: (CSS) Position relative to other fixed objects on a page/browser?
From: Disc Magnet on 22 Jun 2010 04:24
(Sorry for the crossposting. I posted it in alt.html and then later
found this newsgroup.)

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?
From: Thomas 'PointedEars' Lahn on 22 Jun 2010 06:14
Disc Magnet wrote:

> (Sorry for the crossposting. I posted it in alt.html and then later
> found this newsgroup.)

JFYI: There is no crossposting. A crosspost(ing), also "X-Post", is a
posting to two or more newsgroups at the same time (with two or more comma-
separated newsgroup names in the Newsgroups header), with the *same* message
(headers, incl. Message-ID, and message body). Your posting has only one
newsgroup name in the Newsgroups header.

What you have done is called a multi-posting. When made to different
newsgroups consecutively, it is generally frowned upon because it is not
possible for a machine and harder for a person to make the relation between
two postings with two or more different Message-IDs; the posting would
appear unread in the other newsgroup even though it has been read in the
first. It is also a social issue: a request should be focused, so as not to
annoy people who are not interested in it (Usenet is organized into groups
of topics, not people), and to not give the impression that the requester
does not know what they are doing.

However, in this case multi-posting was acceptable because a crossposting
would have meant crossposting over two different top-level hierarchies with
different guidelines and rules, and because of why you did it.

So, apology accepted. But you should get a real name if you want to be
taken seriously here.

> 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.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
See below.

> [...]
>
> 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?

For example, a narrower viewport. Those "tabs" would not wrap.

> The alternative he suggests is: "float: left" and "positive: relative;
> top: 1px".

.... and `display: block', I presume.

> How is this better?

It wraps with the container element (or the viewport), and gives you control
over the distances between the "tabs", and between "tab" text and border.

With `display: inline', you are at the mercy of the user agent, how it
renders inline content; in particular, how it renders inline list items
(which differs between user agents). And at least the horizontal distances
would depend on the the font size. To see that, it might help to think of
setting the LI elements to `display:inline' as if

<ul>
<li>...</li>
<li>...</li>
</ul>

was transformed into

<div><span>...</span> </span>...</span></div>

while floating block elements would be more like

<div>
<div>...</div><div>...</div>
</div>

where you can define the distance between the inner DIV elements.


HTH

PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
From: Dr J R Stockton on 23 Jun 2010 12:26
In comp.infosystems.www.authoring.stylesheets message <1708702.mheAe9J7N
a(a)PointedEars.de>, Tue, 22 Jun 2010 12:14:06, Thomas 'PointedEars' Lahn
<PointedEars(a)web.de> posted:

>
>However, in this case multi-posting was acceptable because a crossposting
>would have meant crossposting over two different top-level hierarchies with
>different guidelines and rules, and because of why you did it.

To which there can be no rational objection.

--
(c) John Stockton, nr London UK. ???@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Check boilerplate spelling -- error is a public sign of incompetence.
Never fully trust an article from a poster who gives no full real name.
 | 
Pages: 1
Prev: CSS dropdown menu
Next: (CSS) Position relative to other fixed objects on a page/browser?