Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    New CSS Problems, Background Images in tables

    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.

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

    Al

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    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:
    Code:
    <!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.

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    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?!?!??!

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Unless this is for a school project (project.css? ), and you're being forced to design with tables, I would seriously reconsider a table-less design.

    Anyway, as it stands, you have this:
    Code:
    <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:
    Code:
    <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:
    Code:
    #linkBar td {
    	height: 10px;
    	background: url(cellBG2.gif) center no-repeat;
    }

  • #5
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •