12 replies [Last post]
kmark
Offline
newbie
Last seen: 11 years 26 weeks ago
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

AttachmentSize
Hover Link976 bytes
Static Link633 bytes
eltonpiko
eltonpiko's picture
Offline
newbie
seychelles
Last seen: 11 years 12 weeks ago
seychelles
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.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 10 years 2 weeks ago
Scotland
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.

kmark
Offline
newbie
Last seen: 11 years 26 weeks ago
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!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 11 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

research Sliding Doors

research Sliding Doors

kmark
Offline
newbie
Last seen: 11 years 26 weeks ago
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.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 10 years 2 weeks ago
Scotland
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.

kmark
Offline
newbie
Last seen: 11 years 26 weeks ago
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>

kmark
Offline
newbie
Last seen: 11 years 26 weeks ago
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?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 11 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 10 years 2 weeks ago
Scotland
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.

kmark
Offline
newbie
Last seen: 11 years 26 weeks ago
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.

    ljbailey
    ljbailey's picture
    Offline
    Enthusiast
    Scotland
    Last seen: 10 years 2 weeks ago
    Scotland
    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.