...

View Full Version : New CSS Problems, Background Images in tables



Alexquatermain
05-03-2009, 05:17 PM
Hello, I have been working on a site using CSS, which I am still learning. The following code (I believe) should show an image in the background of a table cell, unrepeated and centered. What actually happens is there is no background image at all. It works fine if I remove the background-position attribute, but only in the first cell of a link bar, the other cells are still blank. What am i doing wrong. The image needs to be centered else it looks horrible.


#linkBar {
background-color: #333333;
background-repeat: no-repeat;
background-position: center center;
background-image: url(cellBG2.gif);



}

Thanks,

Al

Fisher
05-03-2009, 06:21 PM
Need to see the HTML as well to understand what you're naming linkbar. My guess is that you're applying that ID to the table. If so, apply the background to the table cells themselves.

Here's an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#linkbar td {
background:url(cellBG2.gif) no-repeat center #333;
}
</style>
</head>
<body>
<table width="600" border="1" cellspacing="1" cellpadding="1" id="linkbar">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>


BTW, the background attributes can be combined into one line like I did above.

Alexquatermain
05-04-2009, 03:10 PM
Thankyou Fisher, to be honest I'm getting tired of CSS and I'm forgetting things, I have never got on well with code, the website is http://www.mobi.cityforpeace.co.cc (here)

I did try adding the code as shown in your example, but now there is no background in any of the cells.

What am I doing wrong?!?!??! :D

Fisher
05-04-2009, 04:07 PM
Unless this is for a school project (project.css? :cool:), and you're being forced to design with tables, I would seriously reconsider a table-less design.

Anyway, as it stands, you have this:

<tr>
<td width="7" style=background-inage: url(/cellBG2.gif)" id="linkBar"><h1 class="imgback"><a href="index.html">Home</a></h1></td>
<td width="15"><h1><a href="charter.html" class="imgback">Charter</a></h1></td>
<td width="10"><h1><a href="events.html">Events</a></h1></td>
<td width="14"><h1><a href="culture.html">Culture</a></h1></td>
<td width="6"><h1><a href="society.html">Society</a></h1></td>

</tr>
There are all kinds of problems with that. To start, there should be no width attribute on those td tags. How is the word society supposed to fit into 6 pixels? You've also spelled image wrong and are missing an opening quote for the style. You should probably be using <strong> instead of <h1> tags too.

Change it to this:
<tr id="linkBar">
<td><h1 class="imgback"><a href="index.html">Home</a></h1></td>
<td><h1><a href="charter.html" class="imgback">Charter</a></h1></td>
<td><h1><a href="events.html">Events</a></h1></td>
<td><h1><a href="culture.html">Culture</a></h1></td>
<td><h1><a href="society.html">Society</a></h1></td>
</tr>

Then, in your CSS, you should have this instead of what you currently have:
#linkBar td {
height: 10px;
background: url(cellBG2.gif) center no-repeat;
}

Alexquatermain
05-04-2009, 09:38 PM
I had really confused myself there. I must have updated it since you saw it but as the code stands it seems to be alright.

It is a University project, although the project.css was just what the first tutorial I followed called it. I have never designed without tables before (or with CSS) and wouldn't know how to do it any other way, but for this module I have already more than exceeded the brief (We are only expected to colour and format the text really). I'm not sure it's worth the time to change the tables as I don't think it will boost the grade that much, but I'll look into table-less design next time I do a website.

Many thanks, I hadn't realised how cluttered it had become!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum