...

View Full Version : Photo Gallery Problems (CSS) ~ Solved



F15pilotX
02-22-2008, 09:34 PM
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?

oesxyl
02-22-2008, 09:53 PM
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

jcdevelopment
02-22-2008, 09:58 PM
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

F15pilotX
02-22-2008, 10:13 PM
hi,

you have some invalid markup:

http://validator.w3.org/check?verbose=1&uri=http&#37;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..

oesxyl
02-22-2008, 10:35 PM
div.ra3 {
overflow: auto;
}


solve the border, :)

PS: errors are smarter then as, :)

best regards

F15pilotX
02-22-2008, 10:53 PM
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...

oesxyl
02-22-2008, 10:56 PM
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

F15pilotX
02-22-2008, 11:03 PM
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

F15pilotX
02-22-2008, 11:10 PM
I'll be back in a bit (dinner)...however, I have this bookmarked and will read it right after that ;)

oesxyl
02-23-2008, 12:16 AM
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

oesxyl
02-23-2008, 12:35 AM
.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

oesxyl
02-23-2008, 12:43 AM
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

F15pilotX
02-23-2008, 02:04 AM
Ok, I fixed all that...now I just need to vertical align the thumbnails

_Aerospace_Eng_
02-23-2008, 09:05 AM
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.

F15pilotX
02-23-2008, 07:45 PM
#3 Set position:absolute and top:50&#37; 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'?

_Aerospace_Eng_
02-23-2008, 09:16 PM
Give the images classes where each class sets a different margin-top value.

F15pilotX
02-24-2008, 04:10 AM
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....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum