Problems with H1 tag

Forum Moderators: not2easy

Message Too Old, No Replies

Problems with H1 tag

ihorko

1:27 pm on Sep 4, 2009 (gmt 0)

I have a breadcrumbs in span tags, first bread crumb is "Home", rest of them shoulb be in <h1> tag, all breadcrumbs should show in one line, but <h1> breaks line.
If I remove <h1> tag from code below, it works fine, all breadcrumbs are one line. Please help how resolve it with CSS

Example Code:

<html>
<head></head>
<body>
<table cellspacing="0" cellpadding="0" width="100%" border="1">
<tbody>
<tr>
<td nowrap="nowrap">
<a href="./">Home</a>
<h1>
<span>
ť <a href="page1.html">BreadCrumb1</a>
</span>
<span >
ť <a href="page2.html">BreadCrumb2</a>
</span>
</h1>
ť
<a href="page3.html">
<img style=" src="/IMD/false10.gif">
</a>
<span>
10 items found
</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>

marcel

1:40 pm on Sep 4, 2009 (gmt 0)

h1 is a block element, which will cause a line break unless styled differently. You can make it behave like an inline element with one of the following rules, (depending on the situation):
float: left;
display: inline;
display: inline-block;

But I question your use of h1 elements in a breadcrumb, what are you trying to achieve?

ihorko

1:48 pm on Sep 4, 2009 (gmt 0)

thank you for reply.
Be honest, I don't know, customer wants and asked me to do it, and I spent much time and can't find out solution.

I have tryed
<td nowrap="nowrap" style="float: left; display: inline; display: inline-block;">
and
<h1 style="float: left; display: inline; display: inline-block;">

both doesn't work, line still break

marcel

1:56 pm on Sep 4, 2009 (gmt 0)

You can make it behave like an inline element with one of the following rules, (depending on the situation)

wyweb

1:58 pm on Sep 4, 2009 (gmt 0)

Give h1 more style. Line height for instance.

line-height:

ihorko

2:02 pm on Sep 4, 2009 (gmt 0)

when i added style="line-height:10px" it decrease height of h1 tag, but still in new line, it should be next to "Home" link

marcel

2:03 pm on Sep 4, 2009 (gmt 0)

<h1 style="display: inline;"> is all you need

wyweb

2:04 pm on Sep 4, 2009 (gmt 0)

Well lose the header tag altogether. Get creative.

ihorko

2:10 pm on Sep 4, 2009 (gmt 0)

:) Thanks, but all breadcrumbs should be in <h1> tag except "Home"

ihorko

3:44 pm on Sep 4, 2009 (gmt 0)

Thank you Marcel very much, this really works!