Hover Box How?

16 replies [Last post]

Wed, 2010-08-18 20:28

sabyre

Offline

Regular

Last seen: 12 years 24 weeks ago

Timezone: GMT-4

Joined: 2010-08-18

Posts: 12

Points: 13

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.

Tags:

Beginners CSS Questions

Wed, 2010-08-18 20:34

Deuce

Offline

Guru

Somewhere, USA

Last seen: 5 years 29 weeks ago

Somewhere, USA

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4424

Points: 1843

sabyre wrote: I have tried a

sabyre wrote:

I have tried a bunch of different things and still no luck.

Like what?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Wed, 2010-08-18 20:44

sabyre

Offline

Regular

Last seen: 12 years 24 weeks ago

Timezone: GMT-4

Joined: 2010-08-18

Posts: 12

Points: 13

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.

Wed, 2010-08-18 21:12

Deuce

Offline

Guru

Somewhere, USA

Last seen: 5 years 29 weeks ago

Somewhere, USA

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4424

Points: 1843

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!!

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Wed, 2010-08-18 21:32

sabyre

Offline

Regular

Last seen: 12 years 24 weeks ago

Timezone: GMT-4

Joined: 2010-08-18

Posts: 12

Points: 13

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:

Quote:

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>

Thu, 2010-08-19 01:54

Deuce

Offline

Guru

Somewhere, USA

Last seen: 5 years 29 weeks ago

Somewhere, USA

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4424

Points: 1843

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.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Thu, 2010-08-19 03:18

sabyre

Offline

Regular

Last seen: 12 years 24 weeks ago

Timezone: GMT-4

Joined: 2010-08-18

Posts: 12

Points: 13

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.

Thu, 2010-08-19 19:01

sabyre

Offline

Regular

Last seen: 12 years 24 weeks ago

Timezone: GMT-4

Joined: 2010-08-18

Posts: 12

Points: 13

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.

Thu, 2010-08-19 19:07

Deuce

Offline

Guru

Somewhere, USA

Last seen: 5 years 29 weeks ago

Somewhere, USA

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4424

Points: 1843

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.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Thu, 2010-08-19 19:18

sabyre

Offline

Regular

Last seen: 12 years 24 weeks ago

Timezone: GMT-4

Joined: 2010-08-18

Posts: 12

Points: 13

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

Thu, 2010-08-19 19:20

#10

sabyre

Offline

Regular

Last seen: 12 years 24 weeks ago

Timezone: GMT-4

Joined: 2010-08-18

Posts: 12

Points: 13

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

Thu, 2010-08-19 19:27

#11

Deuce

Offline

Guru

Somewhere, USA

Last seen: 5 years 29 weeks ago

Somewhere, USA

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4424

Points: 1843

Deuce wrote: You can try

Deuce wrote:

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;

with the above concept and see if that does the trick. I am currently at an office so I am unable to view the website. If that doesn't work, I can try to take a look later this evening.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Thu, 2010-08-19 19:28

#12

sabyre

Offline

Regular

Last seen: 12 years 24 weeks ago

Timezone: GMT-4

Joined: 2010-08-18

Posts: 12

Points: 13

Excellent, I'll give it a

Excellent, I'll give it a whirl thanks.

Thu, 2010-08-19 19:42

#13

sabyre

Offline

Regular

Last seen: 12 years 24 weeks ago

Timezone: GMT-4

Joined: 2010-08-18

Posts: 12

Points: 13

Using the above suggestion I

Using the above suggestion I now get 1 centered image per row.

Looking to get 3.

Fri, 2010-08-20 00:19

#14

sabyre

Offline

Regular

Last seen: 12 years 24 weeks ago

Timezone: GMT-4

Joined: 2010-08-18

Posts: 12

Points: 13

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

Sat, 2010-08-21 01:50

#15

sabyre

Offline

Regular

Last seen: 12 years 24 weeks ago

Timezone: GMT-4

Joined: 2010-08-18

Posts: 12

Points: 13

.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.

Sat, 2010-08-21 05:24

#16

sabyre

Offline

Regular

Last seen: 12 years 24 weeks ago

Timezone: GMT-4

Joined: 2010-08-18

Posts: 12

Points: 13

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.

sabyre wrote: I have tried a

Well.... Here is what I have

Okay. Well, we're not in the

I thought I had followed the

You can try adding the

Thank you so much for that

Now that I have the elements

Don't post a full link (break

clamhunter [dot] com - NOT

<?php while (next_album()):

Deuce wrote: You can try

Excellent, I'll give it a

Using the above suggestion I

OK.... so progress but still

.thumbcont { border: 1px

EURIKA!!! God, after days and

User login

Navigation