Greetings,
I need help trying to accomplish something. I have searched and searched for a solution and I can't find anything ... I have tried a bunch of different things and still no luck. I'm sure it's something simple but I am not all that fluent with css, you could say that I am somewhat new to it other than the basics.
I am trying to create retangular box to put an image in. The box around the image will make the image look like a poloroid photograph. Ok, I got that and can do it.
I would like that box to change color when hovered over. The image is a clickable link. I would also like the background to stay changed for 'visited'. Best I can get it to do is change the border color which is not what I am looking for. Even then its the border of the image and not the box.
I hope that was clear enough.
Picture a poloroid that changes color when you mouse over and stays changed if you click it.
Thanks.
sabyre wrote: I have tried a
I have tried a bunch of different things and still no luck.
Like what?
Well.... Here is what I have
Well....
Here is what I have currently..
/* Album Thumbnails ------------------------------ */ .album { margin: 0 12px 8px 0; padding: 10px 10px 20px 10px; border: 2px solid #000; background: #F9F8F7; float: left; line-height: 100%; } .album a:hover img { border: 2px solid #FF0CFF; } .album a img { border: 2px solid #CCC; }
I've tried different variants of that, I have tried putting that within another div. I'm missing something obviously.
Okay. Well, we're not in the
Okay. Well, we're not in the business of writing code for you.
If you can read through the posting guidelines and follow the directions, such as posting all of your code in code tags or providing a link, we can help you solve the issue.
Thanks!!
I thought I had followed the
I thought I had followed the guildlines... I appologize. I asked for some guidance. I tried to be as clear as possible and I have otherwise searched for a solution before creating a new post.
When I arrived at this website I was sure your "business' was:
A Cascading Style Sheet learning resource for web developers and designers. Give and receive tips and advice on CSS and website creation.
Honestly I am not sure or have any idea how to achieve what i'm looking for and I am simply looking for a step in the right direction, or perhaps a better way.
I didn't mean to make waves.
CSS
/* Album Thumbnails ------------------------------ */ .album { margin: 0 12px 8px 0; padding: 10px 10px 20px 10px; border: 2px solid #000; background: #F9F8F7; float: left; line-height: 100%; } .album a:hover img { border: 2px solid #FF0CFF; } .album a img { border: 2px solid #CCC; }
HTML
<DIV CLASS="album"> <a href="<?php echo htmlspecialchars(getAlbumLinkURL());?>" title="<?php echo gettext('View album:'); ?> <?php echo getAnnotatedAlbumTitle();?>"><?php printCustomAlbumThumbMaxSpace(null,185,400); ?></a> <BR> <a href="<?php echo htmlspecialchars(getAlbumLinkURL());?>" title="<?php echo gettext('View album:'); ?> <?php echo getAnnotatedAlbumTitle();?>"><?php printAlbumTitle(); ?></a> - <?php echo getNumImages(); ?> Photos </DIV>
You can try adding the
You can try adding the background and padding to the anchor instead of the div.
You may need to add display:block to the anchor to make it work out.
Then just change the background color for a:visited and see if that does what you're looking for.
Thank you so much for that
Thank you so much for that insight. I think I got from what you suggested. Here is my code now...
.album a { margin: 0 12px 8px 0; border: 2px solid #000; padding: 10px 10px 20px 10px; display: block; float: left; background: #F9F8F7; font-family: sans-serif; color: #000000; text-decoration: none; line-height: 100%; } .album a:hover { border: 2px solid #FF0CFF; background: #FEDEFE; }
<DIV CLASS="album"> <a href="<?php echo htmlspecialchars(getAlbumLinkURL());?>" title="<?php echo gettext('View album:'); ?> <?php echo getAnnotatedAlbumTitle();?>"><?php printCustomAlbumThumbMaxSpace(null,185,400); ?><BR><BR><?php printAlbumTitle(); ?> - <?php echo getNumImages(); ?> Photos</a> </DIV>
I havent incorporated the 'visited' yet, but thank you. I really appreciate it.
Now that I have the elements
Now that I have the elements im looking for I'm having another issue trying to center them properly and thus display them properly because they are float: left.
It would be easier to post a link and describe the issue, however it is an adult oriented site and I'm not sure the policy on that.
Don't post a full link (break
Don't post a full link (break it up with [dot] or something and make sure to note it's NSFW).
You can try display:inline-block instead of float:left and then just give the wrapper element text-align:center
You will need to add a conditional for IE6 and maybe 7 (can never remember) where it sets the anchor to display:inline
You will most likely need to adjust margins to work in your favor.
clamhunter [dot] com - NOT
clamhunter [dot] com - NOT SAFE FOR WORK - ADULT MATERIAL!
You will see on the index there the elements that I have described, the poloroids...
I would like to have those both horizontally centered and vertically centered to create a nice even looking table.
Each image is pulled by a foreach loop.
Current CSS
.album a { margin: 0px 25px 25px 0px; border: 2px solid #000; padding: 10px 10px 20px 10px; display: block; float: left; background: #F9F8F7; font-family: sans-serif; color: #000000; text-decoration: none; line-height: 100%; } .album a:hover { border: 2px solid #000000; background: #FEDEFE; }
<?php while (next_album()):
<?php while (next_album()): ?> <DIV CLASS="album"> <a href="<?php echo htmlspecialchars(getAlbumLinkURL());?>" title="<?php echo gettext('View album:'); ?> <?php echo getAnnotatedAlbumTitle();?>"><?php printCustomAlbumThumbMaxSpace(null,175,400); ?><BR><BR><?php printAlbumTitle(); ?> - <?php echo getNumImages(); ?> Photos</a> </DIV> <?php endwhile; ?>
Deuce wrote: You can try
You can try display:inline-block instead of float:left and then just give the wrapper element text-align:center
You will need to add a conditional for IE6 and maybe 7 (can never remember) where it sets the anchor to display:inline
You will most likely need to adjust margins to work in your favor.
Replace
display: block; float: left;
Excellent, I'll give it a
Excellent, I'll give it a whirl thanks.
Using the above suggestion I
Using the above suggestion I now get 1 centered image per row.
Looking to get 3.
OK.... so progress but still
OK.... so progress but still not the desired... Please don't hate me ...
I made the containing elements have a border of 1 so that you could see whats going on when/if you look at the page.
I just can't get away from the float: left.
What I am trying to acomplish here is getting the pics centered in the boxes, both H and V. Tho, I would settle for just V.
current CSS
.albumcont { border: 1px solid #000; horizontal-align: middle; width: 230px; height: 375px; vertical-align: center; float: left; } .album a { margin: 0px 25px 25px 0px; border: 2px solid #000; padding: 10px 10px 20px 10px; display: inline-block; /*float: left;*/ background: #F9F8F7; font-family: sans-serif; color: #000000; text-decoration: none; text-align: center; line-height: 100%; }
Thanks
.thumbcont { border: 1px
.thumbcont { border: 1px solid #000; width: 150px; height: 175px; /*float: left;*/ } .thumbalbum a { vertical-align: middle; border: 1px solid #000; padding: 5px 5px 15px 5px; display: inline-block; background: #F9F8F7; }
Gives me a horizontal center (not sure why), but I can not for the life of me get a vertical center.
EURIKA!!! God, after days and
EURIKA!!!
God, after days and days...
.acont { margin: 10px; width: 195px; height: 350px; display: table; float: left; } .albumcont { display: table-cell; vertical-align: middle; } .album a { border: 2px solid #000; padding: 10px 10px 20px 10px; display: inline-block; background: #F9F8F7; font-family: sans-serif; color: #000000; text-decoration: none; text-align: center; line-height: 100%; } .album a:hover { border: 2px solid #000000; background: #FEDEFE; }
Has the desired effect!
Thanks for all your help.