Hello, this is a little complicated but I'll try and make it as clear as I can! The problem is not that I can't achieve the effect I want but that I don't understand the way I have to do it. I want to make sure I understand the process fully, so help is very much appreciated.
I have a div called 'gallery' within which I want to arrange 6 'passport' type photos in a horizontal row. Each photo is within its own div tag (called 'pic1', 'pic2' etc.), so as to contain a caption as well.
Having placed the photo divs within the 'gallery' div, I've set the height and width dimensions for each one, and Dreamweaver has automatically stacked them vertically, like so:
P
P
P
P
P
P
The top photo div is flush with the top-left corner of the 'gallery' div.
Problem 1: If I try to set a CSS relative positioning rule for 'pic2', relative to the top left of the 'gallery' div, it instead positions it relative to the bottom-left of 'pic1'. If I move 'pic1' elsewhere, 'pic2' is still positioned relative to 'pic1's old position. This continues down the line - 'pic3' is positioned relative to the bottom-left of 'pic2' etc.
Problem 2: As I position each 'pic' div, the remaining ones are left hanging in space. So, if I'd positioned all bar the last one, I'd have this:
P P P P P
P
Since I have specified no CSS rule demanding that the remaining 'pic' div should be way down at the bottom, why is it there? I can find no code in the html or CSS that places it there either - I would've expected these unpositioned elements to shunt automatically upwards to fill the gap vacated by the re-positioned elements. Clarification on this is much appreciated. The code is below. Thanks!
I have a div called 'gallery' within which I want to arrange 6 'passport' type photos in a horizontal row. Each photo is within its own div tag (called 'pic1', 'pic2' etc.), so as to contain a caption as well.
Having placed the photo divs within the 'gallery' div, I've set the height and width dimensions for each one, and Dreamweaver has automatically stacked them vertically, like so:
P
P
P
P
P
P
The top photo div is flush with the top-left corner of the 'gallery' div.
Problem 1: If I try to set a CSS relative positioning rule for 'pic2', relative to the top left of the 'gallery' div, it instead positions it relative to the bottom-left of 'pic1'. If I move 'pic1' elsewhere, 'pic2' is still positioned relative to 'pic1's old position. This continues down the line - 'pic3' is positioned relative to the bottom-left of 'pic2' etc.
Problem 2: As I position each 'pic' div, the remaining ones are left hanging in space. So, if I'd positioned all bar the last one, I'd have this:
P P P P P
P
Since I have specified no CSS rule demanding that the remaining 'pic' div should be way down at the bottom, why is it there? I can find no code in the html or CSS that places it there either - I would've expected these unpositioned elements to shunt automatically upwards to fill the gap vacated by the re-positioned elements. Clarification on this is much appreciated. The code is below. Thanks!
PHP:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="../overall.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.mugshots {
padding: 10px;
}
#gallery {
width: 672px;
margin-right: auto;
margin-left: auto;
height: 153px;
}
#pic1 {
width: 112px;
height: 153px;
left: 0px;
top: 0px;
}
#pic2 {
width: 112px;
height: 153px;
position: relative;
top: -153px;
left: 113px;
}
#pic3 {
width: 112px;
height: 153px;
position: relative;
top: -306px;
left: 226px;
}
#pic4 {
width: 112px;
height: 153px;
position: relative;
left: 339px;
}
#pic5 {
width: 112px;
height: 153px;
}
#pic6 {
width: 112px;
height: 163px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="masthead">
<h1>Dead Elvis</h1>
</div>
<div id="main">
<div id="gallery">
<div id="pic1">
<img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
James Harker </div>
<div id="pic2">
<img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
Rae Hicks </div>
<div id="pic3">
<img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
Louis Lanfear </div>
<div id="pic4">
<img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
Jamie Lees </div>
<div id="pic5">
<img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
Sam Prentice </div>
<div id="pic6">
<img src="../images/origs/blank.png" alt="blank" width="92" height="113" class="mugshots" />
Davide Santi-Brooks </div>
</div>
</div>
</div>
</body>
</html>
Last edited:
