Jump to content
  • Advertisement
Sign in to follow this  
v0dKA

[web] Small Troubles with Basic CSS [solved]

This topic is 5027 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
Advertisement
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
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!