Skip to main content
gamedev.net
🔒 Locked

[web] Small Troubles with Basic CSS [solved]

Started by v0dKA 3 replies 1.2k views
Original Post
v0dKA
v0dKA
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]
.:-v0d[KA]-:. <<>>
evolutional
evolutional
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.
Kylotan
Kylotan
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.
evolutional
evolutional
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.
v0dKA
v0dKA
Thanks for all you help! It works fine now!
.:-v0d[KA]-:. <<>>

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.

Sign in to reply to this topic.