Photo Gallery Problems (CSS) ~ Solved

So, I have a gallery here:
http://f15pilotx.x10hosting.com/gallery/index.html

CSS: http://f15pilotx.x10hosting.com/gallery/gallery.css

Two Problems:

One, how do I get those images vertically centered in their divs? I thought vertical-align: middle would do it, but I suppose I did the selector part wrong..I've tried two different things that you can see, but more on my own...

Two, why isn't the border going around the entire .ra3 div, but instead just the top?

hi,

you have some invalid markup:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ff15pilotx.x10hosting.com%2Fgallery%2Findex.html

try to fix them first.

best regards

change this for the border


div.ra3 {
border: 1px solid red;
height:750px;
}


set a height for the class!!

as for the the vertical alignment

put it in a paragraph like so



<div><p><a href="ra3/screenshots/screen1.jpg"><img src="ra3/screenshots/thumbnails/thumb_screen1.jpg"></p></a></div>


everything should work

good luck

hi,

you have some invalid markup:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ff15pilotx.x10hosting.com%2Fgallery%2Findex.html

try to fix them first.

best regards

fixed, and wow, do I feel like a dumbass :p

Also, it still won't center..

div.ra3 {
overflow: auto;
}


solve the border, :)

PS: errors are smarter then as, :)

best regards

not really seeing what you're talking about...I added it in if that's what you mean..:confused:

edit - ok, I see what it's doing...never heard of the property before though...

put also:


div.container {
width: 746px;
}


do you need both div.container and div.ra3 ?
If you don't add some code after div.ra3, are redundant.


adjust the width to be: the (160 + 2*8 + 2*1 + 2*4) * 5 + 2*1
- width of the image
- margin
- border
- padding
for each image
- border for container

I talk about point two, border around the photos.



best regards

I'm going to have another section like ra3 (called tiberium) after it; however, now I don't see the border for container....


Nevermind, it looks great now...now I just need the images vertically centered

I'll be back in a bit (dinner)...however, I have this bookmarked and will read it right after that ;)

I'll be back in a bit (dinner)...however, I have this bookmarked and will read it right after that ;)

let's try replace the content of gallery.css with this:


* {
margin: 0;
padding: 0;
}

.container {
border: 3px solid black;
margin: 10px;
padding: 5px;
width: 915px;
}
.ra3 {
border: 2px solid red;
padding: 5px
margin-left: auto;
margin-right: auto;
overflow: auto;
}
.ra3 div {
float: left;
border: 1px solid red;
margin: 8px;
height: 200px;
}


center the image in divs is still not fixed, I'll try to see what I can do.

best regards

.container {
border: 3px solid black;
margin: 10px;
padding: 5px;
width: 915px;
}

the red width, must be multiple of 183px, the width of one image, you have no other choice.

best regards

is an error in css file:


.ra3 {
border: 2px solid red;
padding: 5px;
margin-left: auto;
margin-right: auto;
overflow: auto;
}

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Ff15pilotx.x10hosting.com%2Fgallery%2Findex.html

best regards

Ok, I fixed all that...now I just need to vertical align the thumbnails

Read this: http://phrogz.net/CSS/vertical-align/index.html

BTW there is a lot of unnecessary code in your page. No need for the paragraphs. Also that very top align is messing up the display in IE6. Remove it.

#3 Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.

My problem with this is that I can't have all the child containers at top: 50%....do I just need to make row containers and do it there?


edit - and which 'very top align'?

Give the images classes where each class sets a different margin-top value.

Ok, thanks :)

After a bit of thought, I think I'll take away the div borders and just give the ra3 div a separate background image from the tiberium one....