No replies
jerseydudek
jerseydudek's picture
Offline
newbie
UK
Last seen: 5 years 29 weeks ago
UK
Timezone: GMT+1
Joined: 2014-05-19
Posts: 1
Points: 2

Hi,

In the past I've frequently used what I think is called the "sliding doors" technique for image links EG:-

That's always worked fine. Better than alternative images.

But it's difficult achieving the same thing with a responsive layout. The problem is to do with the width and height which you can see if you drag the browser to different screen sizes on the following page (Note, it's the image on the left of the group of four image links below the main image box on this page :- - I've only done the first image on the left til I get the solution sorted)

This is the css I'm using to achieve that. I feel I'm half way there but if anyone can advise on how to make this work fully responsively I'd appreciate it:

#dinnermenu {
	position:relative;
	width:100%!important;
	height:50%!important;
	padding: 0px;
	border: 0px;
	z-index: 3;
	background-color:#999999;
}
#dinnermenu ul {
padding:0px;
margin: 0px;
}
#dinnermenu li {
list-style:none;
display:inline;
text-decoration:none;
}
#dinnermenu a {
width:100%!important;
	height: 306px;
font-family:Arial, Helvetica, sans-serif;
font-size:2.2em;
color:#ffffff;
font-weight:bold;
text-decoration:none;
background:url("../images/imagenav1.jpg") no-repeat;
float:left;
padding:0px;
margin:0px;
}
#dinnermenu a:hover {
background-position:0px -324px;
color:#E35757;
}

Thanks for any advice.