By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,501 Members | 2,790 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,501 IT Pros & Developers. It's quick & easy.

Linearizing Headers

P: n/a
I have an <h1followed by an <h2>, I want them to be linear and look
like this:

This is my header This is my sub-header

Anyone know how I can do that?

Thanks

Oct 18 '06 #1
Share this Question
Share on Google+
17 Replies


P: n/a

ta****@gmail.com wrote:
I have an <h1followed by an <h2>, I want them to be linear and look
like this:

This is my header This is my sub-header
Use float:left

Read http://brainjar.com/csspositioning

Oct 18 '06 #2

P: n/a
Broken link...

On Oct 18, 6:26 am, "Andy Dingley" <ding...@codesmiths.comwrote:
taw...@gmail.com wrote:
I have an <h1followed by an <h2>, I want them to be linear and look
like this:
This is my header This is my sub-headerUse float:left

Readhttp://brainjar.com/csspositioning
Oct 18 '06 #3

P: n/a

ta****@gmail.com wrote:
Broken link...
Then I'm sorry, it mustn't be possible to code what you wanted to do.
Maybe you should buy a copy of FrontPage and use that?

Oct 18 '06 #4

P: n/a
In article <11**********************@k70g2000cwa.googlegroups .com>,
"Andy Dingley" <di*****@codesmiths.comwrote:
ta****@gmail.com wrote:
I have an <h1followed by an <h2>, I want them to be linear and look
like this:

This is my header This is my sub-header

Use float:left

Read http://brainjar.com/csspositioning
Your link needs slashing!

http://brainjar.com/css/positioning/
Oct 18 '06 #5

P: n/a
Thank you! :)

On Oct 18, 10:12 am, David Stone <no.em...@domain.invalidwrote:
In article <1161178005.160454.260...@k70g2000cwa.googlegroups .com>,
"Andy Dingley" <ding...@codesmiths.comwrote:
taw...@gmail.com wrote:
I have an <h1followed by an <h2>, I want them to be linear and look
like this:
This is my header This is my sub-header
Use float:left
Readhttp://brainjar.com/csspositioningYour link needs slashing!

http://brainjar.com/css/positioning/
Oct 18 '06 #6

P: n/a
Scripsit ta****@gmail.com:
I have an <h1followed by an <h2>, I want them to be linear and look
like this:

This is my header This is my sub-header
If you want that, do you really have the main heading of a page followed by
a second-level heading? If you have one heading with two parts, then the
logical structure is different, and the markup should be different
(basically <h1with <spaninside), and then the starting point of the CSS
problem is different.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Oct 18 '06 #7

P: n/a

Jukka K. Korpela wrote:
If you want that, do you really have the main heading of a page followed by
a second-level heading?
Regularly.

Oct 18 '06 #8

P: n/a
Scripsit Andy Dingley:
Jukka K. Korpela wrote:
>If you want that, do you really have the main heading of a page
followed by a second-level heading?

Regularly.
And have them displayed in the same line, as the OP wants? That is,

This is the main heading of the page This is the first 2nd level heading

Sounds rather odd to me.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Oct 18 '06 #9

P: n/a
Hmm, well, I am just now starting to make everything complient, so how
do you think it should be structured? I thought that having it as
headers was odd as well, but I'm not entirely sure what else to use.

I am simply trying to add this:
<div id="credits">
<h1>Design by Jon Hughes</h1>
<h2>of Phazm Webservices</h2>
<h3><a href="http://www.phazm.net/">phazm.net</a></h3>
</div>

I can't imagine I should use an unordered list, but I'm not so sure
just using span tags is accurate either.

On Oct 18, 12:21 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Scripsit Andy Dingley:
Jukka K. Korpela wrote:
If you want that, do you really have the main heading of a page
followed by a second-level heading?
Regularly.And have them displayed in the same line, as the OP wants? That is,

This is the main heading of the page This is the first 2nd level heading

Sounds rather odd to me.

--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
Oct 18 '06 #10

P: n/a
Scripsit ta****@gmail.com:
Hmm, well,
You might consider learning how to quote on Usenet.
<div id="credits">
<h1>Design by Jon Hughes</h1>
<h2>of Phazm Webservices</h2>
<h3><a href="http://www.phazm.net/">phazm.net</a></h3>
</div>
That's surely all wrong markup semantically. Well, not all; the <div>
element is OK, I guess.
I can't imagine I should use an unordered list, but I'm not so sure
just using span tags is accurate either.
It is certainly better to use semantically empty markup than to use
semantically wrong markup. As a bonus, you get no nasty default rendering
when CSS is off and no nasty rendering due to user style sheets that render
headings in adequately prominent ways.

Here's adequate markup for you:

<div id="credits">
<span class="who">Design by Jon Hughes</span>
of <a href="http://www.phazm.net/">Phazm Webservices</a>
</div>

Then you can just set properties as desired. Default properties won't
disturb there: <divimplies block rendering and <ahas default rendering
that you shouldn't interfere with (too much).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Oct 18 '06 #11

P: n/a
Thanks for your help,

Question:

What is the reasoning behinf having my name in a span tag, while
leaving the rest out?

On Oct 18, 1:12 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Scripsit taw...@gmail.com:
Hmm, well,You might consider learning how to quote on Usenet.
<div id="credits">
<h1>Design by Jon Hughes</h1>
<h2>of Phazm Webservices</h2>
<h3><a href="http://www.phazm.net/">phazm.net</a></h3>
</div>That's surely all wrong markup semantically. Well, not all; the <div>
element is OK, I guess.
I can't imagine I should use an unordered list, but I'm not so sure
just using span tags is accurate either.It is certainly better to use semantically empty markup than to use
semantically wrong markup. As a bonus, you get no nasty default rendering
when CSS is off and no nasty rendering due to user style sheets that render
headings in adequately prominent ways.

Here's adequate markup for you:

<div id="credits">
<span class="who">Design by Jon Hughes</span>
of <a href="http://www.phazm.net/">Phazm Webservices</a>
</div>

Then you can just set properties as desired. Default properties won't
disturb there: <divimplies block rendering and <ahas default rendering
that you shouldn't interfere with (too much).

--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
Oct 18 '06 #12

P: n/a

ta****@gmail.com wrote:
I am simply trying to add this:
<div id="credits">
<h1>Design by Jon Hughes</h1>
<h2>of Phazm Webservices</h2>
<h3><a href="http://www.phazm.net/">phazm.net</a></h3>
</div>
Man, that's ugly. Why should these be treated as any sort of "heading"
at all ?

If they're supposed to be a "heading", what do they "head" ? What are
they the title, caption, label or introduction to?
<div id="credits" class="credits" >
Design by
<span class="author" >Jon Hughes</span>
of
<span class="author-agency" >Phazm Webservices</span>
<a class="author-link"
href="http://www.phazm.net/">http://phazm.net</a>
</div>

CSS can use just the pairs of classes to select :

..credits {
font-size: 67%;
}

..credits .author-agency {
font-size: 120%;
}
You should either make "Phazm Webservices" the link itself, or make the
http:// visible in the page text (at least for printing) so that any
paper copy is more obviously a URL, even if it loses normal screen link
highlighting.

As to Jukka's point about running consecutive headers on the same line.
I do a lot of automatic document publishing of big technical documents
with lots of nested headers. I don't think I've ever run <h1and <h2>
together on the same line, but I do this quite often with <h2<h3and
<h3<h4>, for the first "lower level" heading in the section.
Otherwise you can easily waste a lot of page height just showing
section headings.

Oct 18 '06 #13

P: n/a
Alright, consider me learned :) I wont make anything a header if it
doesn't head anything.

So my new code is thus:
<div id="credits">
Design by
<span class="author">Jon Hughes</span>
<span class="studio"><a href="http://www.phazm.net/">Phazm
Webservices</a></span>
</div>

Now, I'm trying to figure out how to align "Design by Jon Hughes" to
the left of a 50% div (width: 50%; for #credits) and align "Phazm
Webservices" to the right.

Any ideas there?

On Oct 18, 4:01 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
taw...@gmail.com wrote:
I am simply trying to add this:
<div id="credits">
<h1>Design by Jon Hughes</h1>
<h2>of Phazm Webservices</h2>
<h3><a href="http://www.phazm.net/">phazm.net</a></h3>
</div>Man, that's ugly. Why should these be treated as any sort of "heading"
at all ?

If they're supposed to be a "heading", what do they "head" ? What are
they the title, caption, label or introduction to?

<div id="credits" class="credits" >
Design by
<span class="author" >Jon Hughes</span>
of
<span class="author-agency" >Phazm Webservices</span>
<a class="author-link"
href="http://www.phazm.net/">http://phazm.net</a>
</div>

CSS can use just the pairs of classes to select :

.credits {
font-size: 67%;

}.credits .author-agency {
font-size: 120%;

}You should either make "Phazm Webservices" the link itself, or make the
http:// visible in the page text (at least for printing) so that any
paper copy is more obviously a URL, even if it loses normal screen link
highlighting.

As to Jukka's point about running consecutive headers on the same line.
I do a lot of automatic document publishing of big technical documents
with lots of nested headers. I don't think I've ever run <h1and <h2>
together on the same line, but I do this quite often with <h2<h3and
<h3<h4>, for the first "lower level" heading in the section.
Otherwise you can easily waste a lot of page height just showing
section headings.
Oct 18 '06 #14

P: n/a

ta****@gmail.com wrote:
So my new code is thus:
<div id="credits">
I'd use a class in there as well as an id and use the class as the CSS
selector. Hanging CSS off an id, especially an id'ed element that has
more structure inside it, often becomes awkward in the future.

><span class="studio"><a href="http://www.phazm.net/">Phazm
No point in having the <spanas well as the <aIt's just inline
element(s) with a class on them. You need the <a>, but there's no
reason you have to have two separate elements just to hang a class on
one of them - just put it onto the <a>.

Oct 18 '06 #15

P: n/a
"I'd use a class in there as well as an id and use the class as the CSS
selector. Hanging CSS off an id, especially an id'ed element that has
more structure inside it, often becomes awkward in the future."
How so? I had the goal in my mind to use the very least amout of code
possible, so I would rather be able to use either id or class, but not
both. In what cases is it beneficial to have both?
On Oct 18, 4:26 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
taw...@gmail.com wrote:
So my new code is thus:
<div id="credits">I'd use a class in there as well as an id and use the class as the CSS
selector. Hanging CSS off an id, especially an id'ed element that has
more structure inside it, often becomes awkward in the future.
<span class="studio"><a href="http://www.phazm.net/">PhazmNo point in having the <spanas well as the <aIt's just inline
element(s) with a class on them. You need the <a>, but there's no
reason you have to have two separate elements just to hang a class on
one of them - just put it onto the <a>.
Oct 18 '06 #16

P: n/a

ta****@gmail.com wrote:
"I'd use a class in there as well as an id and use the class as the CSS
selector. Hanging CSS off an id, especially an id'ed element that has
more structure inside it, often becomes awkward in the future."

How so? I had the goal in my mind to use the very least amout of code
possible,
I might worry about that on a mobile site with no bandwidth and no
images - otherwise HTML volume just doesn't matter (unless it gets
ridiculous).
so I would rather be able to use either id or class, but not
both. In what cases is it beneficial to have both?
Then just use class.

In general, do DHTML with id and CSS with class. if you might use both,
then add both as attributes.

The reason for favouring class in CSS selectors is the high priority
that the CSS cascade rules apply to id. If an id in an outer element
matches, it's hard to apply a more specific rule to inner elements with
a class on them.

Oct 19 '06 #17

P: n/a
"Andy Dingley" <di*****@codesmiths.comwrites:
ta****@gmail.com wrote:
so I would rather be able to use either id or class, but not
both. In what cases is it beneficial to have both?
IDs have uses outside of CSS (<label for="xxx">, <td headers="xxx">,
as well as the previously mentioned scripting uses) and must be unique
within a document.

Classes are (in practical terms) only useful for CSS, and many
elements in a document can share the same class. You can do things like
<p class="newtoday">...</p>
....
<ul...
<li class="newtoday">...</li>
.... </ul>
and have
..newtoday { font-weight: bold; }

The non-CSS uses of IDs can of course be used for styling too:
th#pricecol, td[headers~=pricecol] { background: #ff9; color: #000; }

Use whichever of class or ID is more appropriate for the current
situation (I'd agree with Andy that class is usually more appropriate)
The reason for favouring class in CSS selectors is the high priority
that the CSS cascade rules apply to id. If an id in an outer element
matches, it's hard to apply a more specific rule to inner elements with
a class on them.
Though that's only a problem when doing something like

div#id span {...}
div.class span {...}

<div id="id"><div class="class"><span>...</span></div></div>

I'd place the rule that IDs must be unique within a document as a more
important reason for using class for selectors, since there aren't
that many items that will only appear once.

--
Chris
Oct 19 '06 #18

This discussion thread is closed

Replies have been disabled for this discussion.