newline probs within <dt>

[The Plankmeister]

Hi..

I'm trying to achieve a newline effect within a <dt> block, but am having
problems.

Here is the basic code:

<dl>
<dt>
<a href="admin_menu.html" class="small">Click here to modify the
'Home' menu section</a>
<a href="index.html">Home</a>
</dt>
<dd><a href="index.html">Me!</a></dd>
<dd><a href="index.html">Oz &amp; N.Z.</a></dd>
<dd><a href="index.html">Stuff</a></dd>
</dl>
And here are the two ways I've tried to place a newline between the <a>'s in
the <dt>:

<a href="admin_menu.html" class="small">Click here to modify the 'Home'
menu section</a><br>
<a href="index.html">Home</a>
and:

<p><a href="admin_menu.html" class="small">Click here to modify the
'Home' menu section</a></p>
<a href="index.html">Home</a>
My problem is that <p> is not valid inside a <dt>, but the <br> places a
vertical break at the bottom of the <dt> in the UA which looks decidedly
out-of-place. I'm using styles to make everything look nice. Is there a way
to add a newline between the <a>'s which won't add a vertical break?

You can see it in action at:
http://www.plankmeister.org.uk/new/a...e_section.html

If you mouseover the the "click here to..." above Home you'll see it looks
wrong, compared to the one above Photography. The top one however, validates
while the one below doesn't.
P.

[Jukka K. Korpela]

"The Plankmeister" <pl******************@hotmail.com> wrote:

I'm trying to achieve a newline effect within a <dt> block, but am
having problems.
The simplest and safest solution is to stop using <dl>. First, you
haven't got a _definition list_, have you? Second, <dl> elements are
displayed in a primitive manner, and it's more difficult to fix that in
CSS than to start from something simpler and style it. More info:
http://www.cs.tut.fi/~jkorpela/def.html#impl
<dt>
<a href="admin_menu.html" class="small">Click here to
modify the
'Home' menu section</a>
<a href="index.html">Home</a>
You are not presenting a _definition_ for the _term_ "Click here to
modify the 'Home' menu section Home", are you? Au contraire, you
_postulate_ (often incorrectly) that the user knows your definition for
the word "Home" in this context.
And here are the two ways I've tried to place a newline between the
<a>'s in the <dt>:
The first method, <br>, is technically correct for the purpose stated.
It does not, however, help e.g. a blind person who is listening to your
page, since line breaks are usually insignificant then.
My problem is that <p> is not valid inside a <dt>,
Yes, that makes the second method rather suspicious. And isn't it
pretty obvious that a _definition term_ must not contain a paragraph?
but the <br>
places a vertical break at the bottom of the <dt> in the UA which
looks decidedly out-of-place. I'm using styles to make everything
look nice.
Well, <br> creates a line break, which is what you said what you
wanted. The rest seems to be about styles, hence off-topic here.
Is there a way to add a newline between the <a>'s which
won't add a vertical break?

Are you asking how to break a line without breaking a line, or are you
asking for help with your CSS?

In either case, I would say you are asking a wrong question. You are
probably fighting, in part, with some problems that you created by
using <dl>, for no good reason.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[EightNineThree]

"The Plankmeister" <pl******************@hotmail.com> wrote in message
news:3f***********************@dread11.news.tele.d k...

Hi..

I'm trying to achieve a newline effect within a <dt> block, but am having
problems.

Here is the basic code:

<dl>
<dt>
<a href="admin_menu.html" class="small">Click here to modify the
'Home' menu section</a>
<a href="index.html">Home</a>
</dt>
<dd><a href="index.html">Me!</a></dd>
<dd><a href="index.html">Oz &amp; N.Z.</a></dd>
<dd><a href="index.html">Stuff</a></dd>
</dl>

Wow. Those sure are some weird definitions.
--
Karl Core

In heaven all the interesting people are missing.
Friedrich Nietzsche

eightninethree AT eightninethree.com

[Steve Pugh]

"The Plankmeister" <pl******************@hotmail.com> wrote:

I'm trying to achieve a newline effect within a <dt> block, but am having
problems.

Here is the basic code:

<dl>
<dt>
<a href="admin_menu.html" class="small">Click here to modify the
'Home' menu section</a>
<a href="index.html">Home</a>
</dt>
<dd><a href="index.html">Me!</a></dd>
<dd><a href="index.html">Oz &amp; N.Z.</a></dd>
<dd><a href="index.html">Stuff</a></dd>
</dl>
So "Me!", "Oz & N.Z" and "Stuff" are definitions of the term "Click
here to modify the Menu menu section Home" ?

Interesting.
And here are the two ways I've tried to place a newline between the <a>'s in
the <dt>:
But you've already set a {display: block} in your CSS, so there is
already a line break between the two links anyway.

Or put the two links in two different <dt>s. Why not use two <dt>s
instead of one? (Assuming that you decide to continue not caring about
telling lies by claiming that these are definition terms.) Just tweak
the CSS accordingly.
My problem is that <p> is not valid inside a <dt>, but the <br> places a
vertical break at the bottom of the <dt> in the UA which looks decidedly
out-of-place. I'm using styles to make everything look nice. Is there a way
to add a newline between the <a>'s which won't add a vertical break?

Yes, take out the <br> and just let the CSS do it's work.

Or stop abusing the <dl>, <dt> and <dd> elements and use something
more appropriate like nested <ul>s instead.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[The Plankmeister]

Wow. Those sure are some weird definitions.

I get the impression that abusing tags 'round these parts is heresy. Points
taken. I guess I should rework the menu into <ul>'s then.
Or is even using nested <ul>'s bad? What is the best way of constructing a
menu?

[EightNineThree]

"The Plankmeister" <pl******************@hotmail.com> wrote in message
news:3f***********************@dread11.news.tele.d k...

Wow. Those sure are some weird definitions.
I get the impression that abusing tags 'round these parts is heresy.

Points taken. I guess I should rework the menu into <ul>'s then.
Or is even using nested <ul>'s bad? What is the best way of constructing a
menu?

Think of it in context of what it is: A list of links. If there's no
specific order to them, then use <ul>
Nested <ul> is fine, if nesting is indeed needed.

For instance, a list of V8 engines:

<ul>
<li>Dodge
<ul>
<li>318</li>
<li>340</li>
<li>360</li>
</ul>
</li>
<li>Chevy
<ul>
<li>262</li>
<li>283</li>
<li>302</li>
</ul>
</li>
<li>Ford
<ul>
<li>289</li>
<li>302</li>
<li>351</li>
</ul>
</li>
</ul>
--
Karl Core

In heaven all the interesting people are missing.
Friedrich Nietzsche

eightninethree AT eightninethree.com

[Safalra]

"The Plankmeister" <pl******************@hotmail.com> wrote in message news:<3f***********************@dread11.news.tele. dk>...

I'm trying to achieve a newline effect within a <dt> block, but am having
problems.
[snip]
My problem is that <p> is not valid inside a <dt>

No, your problem is that you are using definition list markup for
something that is not a list of definitions. Try instead a combination
of <p>s and an unordered list, wrapped in a <div> with an appropriate
class - then add the CSS to get read of the list markers and perform
other desired formating within that <div>.

--- Stephen Morley ---
http://www.safalra.com