34 users online (0 members and 34 guests)  


  Results 1 to 6 of 6

Related

  1. Replies: 3
  2. Replies: 4
  3. Table background image    Forum: HTML Forum
    Replies: 3
  4. Table/cell background image in CSS    Forum: CSS Forum
    Replies: 1
  5. Table/cell background image in CSS    Forum: CSS Forum
    Replies: 7
  1. #1
    OpenSource's Avatar
    New User

    Status
    Offline
    Join Date
    May 2004
    Posts
    3

    implementing background color, image and text in one table

    ello all!

    html nub here.. which is prolly my biggest problem. second im trying to apply background image to a table with centered image and centered text/links over that image.

    this is what im working with..

    http://www.linuxfusion.net/milan/tableimage.html

    at the current state i managed to put the image (.jpg) in the table and the text and links centered over that that very image but when i open the browser the image is distorted. im using mozilla firefox on linux, so i dont know how it looks like in ie.

    what i want to accomplish:

    have a solid background in that table...
    an image centered both vertically and horizontally...
    and a text and links on top of that image also centered.

    so when someone views that page at a different resolution the image would stay centered instead of stretched and looking the way it is right now. i would only want the background color stretched. the image itself will be faded to match the background of course. i hope i gave enough detail.

    heres the code:

    <html>
    <body bgcolor="#ffffff" link="#33ccff" vlink="#33ccff">
    <table background="http://www.linuxfusion.net/milan/2twiB.jpg" border="1" align="center" width="100%" height="110">
    <tr>
    <td valign="center">
    <a name="top"> </a>
    <center>
    <font face="arial" size="1"> |
    <a href="http://www.powergaming.org/index.html">Main</a> |
    <a href="http://www.powergaming.org/Links/History.html">History</a> |
    <a href="http://www.powergaming.org/Links/Howto.html">Howto</a> |
    <a href="http://www.powergaming.org/Links/ScheduleTraining.html">Schedule Training</a> |
    <a href="http://www.powergaming.org/Links/Forum.html">Forum</a> |
    <a href="http://www.powergaming.org/Links/Feedback.html">Feedback</a> |
    </font>
    </center>
    <div>
    <font size="8" color="#00cc99" face="arial"><center><b><i>Jedi Academy</i></b></center></font></div>
    <font size="2" color="#00cc99" face="arial">
    <div>
    <center><b>Powerplaying Jedi Academy</b></center></div>
    <div>
    <center><b><font size="1"><strong>Click here to</strong>
    <a href="http://www.powergaming.org/Links/Main.html">ENTER</a>
    </font></b></center></div>
    </font>
    </td>
    </tr>
    </table>

    </html>

    thx for looking at it guys,

    milan

  2. #2
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Smile Being a newby isn't a problem.....it's an opportunity!

    I don't know if it has anything to do with it, but you've omitted units in a couple of your table attributes:
    border="1px" align="center" width="100%" height="110px">
    Also, I'm not sure, but I think some browsers don't like mixing percentages with absolute values. Also, if a table is stretched due to screen resolution, a background either has to stretch or tile unless it's styled.
    Somethig like:
    Code:
    <table style="width:100%;height:110px;background:url(whatever) no-repeat fixed center center;">
    Try something like that and see what happens.

  3. #3
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733
    Hi there OpenSource,

    As some of your code has been deprecated
    I have converted it to 'css'
    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>
    <title>background problem</title> 
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <style type="text/css">
    /*<![CDATA[*/
    body {
        background:#ffffff;
     }
    table {
        width:100%;
        border: solid 1px #000000;
     }
    td {
        background:url(http://www.linuxfusion.net/milan/2twiB.jpg) no-repeat center center;
        font-family:arial;
        color:#00cc99;
        text-align:center;
        border: solid 1px #000000;
     }
    a:link {
         color:#33ccff;
         font-family:arial;
         font-size:10px;
     }
    a:visited {
         color:#33ccff;
         font-family:arial;
         font-size:10px;
     }
    div#jedi {
         font-size:48px;
         font-weight:bold;
         font-style:oblique;
         text-align:center;
     }
    div#power {
         font-size:13px;
         font-weight:bold;
         text-align:center;
     }
    div#enter {
         font-size:10px; 
         font-weight:bolder;  
        text-align:center;
     /*//]]>*/
     }
        
    </style>
    </head>
    <body>
    
    <table><tr>
    <td><div>
    |
    <a href="http://www.powergaming.org/index.html">Main</a> |
    <a href="http://www.powergaming.org/Links/History.html">History</a> |
    <a href="http://www.powergaming.org/Links/Howto.html">Howto</a> |
    <a href="http://www.powergaming.org/Links/ScheduleTraining.html">Schedule Training</a> |
    <a href="http://www.powergaming.org/Links/Forum.html">Forum</a> |
    <a href="http://www.powergaming.org/Links/Feedback.html">Feedback</a> |
    </div>
    <div id="jedi">
    Jedi Academy
    </div>
    <div id="power">
    Powerplaying Jedi Academy
    </div>
    <div id="enter">
    Click here to
    <a href="http://www.powergaming.org/Links/Main.html">ENTER</a>
    </div></td>
    </tr></table>
    
    </body>
    </html>
    
    I hope that this resolves your problem

    coothead

  4. #4
    OpenSource's Avatar
    New User

    Status
    Offline
    Join Date
    May 2004
    Posts
    3
    thx a lot guys..

    when i tried ur method andro i got the same result without the "no-repeat fixed center center" function.

    see here:

    http://www.linuxfusion.net/milan/tableimage4.html

    now.. when i added the "no-repeat fixed center center" function the image disappeared, which i think might be due to not having a solid background set in that table. so it would either display the image titled throughout the table or when attempting to center it it just default back to solid color with no image. i dont know if theres a way to add a background color to a table and an image on top of it centered?

    you can see the table here with the center function here:

    http://www.linuxfusion.net/milan/tableimage5.html

    some other things i might experiment with is to have 3 tables instead one and text in middle and image to each side. was thinking about transparent images too but i would still need a background either way.

    thank u very much for the reply.


    as for coothead.. that is just beautifull man. you guys make it seem so easy. that is just the way i wanted it to look +/- some color changes.

    thank u so much

    you can view ur art here :

    http://www.linuxfusion.net/milan/tableimage3.html

    you know i have copy/pasted off of like 20 different websites to come up with a page worth of code which im not really proud of. i've decided to buy a book on html but it seems css looks so much more customizable. im really impressed with the way the code looks. hence my next question... which should i start learning? or do i need to learn html before css? so any ideas u guys might have on this i'd like to hear it to make my decision.

    thanks again guys

    milan

  5. #5
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733
    Hi there OpenSource,

    You should learn both 'HTML' and 'CSS'
    They go hand in hand

    These sites will get you started....
    • http://www.w3schools.com/html/default.asp
    • http://www.w3schools.com/xhtml/default.asp
    • http://www.w3schools.com/css/default.asp
    • http://css.somepeople.net/


    ...enjoy the experience.

    coothead

  6. #6
    OpenSource's Avatar
    New User

    Status
    Offline
    Join Date
    May 2004
    Posts
    3
    thats the same place i've read my html and i'll get a hard cover just so i know the ins and outs.

    thx again...