2 background images for a link?

12 replies [Last post]

Wed, 2009-05-27 18:09

kmark

Offline

newbie

Joined: 2009-05-27

Posts: 6

Points: 0

Hi All,

I've run into a little problem that I'm wondering if there is a css solution to.

I am trying to make links on a site that when NOT being hovered over just look like black text on white background but when hovered over they have a grey box with 4 rounded corners appear behind\arround the link. Obviously this can be done with a single image but because there are a few links with this format with different widths (Join, Contact Us, Initiatives, etc...) I would ideally like to have 2 images one with the right side rounded corners one with the left side corners and in the middle would be where the text goes.

First of all does my explanation make sense? and secondly am I asking too much? I've tried numerous things to no avail and wondered if I could get some direction here.

Thanks

Mark

I've attached 2 images to show what the links would look like

Attachment	Size
Hover Link	976 bytes
Static Link	633 bytes

Tags:

CSS Styling

Wed, 2009-05-27 18:37

eltonpiko

Offline

newbie

Joined: 2009-05-25

Posts: 10

Points: 0

link

to get you right you want that 2 images to be on top of each other or someting but only one will popup on hover?would both images be visible because i dont quit understand.

Wed, 2009-05-27 18:39

ljbailey

Offline

Enthusiast

Joined: 2009-01-10

Posts: 224

Points: 59

Can you show us your code

Can you show us your code please. are your links inside an unordered list, if so it is easy. PLease show us your code.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Wed, 2009-05-27 18:52

kmark

Offline

newbie

Joined: 2009-05-27

Posts: 6

Points: 0

Below is some code I whipped

Below is some code I whipped up that shows my issue, the example below has the one bg image I am wondering if there is a way to get a nother bgimage onthe other side of the link

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.link li{
	display: inline;
	padding-left: 10px;
}
.link a{
	padding: 17px;
	color: #000000;
	background-color: #FFFFFF;
}
.link a:hover{
	padding: 17px;
	color: #000000;
	background-color: #9E9E9E;
	background-image: url(images/greyimage.gif);
	background-repeat: no-repeat;
	background-position: left;
}
-->
</style>
</head>
<body>
<div class="link">
<ul>
	<li><a href="">Member Initiatives</a></li>
	<li><a href="">Join</a></li>
	<li><a href="">Contact</a></li>		
</ul>
</div>
</body>
</html>

you can check it out in action here: http://tinyurl.com/opke89

I hope this makes my issue more clear, and thank you!

Wed, 2009-05-27 18:55

CupidsToejam

Offline

Guru

Timezone: GMT-6

Joined: 2008-08-15

Posts: 2634

Points: 1552

research Sliding Doors

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Wed, 2009-05-27 19:02

kmark

Offline

newbie

Joined: 2009-05-27

Posts: 6

Points: 0

yea i found something

yea i found something similar to the sliding doors before but that does not work because I would like both bg images to change on the hover, which does not happn in the sliding doors example.

Wed, 2009-05-27 19:25

ljbailey

Offline

Enthusiast

Joined: 2009-01-10

Posts: 224

Points: 59

Use a background image on

Use a background image on the .link li {} and the other on .link li a {} then you can do the 2 changed bg images on .link li:hover {} and .link li a:hover {}

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Wed, 2009-05-27 20:45

kmark

Offline

newbie

Joined: 2009-05-27

Posts: 6

Points: 0

Fantastic thanks Liam! Code

Fantastic thanks Liam! Code is below for anyone who needs it down the road...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.link li{
	padding-top: 17px;
	padding-bottom: 17px;		
	height: 54px;
	display: inline;
}
.link li:hover{
	background-color: #9E9E9E;
	background-image: url(greyimage2.gif);
	background-repeat: no-repeat;
	background-position: right;	
}
.link li a{
	padding: 17px;
	color: #000000;	
}
.link li a:hover{
	padding: 17px;
	color: #000000;
	background-image: url(greyimage.gif);
	background-repeat: no-repeat;
	background-position: left;
}
-->
</style>
</head>
<body>
<div class="link">
<ul>
	<li><a href="">Member Initiatives</a></li>
	<li><a href="">Join</a></li>
	<li><a href="">Contact</a></li>		
</ul>
</div>
</body>
</html>

Wed, 2009-05-27 20:50

kmark

Offline

newbie

Joined: 2009-05-27

Posts: 6

Points: 0

except it doesn't work in

except it doesn't work in IE, is this because IE does not support hover on non elements? and if so is there a way around this?

Wed, 2009-05-27 21:20

CupidsToejam

Offline

Guru

Timezone: GMT-6

Joined: 2008-08-15

Posts: 2634

Points: 1552

I think you need to research

I think you need to research my post better. And, no, IE6 and below does not support :hover except for links.

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Thu, 2009-05-28 07:26

#10

ljbailey

Offline

Enthusiast

Joined: 2009-01-10

Posts: 224

Points: 59

Dean Edward's IE6 fixer will

Dean Edward's IE6 fixer will solve the problem. The code below says if the browser being used is not IE7 or later then reference a script. The referenced script is a Javascript library which makes IE:6 support most of the CSS selectors it doesn't, including :hover for elements other than links. Use the code below as is and you're good to go.

BUT ALSO: Your Doctype is not correct as it does not have an associated URL: Here is the full DTD (document type declaration) for HTML Transitional:

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Thu, 2009-05-28 18:34

#11

kmark

Offline

newbie

Joined: 2009-05-27

Posts: 6

Points: 0

ok so i was playing around

ok so i was playing around with it this morning and seem to be getting nowhere.

I've got both the hovers (on the li and the a) working in both browsers however i've stumbeled across another problem (isn't that always the way) that i can't seem to get the li height to show up the same in FF and IE. I know that you can't apply a height attribute to an li so i used line-height thinking that would be the fix but it isn't.

So really all I need to do now is to get the to fill up the enitre

in both browsers...suggestions

below is the latest code ive been working with:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<style type="text/css">
<!--
.greyLink li{
	display: inline;
	line-height: 38px;
}
.greyLink li:hover{
	background-color: #e8e8e8;
	background-image: url(images/layout/greyNavRight.gif);
	background-repeat: no-repeat;
	background-position: right;	
}
.greyLink li a{
	padding-top:11px;
	padding-bottom:12px;	
	padding-left:10px;
	padding-right:10px;	
	font-size: 12px;
	color: #000000;	
}
.greyLink li a:hover{
	color: #000000;
	background-image: url(images/layout/greyNavLeft.gif);
	background-repeat: no-repeat;
	background-position: left;
}
.greyLink ul {
	margin:0;
	padding:0;
	list-style:none;
}
-->
</style>
</head>
<body>
	<div class="greyLink">
		<ul>
			<li><a href="">MEMBER INITIATIVES</a></li>
			<li><a href="">THE MARKET</a></li>
			<li><a href="">EVENTS + OPPORTUNITIES</a></li>		
		</ul>
	</div>
</body>
</html>

or you can see it in action here...http://www.markkoopman.com/css2.php
thanks again.

Thu, 2009-05-28 19:01

#12

ljbailey

Offline

Enthusiast

Joined: 2009-01-10

Posts: 224

Points: 59

The only way you can do that

The only way you can do that is by getting your bottom and top padding right. If you have snipping tool installed on your computer you can make it easier by cutting around the text, and then checking the height of the image, then subtracting that from the height of the background image.

If you don't have snipping tool just play around with your top and bottom padding of the a element until you get it right.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

2 background images for a link?

link

Can you show us your code

Below is some code I whipped

research Sliding Doors

yea i found something

Use a background image on

Fantastic thanks Liam! Code

except it doesn't work in

I think you need to research

Dean Edward's IE6 fixer will

ok so i was playing around

The only way you can do that

New forum topics

User login

Navigation