Rounded Corners Help

Discussion in 'CSS' started by wd_2k6, Apr 18, 2008.

0
  1. #1
    Hi, i currently have my div' with rounded corners set up as the following:

    <div class="top"></div>
    <div class="middle"><a href="something.html">Blah</a></div>
    <div class="bottom"></div>

    Whereby top has the top corners picture of the rounded div, bottom the bottom corners.

    What i'm wondering is it possible if when somebody hovers over the link inside the middle div (which would be set to block) that it also changes the background of the top and bottom div's?

    Is this possible via CSS or would it require JS?
     
    wd_2k6, Apr 18, 2008 IP
  2. jordanthegreat

    jordanthegreat Active Member

    Messages:
    390
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #2
    I have never done this before, but I just played around a bit with a test page and this is what I came up with. It can probably be cleaned up and fine tuned a lot but I figure this will get you started on the right track. Tested it in FF2 and IE7.

    
<html>
<head>
<title>test</title>
<style type="text/css">
body {
	margin:0;
	padding:0;
}
.top {
	background-image: url('1.jpg');
	width: 300px;
	height: 200px;
}
.bottom {
	background-image: url('1.jpg');
	width: 300px;
	height: 200px;
}
.middle a:hover #move1 {
	background-image: url('2.jpg');
	position:absolute;
	top:0;
	left:0;
	width: 300px;
	height: 200px;
}
.middle a:hover #move2 {
	background-image: url('2.jpg');
	position:absolute;
	top:220px;
	left:0;
	width: 300px;
	height: 200px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle"><a href="something.html"><div id="move1"></div><div id="move2"></div>Blah</a></div>
<div class="bottom"></div>
</body>
</html>
    Code (markup):
    Basically, hovering over the link places new background images over the regular ones. You won't be able to change the original background images without having the .top and .bottom divs inside the <a> tag but you can at least cover them up.
     
    jordanthegreat, Apr 18, 2008 IP
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hey thanks Jordan sorry for the late reply i've only just started working on this again today. Your example works like a charm, the only problem i'm having is adapting it slightly.

    You see if my position knowledge is correct then I don't think i could use position: absolute, as i'm having the Div repeat on the page so i couldn't specifiy an exact location, it would have to be position: relative. The problem i get while doing this is that it seems to push the content of the Div down?
     
    wd_2k6, Apr 26, 2008 IP