Sign in to follow this  

[web] Small Troubles with Basic CSS [solved]

This topic is 4815 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I'm trying to make a special sort of paragraph for my web page. The paragraph will have the style of an announcement - it will be bordered. It looks a lot like the "quote box" here on gamedev. Here's the definition of that "paragraph" (announcement) as it appears in my < style > tag: p.announce {background-color: #35417f; margin: .5cm 1cm .5cm 1cm; text-align: center; font-weight: bold; font-size: 10px; border-style: solid; border-color: #ffffff; border-width: 1px; padding: .25cm 1cm} It works fine, up to a point. A nice border is drawn, and everything is formated quite nicely, however, the second I try to put a heading (< h1 > - < h6 >) or a horizontal rule (< hr >) inside the announcement paragraph, it's no longer considered a "paragraph", and that totally kills the formatting, making the announcement appear as regular text on the page (the only thing remaining of the actual announcement are the borders). How can I revise my defenition to suit headings and lines? What is a good alternative? I don't prefer tables because I want ease of use. If I need an announcement, I just add a class="announce" to my paragraph tag, and I have a nicely formatted announcement. Rewriting tables every time is a pain - I'm sure you understand why. Thanks for any help! [Edited by - v0dKA on October 10, 2004 11:08:56 AM]

Share this post


Link to post
Share on other sites
Instead of declaring a paragraph you could declare a div and use the same style rules (although you may want ot adjust the float and clear values, depending on the context of the page). So declare your style like:

.announce {background-color: #35417f; etc... }

And use it with a div or other block-level element that isn't broken with the h{1-6|r} tags.

Share this post


Link to post
Share on other sites
I'm sure Evolutional knows this but it wasn't explicit in his post so I'll add this: the header tags h1..h6 are block-level elements, and therefore cannot appear inside a paragraph element. Most browsers get over this by assuming you wanted to end the paragraph at that point. This makes sense, as when you think about normal text, headers are not part of paragraphs, but stand separately.

As mentioned already, you can instead use a div element as it can happily contain other blocks. Your multiple paragraphs and headings become part of a div with your announcement style.

Share this post


Link to post
Share on other sites
Ah, yes - sorry I didn't make it more clear. Nice explanation there, Kylotan :)

If in doubt, look up the HTML specs on W3C, you'll get an explanation about what is a block level element and what is inline. For example, the W3C HTML4 spec for P elements explictily states:

Quote:
The P element represents a paragraph. It cannot contain block-level elements (including P itself).


It's a farily common mistake when learning CSS - I remember puzzling over something similar when I first set out.

Share this post


Link to post
Share on other sites

This topic is 4815 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this