View Full Version : css - how to position an image?

01-14-2008, 09:00 PM
Hi, could anyone advise me on how to position the photo as in the mockup shown here:


this is the page so far...


this is my css code


any help much appreciated


01-14-2008, 11:00 PM
Here's a portion of you html with some possible code for the image added.

<p id="sig">Simon Nghidulwalungi</p>
<img id="simon" src="Images/simon.jpg" alt="Simon N. Williams" width="63" height="91">
<!-- end #main -->

You need a couple things in the style sheet. Add position:relative to #main so the bottom and right positioning of the image will be with regard to #main's bottom and right edges.

#main {
margin: 0 auto;
padding: 25px 0 15px;
width: 600px;
background: url(Images/main_top.png) no-repeat center top;
text-align: left;
position: relative;

Add the CSS for #simon or whatever you end up calling the img. These pixel values will need to be adjusted to get the positioning you're looking for.

#simon {
position: absolute;
right: 30px;
bottom: 50px;

Did you happen to see the info I posted (http://www.dreamweaverclub.com/forum/showthread.php?t=26866&page=2) (posts 20 & 22) so the transparent pngs will look transparent in IE6?

01-16-2008, 12:33 PM
Thanks Cary, that seems to work perfectly. I've also gone over all the other posts you've given me in the past so hopefully everything should work fine now in most browsers. If you can still see anything I've missed then let me know...

I would have found it very hard to get to this stage without your help so far - much appreciated!

01-18-2008, 04:03 AM
There are still some transparency problems in IE6.

Perhaps a better way to handle the map image is to change this code:

<img id="worldmap" src="Images/map.png" width="575" height="268" alt="">

to just this:

<div id="worldmap"></div>

Then you need this CSS for the transparent pngs:

#header {
height: 275px;
#worldmap {
background: url(Images/map.png) no-repeat 50% 5px;
position: absolute;
height: 268px;
width: 575px;
top: 5px;
left: 50%; /* aligns left edge of image with middle of page */
margin-left: -287px; /* offset half the image width to center image at 50% */
* html #worldmap {
background: none;/*Remove background*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='Images/map.png');

#sig {
background: url(Images/sig.png) no-repeat 0 0;
height: 30px;
width: 190px;
text-indent: -9999px;
position: relative;
left: -3px;
* html #sig {
background: none;/*Remove background*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='Images/sig.png');

You should also remove the word "style" that ended up trailing this bit of code:

html > body #footer {
position: fixed;