PDA

View Full Version : Absolute positioning Images



guitaplaya69
Feb 21st, 2012, 11:22 PM
Hi,

So on my website I am trying to have multiple images laid out in a certain area. Basically on my home page in the middle I want to have multiple little images and a few larger images laid out in a certain area. See attempted descriptive image:
(x's represent background color) ([ # ] represent area where there would be an image)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxx[1]xxxxxxxx[2]xxxxxxxxxxxx
xxxxxxxx[3]xxxxxxxx[4]xxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


So basically multiple images in one set area (the set area is not the complete width of the page)

basic breakdown of what I've done so far:

Created the division for the area that I want the images to show up (all the x's) (div=banner)

Then I tried to create the separate divisions for each location of the images(div=button1,button2,etc), but they aren't working. This is what code I tried using:

<div id="homebanner1">
<div id="button1"><a href="URL"><img src="image.jpg"></div></a>
</div>

If I do that for the first image, it will put it in the right place, but if I try to do it with a button2 (I change the absolute position) it doesn't work. Can someone give me some advice on how I need to write the code to separate the multiple layouts of the images. I've tried this:

<div id="homebanner1">
<div id="button2"><a href="URL"><img src="image.jpg"></div></a>
</div>

But it just puts the image in the middle but not in the homebanner area but in a new area, same dimensions as the homebanner but farther down on the page.

So how do I set up the different area spaces all in the same homebanner division?

Thanks

rob86
Feb 21st, 2012, 11:40 PM
Hi,

So on my website I am trying to have multiple images laid out in a certain area. Basically on my home page in the middle I want to have multiple little images and a few larger images laid out in a certain area. See attempted descriptive image:
(x's represent background color) ([ # ] represent area where there would be an image)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxx[1]xxxxxxxx[2]xxxxxxxxxxxx
xxxxxxxx[3]xxxxxxxx[4]xxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


So basically multiple images in one set area (the set area is not the complete width of the page)

basic breakdown of what I've done so far:

Created the division for the area that I want the images to show up (all the x's) (div=banner)

Then I tried to create the separate divisions for each location of the images(div=button1,button2,etc), but they aren't working. This is what code I tried using:

<div id="homebanner1">
<div id="button1"><a href="URL"><img src="image.jpg"></div></a>
</div>

If I do that for the first image, it will put it in the right place, but if I try to do it with a button2 (I change the absolute position) it doesn't work. Can someone give me some advice on how I need to write the code to separate the multiple layouts of the images. I've tried this:

<div id="homebanner1">
<div id="button2"><a href="URL"><img src="image.jpg"></div></a>
</div>

But it just puts the image in the middle but not in the homebanner area but in a new area, same dimensions as the homebanner but farther down on the page.

So how do I set up the different area spaces all in the same homebanner division?

Thanks

<div style=position:absolute;
margin-left: xxpx;
margin-top: xxpx;
index=: 1;
>

Assigning index number will allow you to position imgs side by side.

guitaplaya69
Feb 22nd, 2012, 12:22 AM
Can you give me more of the coding.

So I have the main division element and the other images, what would the code look like with my divisions. And do I put the index on the CSS style sheet of the individual buttons or on the main homebanner section?

Thanks

rob86
Feb 22nd, 2012, 03:58 AM
Can you give me more of the coding.

So I have the main division element and the other images, what would the code look like with my divisions. And do I put the index on the CSS style sheet of the individual buttons or on the main homebanner section?

Thanks

Try it this way in the body only. It positions each img exactly where you want it.

<body>
<img src="images/bobjosie.gif" longdesc="images/bobjosie.gif" align="top" border="0" width="367" height="154" style="
position:relative;
left:195px;
top:20px;
width:367px;
height:154px;
">

<img src="images/madhack_anm.gif" longdesc="images/madhack_anm.gif" alt="" align="top" border="0" width="67" height="67" style="
position:absolute;
left:100px;
top:200px;
width:67px;
height:67px;
">

For text:

<div style="
position:relative;
top:135px;
width:600px;
height:40px;
margin-left: auto;
margin-right: auto;
">
<p class="blocktext" >Our first web site was online in 1996. I created several sites of my own and a few for<br/>
others. The web site went down in 1999. I put the site back up in 2000 and plans are<br/>
to create new and interesting pages. Beginning in 2007, newer technology is being added as we go.
<p></p>
</div>

teedoff
Feb 22nd, 2012, 04:01 AM
Try it this way in the body only. It positions each img exactly where you want it.

<body>
<img src="images/bobjosie.gif" longdesc="images/bobjosie.gif" align="top" border="0" width="367" height="154" style="
position:relative;
left:195px;
top:20px;
width:367px;
height:154px;
">

<img src="images/madhack_anm.gif" longdesc="images/madhack_anm.gif" alt="" align="top" border="0" width="67" height="67" style="
position:absolute;
left:100px;
top:200px;
width:67px;
height:67px;
">

Why not post a link to your live test site or the code you've tried?

Using positioning shouldn't be needed at allin this case. You can float images or elements and then use margins to tweak their position to your needs.