some prob with html codes/css. Very hard to explain, come in for more details. thanks?

  • Thread starter Thread starter æ— å½±
  • Start date Start date
Æ

æ— å½±

Guest
I want to make a photo gallery for my webpage. I found a template somewhere but the prob is that the thumbnails of the photos will cut into the border(left side) of my webpage, how do i move the whole gallery to the right? I tried to change the margin of the thumbnails, yeah it will shift to the right when you refresh the page but when the mouse hovered on the thumbnails the whole thing will shift back to left. Any idea why? Below is my html code

<head>
<title>
Photo Gallery
</title>
<link rel="stylesheet"type="text/css"href="photocss.css"/>
</head>
<body>
<h2><b> Photo Gallery</b></h2>

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="pic 1.jpg" width="100px" height="66px" border="0" /><span><img src="pic 1.jpg" /><br />Crab</span></a>


<a class="thumbnail" href="#thumb"><img src="pic 2.jpg" width="100px" height="66px" border="0" /><span><img src="pic 2.jpg" /><br />Simply Beautiful</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="pic 3.jpg" width="100px" height="75px" border="0" /><span><img src="pic 3.jpg" /><br />Flower in the rain</span></a>

<a class="thumbnail" href="#thumb"><img src="pic 4.jpg" width="100px" height="70px" border="0" /><span><img src="pic 4.jpg" /><br />Trees</span></a>

<br/>
<a class="thumbnail" href="#thumb"><img src="pic 5.jpg" width="100px" height="70px" border="0" /><span><img src="pic 5.jpg" /><br />Insect and leaf</span></a>

<a class="thumbnail" href="#thumb"><img src="pic 6.jpg" width="100px" height="70px" border="0" /><span><img src="pic 6.jpg" /><br />Tree or Umbrella</span></a>

<br/>
<a class="thumbnail" href="#thumb"><img src="pic 7.jpg" width="100px" height="70px" border="0" /><span><img src="pic 7.jpg" /><br />Take the long way home</span></a>

<a class="thumbnail" href="#thumb"><img src="pic 8.jpg" width="100px" height="70px" border="0" /><span><img src="pic 8.jpg" /><br />Beauty of Symmetry</span></a>
<br />

</div>

Below is my CSS code


.gallerycontainer{
position: relative;
}

.thumbnail img{
border: 1px solid black;
margin: 0 5px 5px 0px;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
 
Back
Top