How to label images that you plan on moving

andynov123 · 11-03-2010, 07:46 PM

Hi,
Im trying to move some images on my webpage. I tried position: absolute and position: relative and used padding but my images were moving together.
Heres my 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>Untitled Document</title>
<link href="Level1_Arial.css" rel="stylesheet" type="text/css" />
<link href="data.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#006600">
<div class="movielink"><img src="movie.gif"</div>
<div class="gamelink"><img src="controller.gif"</div>
<blockquote> </blockquote>
</body>
</html>
My CSS

body
{
background-image:url('blackbar.jpg');
background-repeat:repeat-x;
}
.movielink {position:absolute};
.movielink {left:800px}

.gamelink
{
position:relative;
padding-left:950px;
}

Is it because Im creating div classes to identify my images???

DrDOS · 11-03-2010, 08:18 PM

If you just want the images to be on a certain part of the page you don't need the divs to do that. And you're not specifying nearly enough about the divs to locate them properly. They are block level items so they extend all the way across the page unless you specify a width, for instance.

andynov123 · 11-03-2010, 09:00 PM

If i dont need divs then how would you identify an image that you want to move around????? What would you of done????

DrDOS · 11-03-2010, 09:29 PM

Quote:

Originally Posted by andynov123

If i dont need divs then how would you identify an image that you want to move around????? What would you of done????

Just give them separate IDs, the same as you might for divs. Since the images have a natural height and width there is less you have to specify.

andynov123 · 11-03-2010, 11:29 PM

Do you mean like <h1 id="movielink"><img src="movielink.gif"></h1>

DrDOS · 11-04-2010, 12:03 AM

Code:

<img id="movielink" src="movielink.gif" />

andynov123 · 11-04-2010, 12:12 AM

I can move the gamelink image but not the movielink image.
Whats wrong with my css?

body
{
background-image:url('blackbar.jpg');
background-repeat:repeat-x;
}
#movielink {position:absolute};
#movielink {left:700px}

#gamelink
{
position:absolute;
padding-left:800px;
}

DrDOS · 11-04-2010, 12:38 AM

You have a spurious ; at the end of your #movielink css.