Image align at bottom [Archive]

View Full Version : Image align at bottom

Xspirit

10-21-2007, 05:32 PM

Hey WHT,

I haven't web designed in quite sometime, as I have taken up a managerial role over the last 2 years, but I have to create a page for a site within the next 2 hours, and have been going mad trying to do it!!

So currently I have a page where I want an image to be displayed at the bottom left of the screen. I would like this image to be a background, so text etc. can flow over it and for it to be at the bottom left regardless of the users screen size. Since the change with doctypes, I can't seem to do it!

Could someone please help?

Thanks

Paul-M

10-21-2007, 05:56 PM

Can you post the HTML/CSS here?

Hard to say without knowing what else is in the page...

Xspirit

10-21-2007, 06:02 PM

sorry... here ya go

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
#main {
position:absolute;
right:0;
top:0;
padding:0;
width:100%;
height:100%;
color:#333;
background:#000000;
}

#main p {
padding:0 10px;
}
#img {vertical-align:bottom}
</style>
</head>

<body>

<div id="right">

<img alt="" src="images/Untitled-1_02.gif" width="428" height="399" class="#img"/></div>
</body>
</html>

Its pretty basic, and nothing is actually on the page, so feel free to del any code you want

Jay August

10-21-2007, 07:06 PM

class="#img" is incorrect, it should be either id="img" or class="img", and you've used a '#' which is for id, so it will be id="img"

You also declared a CSS id 'main' but its not found in your source anywhere else?