By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,302 Members | 3,621 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,302 IT Pros & Developers. It's quick & easy.

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

P: n/a
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>
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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
Jul 23 '05 #2

P: n/a
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 |
`-------------------------------------------------- --<--@ ------------'
Jul 23 '05 #3

P: n/a
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

Jul 23 '05 #4

P: n/a
> 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>
Jul 23 '05 #5

P: n/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}
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.