HTML5 Samples

Question by 无影: some prob with html codes/css. Very hard to explain, come in for more details. thanks?
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

Photo Gallery

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;
}

Best answer:

Answer by Namibnat
Honestly, I don’t think that you are going to get a useful answer with this markup. You have styling, such as height=”100px” in the middle of your html, and then have your css apart. This makes understanding css like this a bit of a muddle. Try to strip out the heights and bolds and things like that, and write html as clean tags, then the styling becomes that much more manageable.

Also, if you understand the box model idea of css, each peace is related to the others and fits within it’s context within the page. So you really need to look at the whole page.

What you do to other elements will affect what happens to your gallery. It can’t be examined as a separate peace of code.

For example, just to start with, did you clear the body –

body{
margin:0;
padding:0;
}
As well as the buffer div tags, other columns, and so on.

Add your own answer in the comments!