17 replies [Last post]
cgacord
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2005-03-03
Posts: 9
Points: 0

First I guess I will explain what I want to do. I want to create a table of pictures, each picture will have a 125px by 125px cell. I want the picture vertically and horizontally aligned in the cell and when a user hovers over the cell I wan the entire cell background color to change. so far I have this.

HTML File:

<table>
<td valign="center" align="center">
<div id="picts">
<a class="pics" href="pictures/bbgirls1.jpg" target="new">
<img src="pictures/bbgirls1.jpg" border="0" width="100">
</a>
</div>
</td>
</table>

CSS File:

#picts { height:125px;width:125px; }
a.pics { height:125px;display:block; }
a.pics:hover { background-color:#FFF;display:block; }

What I have is a picture that is in a cell 125 x 125 and is hroizontally center, but it isn't vertically center and the background color changes.

Any help with the vertical alignment?

Anonymous
Anonymous's picture
Guru

Re: Picture Table

What is the purpose of putting a div inside of a table cell?

cgacord
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2005-03-03
Posts: 9
Points: 0

Re: Picture Table

Triumph wrote:
What is the purpose of putting a div inside of a table cell?

There is no real reason, I was just tryin out different things and that was the last thing I tried, but even without the div tag when I set a.pics {height:125px; width:125px; display:block} the a tag fills the block, but I can't figure out how to vertically align the picture. Because the picture is placed at the top of the a tag when the link is bigger than the picture. Is there a way to vertically center the image in the link?

Anonymous
Anonymous's picture
Guru

Picture Table

Show the page you are working on. It would be easier to see it that for you to explain it.

cgacord
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2005-03-03
Posts: 9
Points: 0

Picture Table

Triumph wrote:
Show the page you are working on. It would be easier to see it that for you to explain it.

Here is a link to a page with the problem I am having:
http://www.usna.edu/Paintball/test/snowboard.html

Anonymous
Anonymous's picture
Guru

Picture Table

You have a keyword error: <td valign="center" align="center">

There is no "center" in valign. Try "middle" (as you have elsewhere in your code).

Also, look into using lists as menus instead of using a million divs. Smile

cgacord
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2005-03-03
Posts: 9
Points: 0

Picture Table

Triumph wrote:
You have a keyword error: <td valign="center" align="center">

There is no "center" in valign. Try "middle" (as you have elsewhere in your code).

Also, look into using lists as menus instead of using a million divs. Smile

Changing the valign="center" to valign="middle" doesn't work. I am pretty sure the problem has to do with positioning of the picture in the link since the link height is larger than the picture.

Thanks though

Anonymous
Anonymous's picture
Guru

Picture Table

Sorry I couldn't help more.

Anonymous
Anonymous's picture
Guru

Picture Table

If you want to lay out the pics without tables (which I think is a groovy idea) then try the way I did it on this page: http://members.verizon.net/vze47msr/route66.html

cgacord
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2005-03-03
Posts: 9
Points: 0

Picture Table

Triumph wrote:
Sorry I couldn't help more.

That's Ok, Thanks for you efforts anyway.

cgacord
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2005-03-03
Posts: 9
Points: 0

Picture Table

Triumph wrote:
If you want to lay out the pics without tables (which I think is a groovy idea) then try the way I did it on this page: http://members.verizon.net/vze47msr/route66.html

That's Not quite what I am looking for. I have the layout of the pictures like I want, but I can't get the vertical alignment straight. If you have anything that could help me straighten out that part of the page that would be golden.

Anonymous
Anonymous's picture
Guru

Picture Table

I guess I should have done this first:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.usna.edu%2FPaintball%2Ftest%2Fsnowboard.html

I usually assume it is done before a question is asked here. Smile

Anonymous
Anonymous's picture
Guru

Picture Table

cgacord wrote:
That's Not quite what I am looking for. I have the layout of the pictures like I want, but I can't get the vertical alignment straight.
I wasn't saying "You should make your page look like mine!" Laughing out loud I'm not that arrogant. Wink

I was just suggesting the technique.

cgacord
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2005-03-03
Posts: 9
Points: 0

Picture Table

Triumph wrote:
cgacord wrote:
That's Not quite what I am looking for. I have the layout of the pictures like I want, but I can't get the vertical alignment straight.
I wasn't saying "You should make your page look like mine!" Laughing out loud I'm not that arrogant. Wink

I was just suggesting the technique.

I know you weren't, I didn't mean to come off like that, I was just saying that I looked at your code and it doesn't really solve the problem that I am tryin to fix.

Anonymous
Anonymous's picture
Guru

Picture Table

cgacord wrote:
I know you weren't, I didn't mean to come off like that, I was just saying that I looked at your code and it doesn't really solve the problem that I am tryin to fix.
I guess you will have to clean up your markup first. Smile

cgacord
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2005-03-03
Posts: 9
Points: 0

Picture Table

Triumph wrote:
cgacord wrote:
I know you weren't, I didn't mean to come off like that, I was just saying that I looked at your code and it doesn't really solve the problem that I am tryin to fix.
I guess you will have to clean up your markup first. Smile

Hey I cleaned it up, but the problem still remains. Any more ideas?

Anonymous
Anonymous's picture
Guru

Picture Table

cgacord wrote:
Hey I cleaned it up, but the problem still remains. Any more ideas?
Hey! Nice work! I'll mess around with it and get back to you. Smile

cgacord
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2005-03-03
Posts: 9
Points: 0

Picture Table

Triumph wrote:
cgacord wrote:
Hey I cleaned it up, but the problem still remains. Any more ideas?
Hey! Nice work! I'll mess around with it and get back to you. Smile

Hey, I worked a little on it last night, and I found a way to center the picture and change the background color of the cell, but what I was trying to do was make the whole cell a link, but currently on the picture is a link. But it has the look I was going for.