...

View Full Version : Image out of position



Socca
11-29-2008, 12:05 AM
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 (http://www.realdesign.be/silent/)
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

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

@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

Excavator
11-29-2008, 01:18 AM
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.

.

Socca
11-29-2008, 09:34 AM
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?

abduraooft
11-29-2008, 10:21 AM
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? (http://www.hotdesign.com/seybold/)"

Socca
11-30-2008, 11:04 AM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum