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 Coder
    Join Date
    Nov 2007
    Posts
    34
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Image out of position

    Hello

    I am trying to get back into web coding and I am in the procedure of coding a template but I have stumbled into a problem which i cannot honestly figure out.
    If you check out the template here
    I am only doing the basis and then I will go into further CSS but at the moment im basically using tables. As you can see, the sponsor image is far from its place. Why is it doing this? Is it because of another image or one of my css classes?
    2nd question is, do you see the gaps between top downloads and latest matches? There is a gap on the blue titles, on the black content areas and a small gap underneath with Random Picture and News. Is this because of the images themselves or of my crap coding job?

    Here is my index.html and my stylesheet.css

    Index.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Silent Gaming</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <br />
    
    <img src="images/sg_top.jpg" />
    <img src="images/sg_header.jpg" />
    <img src="images/sg_nav.jpg" />
    <img src="images/sg_subnav.jpg" />
    <img src="images/sg_team.jpg" />
    <img src="images/sg_bar1.jpg" />
    <table>
    <tr>
    <td><img src="images/sg_download.jpg" /></td>
    <td><img src="images/sg_match.jpg" /></td>
    <td><img src="images/sg_sponsors.jpg" /></td>
    </tr>
    <tr>
    <td><img src="images/sg_random.jpg" /></td>
    <td><img src="images/sg_news.jpg" /></td>
    <td><img src="images/sg_advert.jpg" /></td>
    </table>
    
    
    
    </body>
    </html>
    Stylesheet.css
    Code:
    @charset "utf-8";
    /* CSS Document */
    *{
    margin:0px;
    padding:0px;
    	}
    	
    body {
    background-image:url(images/sg_bg.jpg);
    background-repeat:repeat;
    position:absolute;
    top:10px;
    left: 150px;
    right: 200px;
    	}
    table {
    position: absolute;
    left: -3px;
    right: auto;
    
    }
    Any help would be greatly appreciated!

    Socca

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Socca,
    The validator finds this -
    Line 27, Column 7: end tag for "tr" omitted, but OMITTAG NO was specified.

    </table>



    You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
    Not sure if that fixes it or not... I didn't try it.
    Check out the links about validating in my sig below.

    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    34
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Hmm I forgot to put the ending tr tag at the end which is why it gave me the error but now I have checked the validator and i have no errors excluding alt tag errors.

    But after filling in the tag, I checked my template again and it has not changed anything. Do you know what else could be the problem?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Don't apply absolute position, if you are not aware of it's purpose and usage. Never apply an absolute position directly on body.

    If you are trying to center the entire layout, then wrap them all inside a container div and apply some width and margin:0 auto; to it. All the inner elements will automatically aligned with the container.

    Also, check "Why tables for layout is stupid?"
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Nov 2007
    Posts
    34
    Thanks
    10
    Thanked 0 Times in 0 Posts
    So I made the container div instead of using the absolute method. Do you think that css divs will put that sponsor image to its right place or what?


  •  

    Posting Permissions

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