Making headers honor images?

[Jan Danielsson]

Hello all,

Please take a look at http://user.it.uu.se/~jada3673/. As you can
see, the header stretches too far, and is "behind" the image - which I
don't want. How do I make the header tag honor the width of the image?

Thankful for any pointers.

 

[Leonard Blaisdell]

http://user.it.uu.se/~jada3673/

It looks fine in Safari. The rabbit is below the header and slightly to
the left of the menu. The header doesn't encroach on the menu. Now let's
reduce the viewport. It really looks good.

leo

 

[saz]

Hello all,

Please take a look at http://user.it.uu.se/~jada3673/. As you can
see, the header stretches too far, and is "behind" the image - which I
don't want. How do I make the header tag honor the width of the image?

Thankful for any pointers.

I'm not quite sure what you are asking, but I don't see any problem. I
think it looks good they way I see it in IE6 and FireFox.

 

[Arne]

Hello all,

Please take a look at http://user.it.uu.se/~jada3673/. As you can
see, the header stretches too far, and is "behind" the image - which I
don't want. How do I make the header tag honor the width of the image?

Thankful for any pointers.

Hej Jan, I guess your "complaint" is about the h2 header with the text
"Browsers"? You can add a right margin for that header, e.g. 200px to
make it stop at the left of the rabbit image.

BTW, You have some fixing to to before the page validates.

--
/Arne

Top posters will be ignored. Quote the part you
are replying to, no more and no less! And don't
quote signatures, thank you.

 

[Rincewind]

Hello all,

Please take a look at http://user.it.uu.se/~jada3673/. As you can
see, the header stretches too far, and is "behind" the image - which I
don't want. How do I make the header tag honor the width of the image?

Thankful for any pointers.

In your css file you could add: width: ???px;
which will work in Firefox and IE.

 

[Jan Danielsson]

I'm not quite sure what you are asking, but I don't see any problem. I
think it looks good they way I see it in IE6 and FireFox.

When I watch it, it looks like this:


Blah blah blah +--------------+
blah blah blah | Rabbit |
Blah blah blah | |
| |
+---------------| |+
| Blah | || <- Notice the header sticking out
+---------------| |+ here
| |
+--------------+

While I want this:


Blah blah blah +--------------+
blah blah blah | Rabbit |
Blah blah blah | |
| |
+-------------+ | |
| Blah | | |
+-------------+ | |
| |
+--------------+

So, I want the header box to "flow around the image", in the same the
paragraph does.

 

[Jan Danielsson]

Hej Jan, I guess your "complaint" is about the h2 header with the text
"Browsers"? You can add a right margin for that header, e.g. 200px to
make it stop at the left of the rabbit image.

Hmm.. Isn't there some other way? I mean, internally, the paragraph
block must be obeying some rule since it flows properly around the
image. I assumed that there was a way to make the h2 header do the same?
I guess this falls into more of an css issue than html..

Am I asking in the wrong group, btw?

BTW, You have some fixing to to before the page validates.

Yeah, I know - it's a priority, just not the highest one right now.

 

[Arne]

Hmm.. Isn't there some other way? I mean, internally, the paragraph
block must be obeying some rule since it flows properly around the
image. I assumed that there was a way to make the h2 header do the same?
I guess this falls into more of an css issue than html..

I'm afraid there is no other way than add a width or right margin to
the block element, as it is now. It's not the <p> block that flows,
it's the text within the block that flows. The same will happend for
the header text if you make it long enough to reach past the image.

If you set the content left of the image within a parent div block
with a specific width that don't reach to the image, then the child
blocks gets as wide as the parent block.

Am I asking in the wrong group, btw?

Well, this is more about CSS than HTML, so the issue would be more on
topic on groups like comp.infosystems.www.authoring.stylesheets

--
/Arne

Top posters will be ignored. Quote the part you
are replying to, no more and no less! And don't
quote signatures, thank you.

 

[Jonathan N. Little]

Jan Danielsson wrote:

When I watch it, it looks like this:


Blah blah blah +--------------+
blah blah blah | Rabbit |
Blah blah blah | |
| |
+---------------| |+
| Blah | || <- Notice the header sticking out
+---------------| |+ here
| |
+--------------+

While I want this:


Blah blah blah +--------------+
blah blah blah | Rabbit |
Blah blah blah | |
| |
+-------------+ | |
| Blah | | |
+-------------+ | |
| |
+--------------+

So, I want the header box to "flow around the image", in the same the
paragraph does.

The only way I know of, add in *bold* in your document

<h2 *style="margin-right: 195px;"*>Browsers</h2>