Home/ Questions/Q 7004815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T21:14:52+00:00

So I have this Div that has a roll over effect on it where

  • 0

So I have this Div that has a roll over effect on it where it changes the border color on roll over, in order to make this div a link I’ve put a link into the DIV and given it a Display: Block property so it fills the div.

What I’m having an incredibly hard time doing is getting the text to align to the bottom left corner of this div while keeping the blocking so the whole roll over area stays a link.

ANY solutions to this problem I’d greatly appreciate, thanks for your help in advance I’ve been battling this for a while.

http://www.klossal.com/media/index_test.html

this is the test page and this is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title>MEDIA</title> 
</head> 

<SCRIPT TYPE="text/javascript"> 
<!-- 
function mouseover() 
{ 
document.getElementById("thediv").style.borderLeft="10px solid black";  
} 
function mouseout() 
{ 
document.getElementById("thediv").style.borderLeft="10px solid #898787";
}

//--> 
</SCRIPT>
<style type="text/css"> 

</style>

</HEAD> 
<link rel="shortcut icon" href="\favicon.ico"> 


<body> 

<DIV style="width:200px;height:200px;border-left:10px solid #898787" id=thediv     
onmouseover="mouseover()" onmouseout="mouseout()">
<a style="padding-top:1cmpx;" href="www.klossal.com">LINK IT BABY</a>
<DIV>

</body> 
</html> 

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To align something to the bottom, one can set the position to absolute and bottom to 0px. This will align it to bottom of the first parent that is positioned either absolute or relative.

    In your case, set the position of the DIV to relative, the position of the link to absolute and the bottom of the link to 0px:

    http://jsfiddle.net/rodin/jxyZz/

    And by the way, you can achieve the rollover effect with pure CSS, see the fiddle. If you want to make the entire box a link, the box should be an A and the text a DIV (you did it the other way around).

    • 0