Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS formatting questions...

Reply
Thread Tools

CSS formatting questions...

 
 
Noozer
Guest
Posts: n/a
 
      09-30-2004
Viewing the code below...

<div class="menu">
<p>Please Choose...</p>
<ul>
<li><a href="link" class="menuitem">Item 1</a></li>
<li><a href="link" class="menuitem">Item 2</a></li>
</ul>
</div>

What CSS would I use to declare that a <p> tag should not add a linefeed
after the </p> tag?

I could just not use the <p> tags at all, but I've been told that it's bad
HTML coding. Is <span> called for here, or possibly an <h1> tag?

Also, I've seen pages that have their own custom tags...

<p>This sentence has a <red>RED</red> word in it.</p>

....is this bad practice? If not, how is it done?


Any comments welcome!


 
Reply With Quote
 
 
 
 
Neal
Guest
Posts: n/a
 
      09-30-2004
On Thu, 30 Sep 2004 15:40:45 GMT, Noozer <(E-Mail Removed)> wrote:

> Viewing the code below...
>
> <div class="menu">
> <p>Please Choose...</p>
> <ul>
> <li><a href="link" class="menuitem">Item 1</a></li>
> <li><a href="link" class="menuitem">Item 2</a></li>
> </ul>
> </div>
>
> What CSS would I use to declare that a <p> tag should not add a linefeed
> after the </p> tag?


What hapens is the p element has a bottom margin. You need to set it to 0.

p {margin-bottom: 0;}

You should class the p, so you can set no bottom margin just on the ones
you want.

> I could just not use the <p> tags at all, but I've been told that it's
> bad
> HTML coding.


Actually, this isn't much of a paragraph, but it's the best choice I think.

> Is <span> called for here,


No way. span is inline, like <em> or <strong>. It's not a block element.

> or possibly an <h1> tag?


Not a h1, but a lower level heading possibly. Is it a heading? Consider
the whole page gets a h1, each section gets a h2, and this might then be a
h3 maybe.

> Also, I've seen pages that have their own custom tags...
>
> <p>This sentence has a <red>RED</red> word in it.</p>
>
> ...is this bad practice? If not, how is it done?


I think it is, unless you author your own DTD which I don't think is a
good choice for you. But you can do this:

CSS:
..red {color: red;}

HTML

<p>This word is <span class="red">red</span>.</p>

But class names should refer to the type of content, not to the style
applied. If you needed to use a different background color for the page,
and as a result the red didn't offer sufficient contrast, you'd have to
change to, maybe:

..red {color: green;}

which is plain silly. Always better to name classes (and IDs) after the
content being styled, not after the style you're applying.
 
Reply With Quote
 
 
 
 
Noozer
Guest
Posts: n/a
 
      09-30-2004
> > <div class="menu">
> > <p>Please Choose...</p>
> > <ul>
> > <li><a href="link" class="menuitem">Item 1</a></li>
> > <li><a href="link" class="menuitem">Item 2</a></li>
> > </ul>
> > </div>
> >
> > What CSS would I use to declare that a <p> tag should not add a linefeed
> > after the </p> tag?

>
> What hapens is the p element has a bottom margin. You need to set it to 0.
>
> p {margin-bottom: 0;}


Doh! Makes sense.

> You should class the p, so you can set no bottom margin just on the ones
> you want.


I want this to affect any <p> tag used in any 'menu' class container. I'd
class any exception to this rule.

> > I could just not use the <p> tags at all, but I've been told that it's
> > bad
> > HTML coding.

>
> Actually, this isn't much of a paragraph, but it's the best choice I

think.

That's what I thought.

> > Also, I've seen pages that have their own custom tags...
> >
> > <p>This sentence has a <red>RED</red> word in it.</p>
> >
> > ...is this bad practice? If not, how is it done?

>
> I think it is, unless you author your own DTD which I don't think is a
> good choice for you. But you can do this:
>
> CSS:
> .red {color: red;}


Just wondering about creating "custom tags" instead of classing a span.
Saves a bit of typing.

Thanks!


 
Reply With Quote
 
Neal
Guest
Posts: n/a
 
      09-30-2004
On Thu, 30 Sep 2004 16:11:36 GMT, Noozer <(E-Mail Removed)> wrote:

>> You should class the p, so you can set no bottom margin just on the ones
>> you want.

>
> I want this to affect any <p> tag used in any 'menu' class container. I'd
> class any exception to this rule.


Use this:

..menu p {property: value;}

This styles any p found within an element classed "menu".

> Just wondering about creating "custom tags" instead of classing a span.
> Saves a bit of typing.


Nah, you don't want to go there.
 
Reply With Quote
 
Noozer
Guest
Posts: n/a
 
      09-30-2004

"Neal" <(E-Mail Removed)> wrote in message
news(E-Mail Removed)...
> On Thu, 30 Sep 2004 16:11:36 GMT, Noozer <(E-Mail Removed)> wrote:
>
> >> You should class the p, so you can set no bottom margin just on the

ones
> >> you want.

> >
> > I want this to affect any <p> tag used in any 'menu' class container.

I'd
> > class any exception to this rule.

>
> Use this:
>
> .menu p {property: value;}


Thanks! I kept trying "p .menu {.."

> This styles any p found within an element classed "menu".
>
> > Just wondering about creating "custom tags" instead of classing a span.
> > Saves a bit of typing.

>
> Nah, you don't want to go there.


Didn't think so.

Thanks again!


 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      09-30-2004
Noozer wrote:

> <p>This sentence has a <red>RED</red> word in it.</p>


It can be done, but it's probably a dumb idea.

Create a file called, say, MyHTML401.dtd and put the following in it:

================================================== ======
<!ENTITY % fontstyle "TT | I | B | BIG | SMALL | RED ">
<!ENTITY % HTML401 PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html401/strict.dtd">
%HTML401;
================================================== ======

Note: if you use the features of HTML 4.01 Transitional, you'll want to
change the 4th and 5th lines. Note also: you can add some more custom
tags after red, using the pipe (|) seperator symbol. Make sure you leave
the existing "TT | I | B | BIG | SMALL" there though (unless you don't use
those tags).

Then upload that file somewhere, to http://example.com/MyHTML401.dtd for
example.

Then at the top of each page you write, include the following special
doctype:
<!DOCTYPE html SYSTEM "http://example.com/MyHTML401.dtd">

Now you have added some custom tags, you'll want to define what they "do".
You can do this with CSS:

red { color: red; font-weight: bold; font-size: bigger; }

But as I said, this is probably a dumb idea. The only time you're really
likely to want to add in your own tags is when you want to use
non-standard HTML extensions like <nobr>, <blink> or <marquee> but still
care about your HTML validating.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Now Playing ~ ./killers/hot_fuss/02_mr_brightside.ogg
 
Reply With Quote
 
Neal
Guest
Posts: n/a
 
      09-30-2004
On Thu, 30 Sep 2004 18:12:46 GMT, Noozer <(E-Mail Removed)> wrote:

> "Neal" <(E-Mail Removed)> wrote in message
> news(E-Mail Removed)...
>> On Thu, 30 Sep 2004 16:11:36 GMT, Noozer <(E-Mail Removed)> wrote:
>> > Just wondering about creating "custom tags" instead of classing a

>> span.
>> > Saves a bit of typing.

>>
>> Nah, you don't want to go there.

>
> Didn't think so.


Though think about this too. If you use span, there's no effect in a
no-CSS environment. So ask yourself, why am I making this text red?

Is it to emphasize the text? Then try

em.foo {color: red; font-style: normal;}

<p>I am emphasizing a <em class="foo">word</em> in this paragraph.</p>

CSS will make it red, non-CSS will do whatever it does with em.

Is it simply to decorate the text? Then use span, as the decoration
carries no meaning.

Always consider the semantic need for any special things you want to do,
and use semantic markup when appropriate - even if you totally change the
rendering of that element.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Datalist formatting through CSS : impossible ? craigkenisston@hotmail.com ASP .Net 0 02-05-2005 07:10 PM
css formatting legend mark | r HTML 5 02-02-2004 09:45 AM
CSS vs. all of that other nasty formatting stuff Peter Charles HTML 12 01-24-2004 05:46 PM
Need formatting options menu for formatting hard drive Mark T. Computer Support 3 11-24-2003 11:50 PM
Text formatting CSS query Brian Tozer HTML 7 10-03-2003 08:11 AM



Advertisments