Forums

mo_nyc

Hello to everyone :oops:

I am very new to css, I am learning as much as I can on my own but I appear to be stuck. What has me stuck is Absolute & Relative Positioning.

Now what I am trying to move thumbnail images like say to the right of the screen. I have been be able to move the 1st images fine to the right with no issues, But now when I try to add the second image it would automaticlly go the right when I dont want it to.

Can someone please help me. Here is like sample of what I have maybe someone can help that way. This is so embarassing.

<head>
<title>mobetter</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mobetter.css" />
</head>
<body>
</body>
<div id="img1">
<div id="img1"><img src="../Pictures/car1bugattiveyron164.jpg" width="420" height="310" alt="" /></div>
<div id="img2">
<div id="img2"><img src="../Pictures/7749-450x-saleen_1_JPG.jpg" width="450" height="338" alt="" /></div>
</div>

css
#img1 {
position: absolute;
top: 25px;
right: 25px;
padding: 10px;
margin: 5px;
background-color: #003300;
border: 1px solid: #000000;
width: 420px;

}

#img2 {
position: absolute;
top: 70px;
left: 70px;
}

cybershot

well i am no expert but i do see a problem with your code. You didn't close your divs correctly and you have put the code for the image2 into the image1 div wich i think is why image 2 is moving right. You have to many id also i think. you could do something like this.

<div id="image1">your code here</div>
<div id="image2">your code here</div>

look what you did.
<div id="img1"> //You started div with id="img1" here. then below you opened another div and closed it right away.
<div id="img1"><img src="../Pictures/car1bugattiveyron164.jpg" width="420" height="310" alt="" /></div>
<div id="img2"> // here you started another div but didn't close the <div id="img1">
<div id="img2"><img src="../Pictures/7749-450x-saleen_1_JPG.jpg" width="450" height="338" alt="" /></div>
</div>

so both images are inside the <div id="img1">

following you code you should have something like this

<div id="img1"> //opens the first div
<div><img src="../Pictures/car1bugattiveyron164.jpg" width="420" height="310" alt="" /></div>
</div> //closes the <div id="img1">

<div id="img2"> //opens the second div
<div><img src="../Pictures/7749-450x-saleen_1_JPG.jpg" width="450" height="338" alt="" /></div>
</div> //closes <div id="img2">

does that make any sense?

adhoc01

Im sure the code you gave was from a bigger picture but the simple way to float 2 images to the right would have been to float them:

<div id=\"img1\"><img alt=\"myimage\" /></div>
<div id=\"img2\"><img alt=\"myimage\" /></div>

#img1 {
	width:150px;
	height:150px;
	float:right;
}
#img2 {
	width:150px;
	height:150px;
	float:right;
}

treehouse : what would you like to learn today?

Forums

Positioning Images