image positioning usind div container

gemguy · #1 May 24th, 2007, 10:53

hi,

I have four images and it should be placed in the four corners of the page. I like show a text in the middle when i make a mouseover on each image.. I found that div tag with container can be used...

Code: Select all

<html> 
<head> 
<style type="text/css"> 
div.container  
{ position:relative; } 
img.positioned  { position:absolute; height:63px; width:122px; } 
img#topleft     { top:0;    left:0; } 
img#topright    { top:0;    right:0; } 
img#bottomleft  { bottom:0; left:0; } 
img#bottomright { bottom:0; right:0; } 
 
</style> 
</head> 
<body> 
<div class="container"> 
<img src="img1.gif" class="positioned" id="topleft"> 
<img src="img2.gif" class="positioned" id="topright"> 
<img src="img3.gif" class="positioned" id="bottomleft"> 
<img src="img4.gif" class="positioned" id="bottomright"> 
 
</div> 
 
</body> 
<html>

The above code shows the image at top right and left but not in bottom.. I dont know why... I expect some ideas....

gemguy

Ryan Fait · #2 May 24th, 2007, 11:29

It's an IE bug. As I recall, using left: 100% with a negative margin works. Not sure about vertically, though.

gemguy · #3 May 24th, 2007, 12:45

Hi ryan,

But Im working with firefox only... still the problems persists

gemguy

christoefar · #4 May 24th, 2007, 13:04

I suggest this code:

Code: Select all

<html> 
<head> 
<style type="text/css"> 
div.container  { position:relative; height: 100%; width: 100%;} 
#topleft     { position:absolute; top:0;    left:0; } 
#topright    { position:absolute; top:0;    right:0; } 
#bottomleft  { position:absolute; bottom:0; left:0; } 
#bottomright { position:absolute; bottom:0; right:0; } 
 
</style> 
</head> 
<body> 
<div class="container"> 
<div id="topleft"><img src="img1.gif"></div>
<div id="topright"><img src="img2.gif"></div>
<div id="bottomleft"><img src="img3.gif"></div>
<div id="bottomright"><img src="img4.gif"></div> 

</div> 
 
</body>

gemguy · #5 May 25th, 2007, 04:22

Hi chris,

Its working fine now... thanks for your help

gemguy

christoefar · #6 May 25th, 2007, 08:04

Excellent

Glad I was a help!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Image positioning and differences in IE/FF	0413	Web Page Design	33	Sep 25th, 2007 21:19
CSS positioning help - relative to background image	sj2as	Web Page Design	1	Sep 12th, 2007 01:27
Positioning an image with a link	pregnantNproud	Web Page Design	8	Aug 12th, 2007 01:33
Problem with image positioning	Marc	Web Page Design	1	May 31st, 2007 18:17
Positioning image absolutely	timmytots	Web Page Design	1	Jan 10th, 2006 02:27

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
image positioning usind div container