CSS help, a hover div

**stiofansisland** · Feb 11, 2010 13:38

Hi,

Iv got a couple of sitepoint books so i thought i would post my question here, it's been annoying me for hours now...

im trying to get a few div's to have a hover state, it worked fine in firefox but as usuall IE is the problem,

simply,

Code:

a:hover {
	text-decoration: none;
	border:none;
	background-color:#fff;
	opacity:0.6;
}

and

Code:

<a href="#"><div id="box5"></div><div id="box5-1"></div></a>

any help appriciated

Steven

**Luki_be** · Feb 11, 2010 14:02

Hi and welcome to Sitepoint

Seems your structure isn't quite correct: you have block level (div) nested inside inline (a tag). You might rethink that structure

If you still have problems, post the full html and css code or a link to a live page (because you're new, you wont be allowed yet to post the link in it's normal way, so just replace the dots in the adress with the word 'dot'. We'll do the rest ;-) )

**stiofansisland** · Feb 11, 2010 14:15

Im not sure the best way to achive what i am after so here is my pages so you get the idea..

www dot stiofan dot com/testfolder/

It's a building plan, look at it in firefox, that's how i need it to look,

advice on how best to get that would be amazing

**Stomme poes** · Feb 11, 2010 14:28

Well, Firefox is being kind to you with your errors. The HTML5 people did decide to change the rules and let anchors wrap divs... so if you wanted to research HTML5 and switch to that then possibly all the browsers would be cool with that, I dunno.

However, remaining in the real world of HTML4, you would have to do one of two things (because I'm pretty sure your problem with IE8 is IE is actually calling you out on your error... removing the error should make it work):

You can either change all those divs to some legal inline element (spans are fine for this) and if they need block nature, with css you can set the to display: block;

Or, you can have divs on the outside and anchors on the inside and those anchors themselves set to display: block (so they can have a set height and width).

I'm leaning towards #1 because that preserves most of what you already have. Remember that this means your p's also have to change to something inline.

Blocks are like buckets. Inlines are like water. Buckets can hold water, and other buckets, but water can't hold a bucket.

Except in HTML5. Bleh.

**Luki_be** · Feb 11, 2010 14:40

Originally Posted by stiofansisland

Im not sure the best way to achive what i am after so here is my pages so you get the idea..

www dot stiofan dot com/testfolder/

It's a building plan, look at it in firefox, that's how i need it to look,

advice on how best to get that would be amazing

Here you go: you have some validation errors, mainly because you nested block elements into an inline element, like i already told you. IE6 and Opera choked on that

I didn't take a close look at your css or didn't alter much to your structure. Like poes said, there are some ways to go round but i took the easy way out (being the lazy bum i am lol) and cleaned up your nesting structure. I also removed the extra closing body tag. See if this works for you (only tested locally in Opera and IE6):

Code HTML4Strict:

<div id="body">
	<div id="menuwrap" >
		<div id="box1">
			<p>&nbsp;</p>
			<p><a href="#" title="Vacant B3/1/A <br> open mos">Vacant B3/1/A 1710sq ft</a></p>
		</div>
		<div id="box1-2"></div>
		<div id="box1-3"></div>
		<div id="box2"><br />
			<br />
			<br />
			<a href="#">Vacant B3/1/B</a> </div>
		<div id="box3-1"><a href="#">STTC Test Laboratory<br />
			B3/1/C</a></div>
		<div id="box3"></div>
		<a href="#"></a>
		<div id="box4"></div>
		<a href="#"></a>
		<div id="box5"></div>
		<div id="box5-1"></div>
		<a href="#"></a>
		<div id="box6"></div>
		<div id="box6-1"></div>
		<a href="#"></a>
		<div id="box7"></div>
		<a href="#"></a>
		<div id="box8"></div>
		<a href="#"></a>
		<div id="box9"></div>
		<a href="#"></a>
		<div id="box10"></div>
		<a href="#"></a>
		<div id="box11"></div>
		<a href="#"></a>
		<div id="box12"><a href="#">Stairs </a></div>
		<div id="box13"></div>
		<a href="#"></a>
		<div id="box14"></div>
		<a href="#"></a>
		<div id="box15"></div>
		<a href="#"></a>
		<div id="box16"></div>
		<a href="#"></a>
		<div id="box17"></div>
		<div id="box18"></div>
		<div id="box19"></div>
		<div id="box20"></div>
		<div id="box21"></div>
		<div id="box22"></div>
		<div id="box23"></div>
		<div id="box24"></div>
		<div id="box25"></div>
		<div id="box26"></div>
		<div id="box27"></div>
		<div id="box28"></div>
		<div id="box29"></div>
		<div id="box30"></div>
		<div id="box31"></div>
		<div id="box32"></div>
		<div id="box33"></div>
		<div id="box34"></div>
		<div id="box35"></div>
		<div id="box36"></div>
		<div id="box38"></div>
		<div id="box37"></div>
		<div id="box39"></div>
		<div id="box40"></div>
		<div id="box41"></div>
		<div id="box42"></div>
		<div id="box43"></div>
		<div id="box44"></div>
		<div id="box45"></div>
		<div id="box46"></div>
		<div id="box47"></div>
		<div id="box48"></div>
		<div id="box49"></div>
		<div id="box50"></div>
	</div>
</div>
<div>
	<p>c</p>
	<p>c</p>
	<p>c</p>
	<p>c</p>
</div>

Something not clear, problems.... just come back to us

**RyanReese** · Feb 11, 2010 14:42

You can fake this by overlaying an absolute anchor

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>YuriKolovsky - overlay layers in IE6</title>
<style type="text/css">
/*this is organised for you*/
/*Predefined Vars*/
 * {
  margin:0;
  padding:0;
}
.hoverb {
  position:relative;
  margin-top:1.25em;
  margin-left:1.25em;
}
/*Predefined Vars*/
/*width / height*/
.hoverb div, a, a:hover span {
  border-style:solid;
  border-width:4px;
}
.hoverb div, a, a span {
  width:12em;
  height:100px;
}
a {
  display:block;
  margin-top:-108px;
  text-decoration:none;
}
h2, p {
  width:12em;
  margin:4px;
}
/*width / height*/
/*overlay trickery*/
a span {
  display:block;
  position:absolute;
  z-index:10;
  top:0px;
  left:0px;
  background-image:url(fake.gif);
  cursor:pointer;
}
h2, p {
  position:absolute;
  left:0;
  z-index:2;    
}
/*overlay trickery*/
/*Colors*/
.hoverb div {
  background-color:#999;
}
a {
  border-color:#555;    
}
a:hover {
  background-color:#e3e3e3;    
}
a:hover span {
  border-color:#000;
}
/*Colors*/
/*MISC*/
h2 {
  margin-top:-1px;
  margin-left:10px;
  font-size:xx-large;
}
p {
  margin-left:10px;
  margin-top:8px;
  top:1.7em;
  font-size:large;
}
/*MISC*/
</style>
</head>
<body>
<!--having h2 and p to look like its inside a link can be usefull, as clients often want hover buttons with text, and usually use ie6...
notice how the links are clickable-->
<div class="hoverb">
<div><h2>Planes</h2><p>for air travel</p></div><!--you could probably put all this in another div and treat that div as the h2 and p, and move h2, p inside the div-->
<a href="#planes"><span>&nbsp;</span></a><!--&nbsp; is to avoid the empty span warning in the validator-->
</div>

<div class="hoverb">
<div><h2>Trains</h2><p>for land travel</p></div>
<a href="#trains"><span>&nbsp;</span></a>
</div>

<div class="hoverb">
<div><h2>Automobiles</h2><p>for personal travel</p></div>
<a href="#automobiles"><span>&nbsp;</span></a>
</div>

</body>
</html>

**stiofansisland** · Feb 11, 2010 14:48

That's not what im trying to do. That makes the text have a white background when hovered, but im trying to make the whole div white when hovered like it does for me in firefox,

I understand this is not possable to wrap a a href arounf a div, but is there a way i can get the effect i want in ie using someother tag?

Im still just learning css so examples are a great help.

i tryed

Code:

<a href="#"><span id="box6"></span><span id="box6-1"></span></a>

but no luck,

Do u understand what im trying to do?

**Stomme poes** · Feb 11, 2010 14:54

if you replace every div and p with a span, that will make it legal but as I said, they are inlines and so to make them act like the divs did, you need to make them display: block in the css. You didn't have to say that for the divs or the ps because that's how they come out of the box.

That way a single anchor can remain a parent for the other elements.

**stiofansisland** · Feb 11, 2010 15:02

OK not really sure how to get ti to work with replacing div with span and p?

look at

www dot stiofan dot com/testfolder/ and look at test3 is that what u mean?

can anyone give me a working example of test 3?

**Luki_be** · Feb 11, 2010 15:03

Originally Posted by stiofansisland

That's not what im trying to do. That makes the text have a white background when hovered, but im trying to make the whole div white when hovered like it does for me in firefox,

I understand this is not possable to wrap a a href arounf a div, but is there a way i can get the effect i want in ie using someother tag?

Im still just learning css so examples are a great help.

i tryed

Code:

<a href="#"><span id="box6"></span><span id="box6-1"></span></a>

but no luck,

Do u understand what im trying to do?

Do you have my html still? Try setting the a tag as display:block and give it a height of 100%.

Code CSS:

a {
	color:#000;
	text-decoration: none;
	border:none;
	display:block;
	height:100%;
}

**RyanReese** · Feb 11, 2010 15:10

Originally Posted by stiofansisland

That's not what im trying to do. That makes the text have a white background when hovered, but im trying to make the whole div white when hovered like it does for me in firefox,

Was that directed at me? My code works

I understand this is not possable to wrap a a href arounf a div, but is there a way i can get the effect i want in ie using someother tag?

There is no tag in the world that will make a block inside of an inline valid

. Use the way I pointed out.

**stiofansisland** · Feb 11, 2010 15:15

Originally Posted by RyanReese

Was that directed at me? My code works

There is no tag in the world that will make a block inside of an inline valid

. Use the way I pointed out.

No your code works amazing but can i make it work to hightlight two or more areas as it needs to highlight a whole room when hoverd,

please look at www dot stiofan dot com/testfolder/xls-test-3.html

that works in firefox, see how it makes the whold room highlighted, is that possable with your code?

**RyanReese** · Feb 11, 2010 15:51

Rough around the edges but is this what you meant? Does each box need content in it?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
div.wrapper {
    position:relative;
    width:15em;
    margin:20px;
}
div{height:10em;}
a {
    height:10em;
    background:#f2f2f2;
    text-decoration:none;
	overflow:hidden;
    display:block;
	margin-top:-3em;
}
a.two{margin:0;}
a:hover {
    background:red;
}
h2, p {
    padding:0 20px;
    position:relative;
    z-index:1;
}
span {
    z-index:100;
    position:absolute;
    width:15em;
    height:10em;
    top:0;
    left:0;
    background: url(fake.gif);
}
span.two{z-index:99;}
div.two{width:200&#37;;}
</style>
</head>
<body>
<div class="wrapper">
    <div>
	<h2>Planes</h2>
	<p>for air travel</p>
	<a href="#"><span></span></a>
    </div>
    <div class="two">
	<a href="#" class="two"><span class="two"></span></a>
    </div>
</div>
</body>
</html>

**Luki_be** · Feb 11, 2010 15:58

What you can do is this: from my example

Code CSS:

a {
	color:#000;
	text-decoration: none;
	border:none;
 
}
 
 
 
a:hover {
	text-decoration: none;
	border:none;
	background-color:#fff;
	opacity:0.6;
	display:block;
	height:100&#37;;
}
 
#box2:hover{
           background-color:#FFFFFF;
}

tsted in IE6 and opera and the whole div changes to white on hover. Note that i used it on the html i provided you earlier.

**stiofansisland** · Feb 11, 2010 16:00

Originally Posted by RyanReese

Rough around the edges but is this what you meant? Does each box need content in it?

Thats almost it, only one box needs content.

the whole thing i am stuck on is i need both boxes to be highlighted on hover (at the same time) and they will both link to the same thing

So if i hover on the top box the top box will highlight and the bottom box will highlight aswell and the same the otherway about.

thats why i was trying to put two divs in a href because they both highlight...

**RyanReese** · Feb 11, 2010 16:08

Both at the same time? I don't think that would be possible without some javascript in place

. Because if you think about it, you can't hover over two elements at once, nor can you make that kinda shape with an element (an anchor is inline and it wrapped around the <div> in your first example to create taht shape. Other browsers won't do that)

Javascript is probably your only way here.

**stiofansisland** · Feb 11, 2010 16:12

Originally Posted by RyanReese

Both at the same time? I don't think that would be possible without some javascript in place

. Because if you think about it, you can't hover over two elements at once, nor can you make that kinda shape with an element (an anchor is inline and it wrapped around the <div> in your first example to create taht shape. Other browsers won't do that)

Javascript is probably your only way here.

i had kind of fugured that might be the case, are u any good at javascript?

**RyanReese** · Feb 11, 2010 16:36

Lol no I'm not. Head over to the Javascript forum for help

**stiofansisland** · Feb 11, 2010 18:05

Originally Posted by RyanReese

Lol no I'm not. Head over to the Javascript forum for help

Thanks for all your help m8

I finally got if sorted with soem javascript

Code:

 <style type="text/css"> 
       
	   
	   .myHighlight { 
           color:#fff; 
	background-color:#0C6;
	opacity:0.5;
filter: alpha(opacity=50); 
         } 
       .myDefault { 
         color:#333; 
         background:#090; 
       } 
     </style> 
     <script type="text/javascript"> 
       function changeTo(myId) 
         { 
           document.getElementById(myId).className='myHighlight';            
         }  
       function changeBack(myId) 
         {  
           document.getElementById(myId).className='myDefault'; 
         }  
     </script>

and

Code:

<a href="http://www.google.co.uk"><div id="box33" class="myDefault" onMouseover="changeTo('box33'); changeTo('box34');" onMouseout="changeBack('box33'); changeBack('box34');"></div>
<div id="box34" class="myDefault" onMouseover="changeTo('box33'); changeTo('box34');" onMouseout="changeBack('box33'); changeBack('box34');"><br />
  <br />
  <br />
  test</div></a>

i know it's totaly not valid but it workes in ie, firefox and safari, so im happy..

**RyanReese** · Feb 11, 2010 20:17

Glad to hear it's all sorted

User Tag List

Thread: CSS help, a hover div

Thread Tools

Display

CSS help, a hover div

Bookmarks

Bookmarks

Posting Permissions