Log in

View Full Version : Centered div with lots of pics inside


nycguurl
11-22-2007, 10:06 PM
A few weeks ago somebody very smart helped me with this (John, hint, hint!) :o

I had wanted to have a cented div with more than one picture inside, all absolutely positioned just like I want them to be. It worked like a charm! Now all I want to know is how can I put a second one on the page? Every way I try, it keeps messing up the first one.
Here is the exact code I was given:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>New Page 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.container {
position:relative;
width:759px;
height:273px;
margin:0 auto;
}
.abs_im {
position:absolute;
border:none;
}
#im1 {
top:0;
left:269px;}
#im2 {
top:0;
left:0;
}
#im3 {
top:62px;
left:352px;
}
</style>
</head>
<body>
<div class="container">
<img class="abs_im" id="im1" alt="" src="images/Practice2.bmp" width="469" height="273">
<img class="abs_im" id="im2" alt="" src="images/Practice1.bmp" width="229" height="229">
<img class="abs_im" id="im3" alt="" src="images/Practice3.gif" width="102" height="26">
</div>
</body>
</html>
nycguurl
11-22-2007, 10:37 PM
Here is my best attempt to make two of them on the page: :eek:


<html>
<head>
<title>New Page 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.container {
position:relative;
width:759px;
height:273px;
margin:0 auto;
}
.abs_im {
position:absolute;
border:none;
}
#pic1 {
top:0;
left:269px;}
#pic2 {
top:0;
left:0;
}
#pic3 {
top:62px;
left:352px;
}
.container2 {
position:relative;
width:788px;
height:356px;
margin:0 auto;
}
.abs_im {
position:absolute;
border:none;
}
#pic4 {
top:0;
left:0;}
#pic5 {
top:231px;
left:259px;
#pic6 {
top:295px;
left:249px;
}
</style>
</head>
<body>
<div class="container">
<img class="abs_im" id="pic1" alt="" src="images/Practice2.bmp" width="469" height="273">
<img class="abs_im" id="pic2" alt="" src="images/Practice1.bmp" width="229" height="229">
<img class="abs_im" id="pic3" alt="" src="images/Practice3.gif" width="102" height="26">
</div>
<div class="container2">
<img class="abs_im" id="pic4" alt="" src="images/USA_Price_page_money_proof.bmp" width="788" height="356">
<img class="abs_im" id="pic5" alt="" src="images/Arrow_gif.gif" width="60" height="40">
<img class="abs_im" id="pic6" alt="" src="images/View_sample_mouseover_1.bmp" width="62" height="61">
</div>

</body>
</html>
nycguurl
11-22-2007, 11:10 PM
I did it!!! All I did was leave out a this: } between pic 5 and pic 6 in the css code thingie. Happy Thanksgiving that I learned a little something just me myself and I! You taught me well, LoL. Thanks! ;)