...

View Full Version : display the picture at the bottom



coffeeping
05-15-2008, 09:48 AM
hi, i wan make the picture display at the bottom of the box, so any solutions for it? Thanks

my code as below:


<html>
<head>

<style type="text/css">
.box {
border:1px solid red;
height:200px;

}
</style>
</head>

<body>
<div class="box">
<div align="left"><img src="images/download.jpg" width="43" height="61" align="bottom">

</div>
</div>
</body>
</html>

FWDrew
05-15-2008, 10:09 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.box {
border:1px solid red;
height:200px;
width:200px;/*Change to what needed to fit picture/content.*/
background:url("images/download.jpg") no-repeat scroll bottom left;
}
</style>
</head>

<body>
<div class="box">
<!--Your content here -->
</div>

</body>
</html>
Try that :thumbsup:

Regards,

Drew

coothead
05-15-2008, 10:18 AM
Hi there coffeeping,

here is an alternative solution...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#box {
position:relative;
border:1px solid red;
height:200px;
}
#box img {
position:absolute;
left:0;
bottom:0;
width:43px;
height:61px;
}
</style>

</head>
<body>

<div id="box">
<img src="images/download.jpg" alt="">
</div>

</body>
</html>

coothead

FWDrew
05-15-2008, 10:26 AM
Thats a nice way to do it coothead :) never thought of that before.

Darn you for not being lazy and putting the correct doc type and mark up on, now I have to edit mine:p

Drew

coothead
05-15-2008, 10:41 AM
Hi there FWDrew,

Darn you for not being lazy and putting the correct doc type and mark up on, now I have to edit mine
Well, I'm afraid that you will have to go back for a second edit, as you've missed out...

<title></title>
...which will cause validation failure. ;)

coothead

FWDrew
05-15-2008, 11:16 AM
Coot,

Well now your just showing off :p


...which will cause validation failure.

Thanks, I just forgot it but I never knew it would cause the page to not validate, learn something new everyday I suppose :)

Drew

coffeeping
05-16-2008, 04:52 AM
Thanks a lot.. but how i gonna to set the picture display at the center of the box since i got 2 type of pic, one 1 landscape & another one is potrait?

coothead
05-16-2008, 09:28 AM
Hi there coffeeping,

have a look at this example, which, hopefully, addresses all of your anxieties...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#box {
position:relative;
border:3px double #999;
width:760px;
height:469px;
background-color:#eee;
margin:20px auto;
}
#box #img1 {
position:absolute;
left:0;
bottom:0;
width:43px;
height:61px;
border:2px solid #666;
margin:0 0 2px 2px;
}
#box #img2 {
position:absolute;
left:50%;
top:50%;
width:320px;
height:196px;
border:2px solid #666;
margin-left:-162px; /*half the (img+border) width*/
margin-top:-100px; /*half the (img+border) height*/
}
</style>

</head>
<body>

<div id="box">
<img id="img1" src="http://mysite.orange.co.uk/azygous/images/dog.jpg" alt="">
<img id="img2" src="http://mysite.orange.co.uk/azygous/images/blood.jpg" alt="">
</div>

</body>
</html>

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum