Moving an element in my photo gallery

HTML & CSS
1

I’m a Newbie looking for some assistance.

I have a photo gallery that works great. It is set up for two rows of thumbnails at the top and get displayed below as you hover over them - or click them. I have only one row of thumbnails and want to move the viewing box up and close that 1" gap. I can’t figure out how to do that. The markup I am using is below.

this can change the width of the viewing box
#container a.pics span {display:none; border:0; width:600px;

this can change the length of the viewing box
#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}

But I can’t move the box itself up higher on the page. HELP !

a, a:visited, a:hover {}

#container {position:relative; width:620px; height:700px; background:none; border:1px solid none; margin:-20px auto; font

-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; padding:7px 21px; display:inline; color:#000; text-decoration:none; width:75px;

height:75px; cursor:default;}
#container a.pics img.thumb {display:block; border:1px solid #595959;}

#container a.pics span {display:none; border:0; width:600px; background:#bbb; border:1px solid #fff; text-align:center;}
#container a.pics span img {margin:10px auto; border:1px solid #000;}

#container a.pics:hover {white-space:normal;}
#container a.pics:hover img.thumb {border:1px solid #fff;}
#container a.pics:hover span {display:block; position:absolute; left:9px; top:192px; z-index:10; height:500px;}

#container a.pics:active img.thumb {border:1px solid #4d7a7d;}
#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}

#container a.pics:focus {outline:0;}
#container a.pics:focus img.thumb {border:1px solid #4d7a7d}
#container a.pics:focus span {display:block; position:absolute; left:9px; top:192px; z-index:5; outline:0; height:500px;}

#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0;

width:600px; text-align:center; color:#eee; z-index:1;}
#container span.info a {color:#000;}
#container span.info a:hover {text-decoration:none;}

#container {position: absolute; top: 210px; left: 185px;}

2

Hi Kuczek. From a quick glance, I’d suggest you try changing the “top” value in this rule:


#container {position: absolute; [COLOR="Red"]top: 210px;[/COLOR] left: 185px;}

Change 210px to 120px or something like that and see if it does what you want.

Absolute positioning is not great for layouts, as it is so inflexible. If you add more thumbnails later, you will always be adjusting this value, which is a bit of a pain. With other layout methods, like float, the container will move with the rest of the content automatically.

Anyway, hope this helps for now. :slight_smile:

3

#container {position: relative; top: 210px; left: -120px;}

I changed it to relative and then adjusted the position.

This moves the whole enchilada … including the thumbnails and the view box. It does not move the viewing box area up to close the gap between the two.

It is like the viewing box area is superglued. I can make it wider or longer but the top left corner is absolutely not moving. ???

4

It’s really hard to work out how this gallery is structured just from the CSS alone. There is a lot of absolute positioning going on in there. It would be very easy to tell you what to do I we could see a live page. Otherwise, you could try altering the top position here:

#container a.pics:active span {display:block; position:absolute; left:9px; [COLOR="Red"]top:192px[/COLOR]; z-index:5; height:500px;}

but I’m just guessing. From the css it’s not clear which element you want to move.

Short of posting a link, maybe provide the whole page code, ideally with CSS in the head section.

5

Let me see if this helps first … I’ll try to attach a screen shot so you can see the image. There was a large gray box enclosing everything. I set that background to none so my textured background would show through instead

markup that affects/moves the WHOLE enchilada is in blue
markup that affects/moves the thumbnails is in green
markup that affects/moves the gray viewing box is in red
markup that affects/moves the large gallery picture is in purple
markup that affects/moves the copyright info is in orange

a, a:visited, a:hover {}

#container {position:relative; width:620px; height:700px; background:none; border:1px solid none; margin:-20px auto; font

-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; padding:7px 21px; display:inline; color:#000; text-decoration:none; [COLOR=“SeaGreen”]width:75px;

height:75px;[/COLOR] cursor:default;}
#container a.pics img.thumb {display:block; border:1px solid #595959;}

#container a.pics span {display:none; border:0; width:600px; background:#bbb; border:1px solid #fff; text-align:center;}
#container a.pics span img {margin:10px auto; border:1px solid #000;}

#container a.pics:hover {white-space:normal;}
#container a.pics:hover img.thumb {border:1px solid #fff;}
#container a.pics:hover span {display:block; position:absolute; left:9px; top:192px; z-index:10; height:500px;}

#container a.pics:active img.thumb {border:1px solid #4d7a7d;}
#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}

#container a.pics:focus {outline:0;}
#container a.pics:focus img.thumb {border:1px solid #4d7a7d}
#container a.pics:focus span {display:block; position:absolute; left:9px; top:192px; z-index:5; outline:0; height:500px;}

#container span.info {clear:left; display:block; text-align:center; [COLOR=“DarkOrange”]line-height:20px; margin:0; padding:200px 0 0 0;

width:600px;[/COLOR] text-align:center; color:#eee; z-index:1;}
#container span.info a {color:#000;}
#container span.info a:hover {text-decoration:none;}

#container {position: relative; top: 210px; left: -120px;}

6

There isn’t much else there that can move that darn box.

7

I may be missing something here but if you want to move the entire div up then change the top: value as ralph has already mentioned.

It looks like you just changed the left: value

You really should not need the relative positioning anyways.Your nav links are floated left so you should be able to float your container div left also. That should keep you from needing the relative positioning. We really need to see your html to know what is going on.

Try this -

[B][COLOR=Black]#container [/COLOR][/B]{[COLOR=Blue]float:left;width:620px; height:700px[/COLOR]}

Then use margins to fine tune it,

8

Okay, I see now. Those were your thumbnails not your left nav menu.

You may need to clear those floated thumbnails then also.

Show us your HTML please

9

Here’s the original markup I used

a, a:visited, a:hover {}

#container {position:relative; width:600px; height:700px; background:#888; border:1px solid #000; margin:10px auto; font-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; padding:7px 21px; display:inline; color:#000; text-decoration:none; width:75px; height:75px; cursor:default;}
#container a.pics img.thumb {display:block; border:1px solid #000;}

#container a.pics span {display:none; border:0; width:580px; background:#bbb; border:1px solid #fff; text-align:center;}
#container a.pics span img {margin:10px auto; border:1px solid #000;}

#container a.pics:hover {white-space:normal;}
#container a.pics:hover img.thumb {border:1px solid #fff;}
#container a.pics:hover span {display:block; position:absolute; left:9px; top:192px; z-index:10; height:500px;}

#container a.pics:active img.thumb {border:1px solid #fc0;}
#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}

#container a.pics:focus {outline:0;}
#container a.pics:focus img.thumb {border:1px solid #fc0}
#container a.pics:focus span {display:block; position:absolute; left:9px; top:192px; z-index:5; outline:0; height:500px;}

#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; width:600px; text-align:center; color:#eee; z-index:1;}
#container span.info a {color:#000;}
#container span.info a:hover {text-decoration:none;}

<div id=“info”>

<h2>A Photograph Gallery</h2>
<h3>Updated 24th September 2009</h3>

<div id=“container”>
<a class=“pics” href=“#nogo”><img class=“thumb” src=“http://www.cssplay.co.uk/menu/spole/sph1.jpg” alt=“” />
<span><img src=“http://www.cssplay.co.uk/menu/spole/simonh1.jpg” alt=“Warm to Cold” title=“Warm to Cold” /><br />Warm to Cold</span>
</a>
<a class=“pics” href=“#nogo”><img class=“thumb” src=“http://www.cssplay.co.uk/menu/spole/sph2.jpg” alt=“” />
<span><img src=“http://www.cssplay.co.uk/menu/spole/simonh2.jpg” alt=“Wheels” title=“Wheels” /><br />Wheels</span>
</a>
<a class=“pics” href=“#nogo”><img class=“thumb” src=“http://www.cssplay.co.uk/menu/spole/sph3.jpg” alt=“” />
<span><img src=“http://www.cssplay.co.uk/menu/spole/simonh3.jpg” alt=“Urban Squirrel” title=“Urban Squirrel” /><br />Urban Squirrel</span>
</a>
<a class=“pics” href=“#nogo”><img class=“thumb” src=“http://www.cssplay.co.uk/menu/spole/sph4.jpg” alt=“” />
<span><img src=“http://www.cssplay.co.uk/menu/spole/simonh4.jpg” alt=“Mother and Daughter” title=“Mother and Daughter” /><br />Mother and Daughter</span>

</a>
<a class=“pics” href=“#nogo”><img class=“thumb” src=“http://www.cssplay.co.uk/menu/spole/sph5.jpg” alt=“” />
<span><img src=“http://www.cssplay.co.uk/menu/spole/simonh5.jpg” alt=“River Junk” title=“River Junk” /><br />River Junk</span>
</a>
<a class=“pics” href=“#nogo”><img class=“thumb” src=“http://www.cssplay.co.uk/menu/spole/spv1.jpg” alt=“” />
<span><img src=“http://www.cssplay.co.uk/menu/spole/simonv1.jpg” alt=“Portrait One” title=“Portrait One” /><br />Portrait One</span>
</a>
<a class=“pics” href=“#nogo”><img class=“thumb” src=“http://www.cssplay.co.uk/menu/spole/spv2.jpg” alt=“” />
<span><img src=“http://www.cssplay.co.uk/menu/spole/simonv2.jpg” alt=“Portrait Two” title=“Portrait Two” /><br />Portrait Two</span>
</a>
<a class=“pics” href=“#nogo”><img class=“thumb” src=“http://www.cssplay.co.uk/menu/spole/spv3.jpg” alt=“” />
<span><img src=“http://www.cssplay.co.uk/menu/spole/simonv3.jpg” alt=“Portrait Three” title=“Portrait Three” /><br />Portrait Three</span>
</a>

<a class=“pics” href=“#nogo”><img class=“thumb” src=“http://www.cssplay.co.uk/menu/spole/spv4.jpg” alt=“” />
<span><img src=“http://www.cssplay.co.uk/menu/spole/simonv4.jpg” alt=“Bow and Fiddle rock” title=“Bow and Fiddle rock” /><br />Bow and Fiddle rock</span>
</a>
<a class=“pics” href=“#nogo”><img class=“thumb” src=“http://www.cssplay.co.uk/menu/spole/spv5.jpg” alt=“” />
<span><img src=“http://www.cssplay.co.uk/menu/spole/simonv5.jpg” alt=“The Pose” title=“The Pose” /><b><br />The Pose</b></span>
</a>
<span class=“info”>Photographs<br />by kind permission of<br /><a href=“http://www.simon-pole.co.uk/”>Simon Pole</a></span>
</div>

</div>

10

Hi,
Okay, The relative position is needed so don’t remove it. It is part of the disjointed rollover method.

That top:210px on the #container has nothing to do with the large image positioning, it is for the main wrapping div and it may not even be needed. I have not seen the complete html for your page yet though so I can’t say. The code you just posted was from cssplay.

To move the large image up just change the top:value below to whatever you want.

[B]#container a.pics:hover span[/B] {
    display: block;
    position: absolute;
    left: 9px;
    [COLOR=Blue]top: 100px;[/COLOR] [COLOR=Red]/*192px;*/[/COLOR]
    z-index: 10;
    height: 500px;
}
11

Thank you - Thank you - Thank you … That solved my problem.

One step closer to getting this baby online. :slight_smile:

12

Hang on, there are a couple of other spots that have those same rules. I removed the bottom row of thumbnails from the demo code and set it up like yours.

You also need to adjust the #container a.pics:active span and the #container a.pics:focus span

I’ll high-light everything I changed below.

(The heights that I changed were just for the demo code below, you may not need to change yours)


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

<style type="text/css">

a, a:visited, a:hover {
}
[B]#container [/B]{
    position: relative;
    width: 600px;
    [COLOR=Blue]height: 550px;/*was 700px*/[/COLOR]
    background: #888;
    border: 1px solid #000;
    margin: 10px auto;
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
}
#container a.pics {
    float: left;
    padding: 7px 21px;
    display: inline;
    color: #000;
    text-decoration: none;
    width: 75px;
    height: 75px;
    cursor: default;
}
#container a.pics img.thumb {
    display: block;
    border: 1px solid #000;
}
#container a.pics span {
    display: none;
    border: 0;
    width: 580px;
    background: #bbb;
    border: 1px solid #fff;
    text-align: center;
}
#container a.pics span img {
    margin: 10px auto;
    border: 1px solid #000;
}
#container a.pics:hover {
    white-space: normal;
}
#container a.pics:hover img.thumb {
    border: 1px solid #fff;
}
[COLOR=Black][B]#container a.pics:hover span[/B][/COLOR] {
    display: block;
    position: absolute;
    left: 9px;
    [COLOR=Blue]top: 100px;/*was 192px*/[/COLOR]
    z-index: 10;
    [COLOR=Blue]height: 350px;/*was 500px*/[/COLOR]
}
#container a.pics:active img.thumb {
    border: 1px solid #fc0;
}
[B]#container a.pics:active span[/B] {
    display: block;
    position: absolute;
    left: 9px;
    [COLOR=Blue]top: 100px;/*was 192px*/[/COLOR]
    z-index: 5;
    [COLOR=Blue]height: 350px;/*was 500px*/[/COLOR]
}
#container a.pics:focus {
    outline: 0;
}
#container a.pics:focus img.thumb {
    border: 1px solid #fc0
}
[B][COLOR=Black]#container a.pics:focus span[/COLOR][/B] {
    display: block;
    position: absolute;
    left: 9px;
    [COLOR=Blue]top: 100px;/*was 192px*/[/COLOR]
    z-index: 5;
    outline: 0;
   [COLOR=Blue] height: 350px;/*was 500px*/[/COLOR]
}
#container span.info {
    clear: left;
    display: block;
    text-align: center;
    line-height: 20px;
    margin: 0;
    padding: 200px 0 0 0;
    width: 600px;
    text-align: center;
    color: #eee;
    z-index: 1;
}
#container span.info a {
    color: #000;
}
#container span.info a:hover {
    text-decoration: none;
}
</style>
</head>
<body>


<div id="container">
<a class="pics" href="#nogo"><img class="thumb" src="http://www.cssplay.co.uk/menu/spole/sph1.jpg" alt="" />
<span><img src="http://www.cssplay.co.uk/menu/spole/simonh1.jpg" alt="Warm to Cold" title="Warm to Cold" /><br />Warm to Cold</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.cssplay.co.uk/menu/spole/sph2.jpg" alt="" />
<span><img src="http://www.cssplay.co.uk/menu/spole/simonh2.jpg" alt="Wheels" title="Wheels" /><br />Wheels</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.cssplay.co.uk/menu/spole/sph3.jpg" alt="" />
<span><img src="http://www.cssplay.co.uk/menu/spole/simonh3.jpg" alt="Urban Squirrel" title="Urban Squirrel" /><br />Urban Squirrel</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.cssplay.co.uk/menu/spole/sph4.jpg" alt="" />
<span><img src="http://www.cssplay.co.uk/menu/spole/simonh4.jpg" alt="Mother and Daughter" title="Mother and Daughter" /><br />Mother and Daughter</span>

</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.cssplay.co.uk/menu/spole/sph5.jpg" alt="" />
<span><img src="http://www.cssplay.co.uk/menu/spole/simonh5.jpg" alt="River Junk" title="River Junk" /><br />River Junk</span>
</a>

<span class="info">Photographs<br />by kind permission of<br /><a href="http://www.simon-pole.co.uk/">Simon Pole</a></span>
</div>


</body>
</html>
13

Thanks - I already had changed the other ones. The Hover worked perfect but when I clicked a thumbnail I ended up with double images - one in the old location and one in the new location. I figured I had to add the markup to the others also … I tried it and it worked.

Hey - I’m catching on here. I’m enjoying learning how this all works - It’s a lot of fun.

Thank you again for all your help. :slight_smile:

Kuczek