Simple CSS question?

**Chris Morris** · Jul 20 '05, 11:50 PM

Re: Simple CSS question?

"Bob" <ergobob@soni c[no spam].net> writes:[color=blue]
> I am trying create a list of companies consisting of several one-liners in
> the form of : company name, address, phone, description, etc. I want the
> text to have no margins and no space between lines, but I want the first
> line bold. And, I want a space between companies such as:[/color]

<div class="company" >
<div class="name">[color=blue]
> Name:_________. (bold)[/color]
</div>
<div class="address" >[color=blue]
> Address:_______ ______.[/color]
</div>
... you get the idea ...[color=blue]
> Phone:_________ _.
> Email:_________ _______.
> Website:_______ ___________.
> Description:___ _______________ ___.[/color]
</div>
</div>

div.company {
margin-bottom: 1.5em;
}

div.name {
font-weight: bold;
}

Personally I think it'd be better and possibly clearer as a table with
Name, Address, etc as column headers but that might give you display
problems if the description and/or address gets long. And it certainly
wouldn't look like that, if that's important to you.

--
Chris

**Els** · Jul 20 '05, 11:50 PM

Re: Simple CSS question?

Bob wrote:
[color=blue]
> Hi Folks,
>
> I am new to CSS and have a very basic question.
>
> I am trying create a list of companies consisting of
> several one-liners in the form of : company name, address,
> phone, description, etc. I want the text to have no margins
> and no space between lines, but I want the first line bold.
> And, I want a space between companies such as:
>
> Name:_________. (bold)
> Address:_______ ______.
> Phone:_________ _.
> Email:_________ _______.
> Website:_______ ___________.
> Description:___ _______________ ___.
>
> (space)
>
> Name:__________ ______. (bold)
> Phone:_________ ____________.
> Address:_______ _______________ _________.
> etc.
>
> Can someone show me how to do this without using <br>'s?[/color]

Wrap each company in its own <div>, or even use a table, as it
could be tabular data as far as I'm concerned.

<style type="text/css">
table{
margin:2em;
}
tr.name td{
font-weight:bold;
}
</style>
</head>
<body>
<table>
<tr class="name"><t d>Name:</td><td> _______</td></tr>
<tr><td>Address :</td><td>______</td></tr>
<tr><td>Phone :</td><td>______</td></tr>
....
....
</table>

HTH

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Scene - Sex of fantasie

**Rijk van Geijtenbeek** · Jul 20 '05, 11:50 PM

Re: Simple CSS question?

On Wed, 22 Sep 2004 13:52:24 GMT, wrote:
[color=blue]
> Hi Folks,
>
> I am new to CSS and have a very basic question.[/color]

In which case, you might find it an interesting challenge to first try
some things yourself... That way, you learn the most.
[color=blue]
> I am trying create a list of companies consisting of several one-liners
> in the form of : company name, address, phone, description, etc. I want
> the text to have no margins and no space between lines, but I want the
> first line bold. And, I want a space between companies such as:
>
> Name:_________. (bold)
> Address:_______ ______.
> Phone:_________ _.
> Email:_________ _______.
> Website:_______ ___________.
> Description:___ _______________ ___.
>
> (space)
>
> Name:__________ ______. (bold)
> Phone:_________ ____________.
> Address:_______ _______________ _________.
> etc.
>
> Can someone show me how to do this without using <br>'s?[/color]

Any specific reason to avoid <br>?

This is OKish even for semantic purists, and doesn't even require style
sheets:

<p><strong>Name :______________ __.</strong><br>
Phone:_________ ____________.<b r>
Address:_______ _______________ _________.<br>
Email:_________ _______.<br>
Website:_______ ___________.<br >
Description:___ _______________ ___.</p>

<p><strong>Name :______________ __.</strong><br>
Phone:_________ ____________.<b r>
Address:_______ _______________ _________.<br>
etc.

More fancy markup with a bit of style:

<div class="item">
<h2>Name:______ __________.</h2>
<p>Phone:______ _______________ .</p>
<p>Address:____ _______________ ____________.</p>
<p>Email:______ __________.</p>
<p>Website:____ ______________. </p>
<p>Description: _______________ ______.</p>
</div>

<div class="item">
<h2>Name:______ __________.</h2>
<p>Phone:______ _______________ .</p>
etc.

with these styles:

div.item {margin: 0 1em;}
div.item h2, div.item p {margin: 0;}
div.item h2 {font-size: medium; font-weight: bold;}

... where the H2 should be replaced with an appropriate header level
depending on the context.

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen

**Chris Morris** · Jul 20 '05, 11:51 PM

Re: Simple CSS question?

Els <els.aNOSPAM@ti scali.nl> writes:[color=blue]
> Bob wrote:[color=green]
> > I am trying create a list of companies consisting of
> > several one-liners in the form of : company name, address,
> > phone, description, etc. I want the text to have no margins
> > and no space between lines, but I want the first line bold.
> > And, I want a space between companies such as:[/color]
>
> Wrap each company in its own <div>, or even use a table, as it
> could be tabular data as far as I'm concerned.
>
> <tr class="name"><t d>Name:</td><td> _______</td></tr>[/color]
^^
<th>, surely. (<th scope="row"> would give a bit of an accessibility
boost without a slowdown, headers/id would be even more accessible but
a bit time-consuming)

--
Chris

**Bob** · Jul 20 '05, 11:51 PM

Re: Simple CSS question?

"Chris Morris" <c.i.morris@dur ham.ac.uk> wrote in message
news:87isa6xupz .fsf@dinopsis.d ur.ac.uk...[color=blue]
> "Bob" <ergobob@soni c[no spam].net> writes:[color=green]
> > I am trying create a list of companies consisting of several one-liners[/color][/color]
in[color=blue][color=green]
> > the form of : company name, address, phone, description, etc. I want the
> > text to have no margins and no space between lines, but I want the first
> > line bold. And, I want a space between companies such as:[/color]
>
>
> <div class="company" >
> <div class="name">[color=green]
> > Name:_________. (bold)[/color]
> </div>
> <div class="address" >[color=green]
> > Address:_______ ______.[/color]
> </div>
> ... you get the idea ...[color=green]
> > Phone:_________ _.
> > Email:_________ _______.
> > Website:_______ ___________.
> > Description:___ _______________ ___.[/color]
> </div>
> </div>
>
> div.company {
> margin-bottom: 1.5em;
> }
>
> div.name {
> font-weight: bold;
> }
>
> Personally I think it'd be better and possibly clearer as a table with
> Name, Address, etc as column headers but that might give you display
> problems if the description and/or address gets long. And it certainly
> wouldn't look like that, if that's important to you.
>
> --
> Chris[/color]

Hello Chris,

I did do this as a table and it worked fine. However, I was under the
assumption that using tables should be avoided for this type of layout. My
objective is to minimize the markup overhead and to make it as easy as
possible to convert previously constructed pages to my new CSS layout.

My original layout is at www.usernomics.com/ergonomic-products-data.html
My new table layout is at

https://www.usernomics.com/testsite/ergonomic-products-data.html

Another form of the same style is at www.usernomics.com/ergonomics-news.html

Am I wrong to think that a CSS solution would be most efficient?

Thanks,

Bob

**Bob** · Jul 20 '05, 11:51 PM

Re: Simple CSS question?

"Rijk van Geijtenbeek" <rijk@opera.com > wrote in message
news:opseqe54xj icz8n2@news.ind ividual.net...[color=blue]
> On Wed, 22 Sep 2004 13:52:24 GMT, wrote:
>[color=green]
> > Hi Folks,
> >
> > I am new to CSS and have a very basic question.[/color]
>
> In which case, you might find it an interesting challenge to first try
> some things yourself... That way, you learn the most.
>[color=green]
> > I am trying create a list of companies consisting of several one-liners
> > in the form of : company name, address, phone, description, etc. I want
> > the text to have no margins and no space between lines, but I want the
> > first line bold. And, I want a space between companies such as:
> >
> > Name:_________. (bold)
> > Address:_______ ______.
> > Phone:_________ _.
> > Email:_________ _______.
> > Website:_______ ___________.
> > Description:___ _______________ ___.
> >
> > (space)
> >
> > Name:__________ ______. (bold)
> > Phone:_________ ____________.
> > Address:_______ _______________ _________.
> > etc.
> >
> > Can someone show me how to do this without using <br>'s?[/color]
>
> Any specific reason to avoid <br>?
>
> This is OKish even for semantic purists, and doesn't even require style
> sheets:
>
> <p><strong>Name :______________ __.</strong><br>
> Phone:_________ ____________.<b r>
> Address:_______ _______________ _________.<br>
> Email:_________ _______.<br>
> Website:_______ ___________.<br >
> Description:___ _______________ ___.</p>
>
> <p><strong>Name :______________ __.</strong><br>
> Phone:_________ ____________.<b r>
> Address:_______ _______________ _________.<br>
> etc.
>
>
>
> More fancy markup with a bit of style:
>
> <div class="item">
> <h2>Name:______ __________.</h2>
> <p>Phone:______ _______________ .</p>
> <p>Address:____ _______________ ____________.</p>
> <p>Email:______ __________.</p>
> <p>Website:____ ______________. </p>
> <p>Description: _______________ ______.</p>
> </div>
>
> <div class="item">
> <h2>Name:______ __________.</h2>
> <p>Phone:______ _______________ .</p>
> etc.
>
> with these styles:
>
> div.item {margin: 0 1em;}
> div.item h2, div.item p {margin: 0;}
> div.item h2 {font-size: medium; font-weight: bold;}
>
>
> .. where the H2 should be replaced with an appropriate header level
> depending on the context.
>
> --
> Rijk van Geijtenbeek
>
> The Web is a procrastination apparatus:
> It can absorb as much time as is required to ensure that you
> won't get any real work done. - J.Nielsen[/color]

Hello Rijk,

Thanks for the information.

I was under the impression that a perfect CSS would not require the use of
<br>. That when you had to resort to <br> it was indicitive of a CSS
imperfection. Is this a misunderstandin g on my part?

I am trying to create an efficient page with the least amount of markup.

Thanks Again,

Bob

**Chris Morris** · Jul 20 '05, 11:51 PM

Re: Simple CSS question?

"Bob" <ergobob@soni c[no spam].net> writes:[color=blue]
> I was under the impression that a perfect CSS would not require the use of
> <br>. That when you had to resort to <br> it was indicitive of a CSS
> imperfection. Is this a misunderstandin g on my part?[/color]

It's _often_ indicative of something that could be done another way,
but there *are* legitimate uses of <br>. Any time you want a line
breaking, without it being semantically a different block, for example.

--
Chris

**Chris Morris** · Jul 20 '05, 11:51 PM

Re: Simple CSS question?

"Bob" <ergobob@soni c[no spam].net> writes:[color=blue]
> I did do this as a table and it worked fine. However, I was under the
> assumption that using tables should be avoided for this type of layout. My
> objective is to minimize the markup overhead and to make it as easy as
> possible to convert previously constructed pages to my new CSS layout.[/color]

Tables are fine for tabular data - where there's a strong key:value
relationship, as there is here, it seems perfectly suited to a <table>.
[color=blue]
> My original layout is at www.usernomics.com/ergonomic-products-data.html
> My new table layout is at
> https://www.usernomics.com/testsite/...ucts-data.html[/color]

That looks fine as a table - though you should probably use <th>s
(table header cells) in the first column of the table rather than
<td>s (table data cells)
[color=blue]
> Another form of the same style is at www.usernomics.com/ergonomics-news.html
>
> Am I wrong to think that a CSS solution would be most efficient?[/color]

Efficiency shouldn't be the main priority. Make sure the pages are
_correct_ and this usually leads to fairly efficient pages too.

--
Chris

**Neal** · Jul 20 '05, 11:51 PM

Re: Simple CSS question?

On Wed, 22 Sep 2004 15:19:31 GMT, wrote:
[color=blue]
> I was under the impression that a perfect CSS would not require the use
> of
> <br>. That when you had to resort to <br> it was indicitive of a CSS
> imperfection. Is this a misunderstandin g on my part?
>
> I am trying to create an efficient page with the least amount of markup.[/color]

Good for you.

Nearly all the markup available in HTML 4.01 Strict is useful at some
time, so long as you use it wisely and for semantic reasons.

The br element is not to be used as a spacer for the rendered content,
because (drum roll) CSS is used for suggesting rendering! (Tada!)

But br is totally correct for creating a line break within, say, a
paragraph or heading.

<p>Whose woods these are I think I know<br>But still, I really have to
go<br>I hope he will not look and see<br>Me soaking up this birch with
pee.</p>

Like that. The same argument is made often here about tables (use for
tabular data, not for page layout), blockquote (use for a large quotation,
not to provide an indent) and even i (use for situations where standard
dtyle demands italics like a ship's name, not for decorative italics or
when var or em or some other markup is more semantically appropriate). The
elements aren't bad, just some common misues of them.

**Beauregard T. Shagnasty** · Jul 20 '05, 11:51 PM

Re: Simple CSS question?

Quoth the raven Bob:
[color=blue]
> Hi Folks,
>
> I am new to CSS and have a very basic question.
>
> I am trying create a list of companies consisting of several one-liners in
> the form of : company name, address, phone, description, etc. I want the
> text to have no margins and no space between lines, but I want the first
> line bold. And, I want a space between companies such as:[/color]

Seems to me these are ... addresses.
[color=blue]
> Name:_________. (bold)
> Address:_______ ______.
> Phone:_________ _.
> Email:_________ _______.
> Website:_______ ___________.
> Description:___ _______________ ___.[/color]

<snip>

What about using the address element?

<address>
Name: <strong>ABC Company</strong><br>
Address: 321 Main Street<br>
Phone: 01 1 123 456<br>
Email: xyz@example.com<br>
Website: http://xyz.example.com <br>
Description: Sells computers
</address>

...then style the address element in your CSS to suit.

If the description is long-winded, you may want to move it to a
paragraph outside the address block.

--
-bts
-This space intentionally left blank.

**Bob** · Jul 20 '05, 11:51 PM

Re: Simple CSS question?

"Neal" <neal413@yahoo. com> wrote in message
news:opseqjfkzu 6v6656@news.ind ividual.net...[color=blue]
> On Wed, 22 Sep 2004 15:19:31 GMT, wrote:
>[color=green]
> > I was under the impression that a perfect CSS would not require the use
> > of
> > <br>. That when you had to resort to <br> it was indicitive of a CSS
> > imperfection. Is this a misunderstandin g on my part?
> >
> > I am trying to create an efficient page with the least amount of markup.[/color]
>
> Good for you.
>
> Nearly all the markup available in HTML 4.01 Strict is useful at some
> time, so long as you use it wisely and for semantic reasons.
>
> The br element is not to be used as a spacer for the rendered content,
> because (drum roll) CSS is used for suggesting rendering! (Tada!)
>
> But br is totally correct for creating a line break within, say, a
> paragraph or heading.
>
> <p>Whose woods these are I think I know<br>But still, I really have to
> go<br>I hope he will not look and see<br>Me soaking up this birch with
> pee.</p>
>
> Like that. The same argument is made often here about tables (use for
> tabular data, not for page layout), blockquote (use for a large quotation,
> not to provide an indent) and even i (use for situations where standard
> dtyle demands italics like a ship's name, not for decorative italics or
> when var or em or some other markup is more semantically appropriate). The
> elements aren't bad, just some common misues of them.[/color]

Hi Neal,

Love that quote. Actually, it takes a little pressure off of me. I hate to
turn to CSS for a one-off case of needing a <br>.

How about the use of <strong> when there is one word in a sentence that you
want to make bold? Would that be an appropriate use of markup rather than
trying to do it in CSS?

Thanks a lot Neal,

Bob

**Bob** · Jul 20 '05, 11:51 PM

Re: Simple CSS question?

"Beauregard T. Shagnasty" <a.nony.mous@ex ample.invalid> wrote in message
news:Imh4d.2408 73$bp1.104648@t wister.nyroc.rr .com...[color=blue]
> Quoth the raven Bob:
>[color=green]
> > Hi Folks,
> >
> > I am new to CSS and have a very basic question.
> >
> > I am trying create a list of companies consisting of several one-liners[/color][/color]
in[color=blue][color=green]
> > the form of : company name, address, phone, description, etc. I want the
> > text to have no margins and no space between lines, but I want the first
> > line bold. And, I want a space between companies such as:[/color]
>
> Seems to me these are ... addresses.
>[color=green]
> > Name:_________. (bold)
> > Address:_______ ______.
> > Phone:_________ _.
> > Email:_________ _______.
> > Website:_______ ___________.
> > Description:___ _______________ ___.[/color]
>
> <snip>
>
> What about using the address element?
>
> <address>
> Name: <strong>ABC Company</strong><br>
> Address: 321 Main Street<br>
> Phone: 01 1 123 456<br>
> Email: xyz@example.com<br>
> Website: http://xyz.example.com <br>
> Description: Sells computers
> </address>
>
> ..then style the address element in your CSS to suit.
>
> If the description is long-winded, you may want to move it to a
> paragraph outside the address block.
>
> --
> -bts
> -This space intentionally left blank.[/color]

Hello Beauregard,

Well, my original markup used a similar layout that you suggest. I simply
used <p>'s and <br> between lines. But I was trying to create a markup with
less overhead.

The example I used is just as you said, names and addresses. I have two
other forms of similar layout that are not names and addresses though. The
three types of information with similar layout can be seen at:

https://www.usernomics.com/ergonomic-products-audio.html

https://www.usernomics.com/human-factors-books-design1.html

https://www.usernomics.com/ergonomics-news.html

I may be being too compulsive. With the number of pages involved, I was
trying to be efficient in my markup.

So the choice is: markup only, tables, or CSS.

Thanks,

Bob

**Neal** · Jul 20 '05, 11:51 PM

Re: Simple CSS question?

On Wed, 22 Sep 2004 16:05:40 GMT, wrote:
[color=blue]
> Love that quote. Actually, it takes a little pressure off of me. I hate
> to
> turn to CSS for a one-off case of needing a <br>.[/color]

Again, it all depends on what you're trying to do. If you need to put a
carriage return into a string of inline content, br's the tool. If you
need a blank line between boxes of content, margin's the tool.
[color=blue]
> How about the use of <strong> when there is one word in a sentence that
> you
> want to make bold? Would that be an appropriate use of markup rather than
> trying to do it in CSS?[/color]

Again, it all depends on what you're trying to do. If you read the
content, would you speak the word strongly? If that's a justified reading
of the text, ok. If it's merely a decoration, strong won't work right. Use
the CSS property font-weight instead.

In the current context, where a word will be a control to do something,
emphasis is justified in my opinion. Others may differ, that's OK.

**Neal** · Jul 20 '05, 11:51 PM

Re: Simple CSS question?

On Wed, 22 Sep 2004 16:02:48 GMT, Beauregard T. Shagnasty
<a.nony.mous@ex ample.invalid> wrote:
[color=blue]
> What about using the address element?
>
> <address>
> Name: <strong>ABC Company</strong><br>
> Address: 321 Main Street<br>
> Phone: 01 1 123 456<br>
> Email: xyz@example.com<br>
> Website: http://xyz.example.com <br>
> Description: Sells computers
> </address>[/color]

Address is for marking up a page's author contact info. If that's what's
being done, OK.

Simple CSS question?

Simple CSS question?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment