<td> with background image - what's the right way?

[Derek Fountain]

I have a horizontal navigation bar, which is a single row table containing
the right images. It "stretches" itself across the screen using a
penultimate td like this:

<td width="100%" background="images/nav_bar/nb_spacer.gif">&nbsp;</td>

which works in all major browsers that I've tried, but doesn't validate. No
background attribute to the td tag, apparently.

What is the correct way to do this? A stylesheet entry with a
background-image? I've tried what look like sensible permutations, based
around this:

<td width="100%" style="background-image:
images/nav_bar/nb_spacer.gif">&nbsp;</td>

but none of them show the image. Changing that line to set the background
colour to blue works, so I must be doing something fundamentally wrong.

--
The email address used to post is a spam pit. Contact me at
http://www.derekfountain.org : <a
href="http://www.derekfountain.org/">Derek Fountain</a>

[David Dorward]

Derek Fountain wrote:

I have a horizontal navigation bar, which is a single row table containing
the right images.
Single row? That doesn't sound like tabular data. Try a list instead.
http://css.maxdesign.com.au/listamatic/
What is the correct way to do this? A stylesheet entry with a
background-image?
Yes
<td width="100%" style="background-image:
images/nav_bar/nb_spacer.gif">&nbsp;</td>

CSS is a nice manual which can tell you what the syntax is ...
http://www.w3.org/TR/CSS2/colors.htm...ckground-image
.... and a validator so you can test you code ...
http://jigsaw.w3.org/css-validator/

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Barbara de Zoete]

On Fri, 04 Mar 2005 16:51:07 +0800, Derek Fountain <no****@example.com> wrote:

I have a horizontal navigation bar, which is a single row table containing
the right images.
A navigation menu usually is just a list of links that take a visitor anywhere
within the site they're at. What makes your navigation menu tabular data?
It "stretches" itself across the screen using a
penultimate td like this:

<td width="100%" background="images/nav_bar/nb_spacer.gif">&nbsp;</td>
Ugly hack.
which works in all major browsers that I've tried, but doesn't validate. No
background attribute to the td tag, apparently.
That might be, because usually tabular data can do just fine without a
background image :-)
From <http://www.w3.org/TR/html401/struct/tables.html#edef-TD>:

<blockquote>
<!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell-->
<!-- TH is for headers, TD for data, but for cells acting as both use TD -->
<!ATTLIST (TH|TD) -- header or data cell --
%attrs; -- %coreattrs, %i18n, %events --
abbr %Text; #IMPLIED -- abbreviation for header cell --
axis CDATA #IMPLIED -- comma-separated list of related
headers--
headers IDREFS #IMPLIED -- list of id's for header cells --
scope %Scope; #IMPLIED -- scope covered by header cells --
rowspan NUMBER 1 -- number of rows spanned by cell --
colspan NUMBER 1 -- number of cols spanned by cell --
%cellhalign; -- horizontal alignment in cells --
%cellvalign; -- vertical alignment in cells -- </blockquote>

Nope, it's not there.
What is the correct way to do this?

You can check my site for a horizontally layed out navigation menu, using lists.
It is not hard to add the image rollover effect as a background property with
CSS. Google for CSS Rollovers. You can find a something to get you started at:
<http://www.alistapart.com/articles/taminglists/> and
<http://www.alistapart.com/articles/dropdowns/>

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Jukka K. Korpela]

David Dorward <do*****@yahoo.com> wrote:

What is the correct way to do this? A stylesheet entry with a
background-image?

Yes

Not quite. Normally it is best to use the shorthand property, e.g.
background: url(images/nav_bar/nb_spacer.gif);
Not really for shortness but for the reason that this also sets the
background-color property (to the initial value, transparent - you can also
specify an explicit value of course).

This is one of the many reasons why it is better to set background images (if
you use them) in CSS: it's much easier to set all the relevant properties
(background image, background color, text color, and the four link colors)
consistently and without fear of some nasty alien style interfering
unpredictably.

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

[Derek Fountain]

> Single row? That doesn't sound like tabular data. Try a list instead.

http://css.maxdesign.com.au/listamatic/
I clicked on a dozen or so of those horizontal list examples and none of
them seemed to do what I want. Maybe one does, but I couldn't see it. See
my website linked in the footer of this post: my navigation bar is a set of
images containing image maps, not just flat words. The graphics were
produced with Adobe Imageready.
CSS is a nice manual which can tell you what the syntax is ...
http://www.w3.org/TR/CSS2/colors.htm...ckground-image

Ah, missed the url() thingy. Thanks for the pointer.

--
The email address used to post is a spam pit. Contact me at
http://www.derekfountain.org : <a
href="http://www.derekfountain.org/">Derek Fountain</a>

[me]

"Derek Fountain" <no****@example.com> wrote in message
news:42**********************@per-qv1-newsreader-01.iinet.net.au...

I have a horizontal navigation bar, which is a single row table containing
the right images. It "stretches" itself across the screen using a
penultimate td like this:

<td width="100%" background="images/nav_bar/nb_spacer.gif">&nbsp;</td>

which works in all major browsers that I've tried, but doesn't validate. No background attribute to the td tag, apparently.

What is the correct way to do this? A stylesheet entry with a
background-image? I've tried what look like sensible permutations, based
around this:

<td width="100%" style="background-image:
images/nav_bar/nb_spacer.gif">&nbsp;</td>

but none of them show the image. Changing that line to set the background
colour to blue works, so I must be doing something fundamentally wrong.

--
The email address used to post is a spam pit. Contact me at
http://www.derekfountain.org : <a
href="http://www.derekfountain.org/">Derek Fountain</a>

IIRC the following will validate.
Good Luck,
me

The syntax below is for a style sheet in the head of the document:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
..bgimage { background-image: url(arrow.gif); background-repeat: repeat}
-->
</style>
</head>
<body bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bgimage">
<p>text</p>
</td>
</tr>
</table>
</body>
</html>

The syntax below is for an external style sheet:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="bgimage.css">
</head>
<body bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bgimage">
<p>text</p>
</td>
</tr>
</table>
</body>
</html>

Below is the contents of the external style sheet named bgimage.css:

..bgimage { background-image: url(arrow.gif); background-repeat: repeat}