Forum Moderators: not2easy

Message Too Old, No Replies

display block or link div

         

Kysmiley

9:38 pm on Nov 21, 2004 (gmt 0)

10+ Year Member



I have been working on a new layout for a site that has stair style type links. I Am trying to either get the complete div cell to be hyper-linked or set it as display block but nether seem to work as of yet. All I can get is the text in the div to be hyperlinked yet I can get the whole background color of the div to change with the hover effect. Here is the coding, can someone please offer any suggestions and any problems u may see for different browsers.
Pat.
Sorry forgot to add that the little hand will only appear if u place the mouse on the text.

<style type="text/css">
/* This is my test header setup */
div.top {
position: relative; left: 3%; width: 96%; height: 200px; font-family: Arial; 1em; border: solid 2px blue;
} /* Header main box*/

div.left{
display: block; position: absolute; left: 40%; top: 65px; width: 10%; height: 20px; background-color: blue; font-family: Arial; 1em; font-weight: bold; text-align: center; border: inset; 2px; blue;
} /* left button */

div.right_of_left{
display: block; position: absolute; left: 55%; top: 90px; width: 10%; height: 20px; background-color: blue; font-family: Arial; 1em; font-weight: bold; text-align: center; border: inset; 2px; blue;
} /* right side of left button */

div.left2right{
display: block; position: absolute; left: 70%; top: 115px; width: 10%; height: 20px; background: blue; font-family: Arial; 1em; font-weight: bold; text-align: center; border: inset; 2px; blue;
} /* left of right bottom button */

div.right{
display: block; position: absolute; left: 85%; top: 140px; width: 10%; height: 20px; background: blue; font-family: Arial; 1em; font-weight: bold; color:black; text-align: center; border: inset; 2px; blue;
} /* right bottom button */

/* Link properties for header */
div a:link, a:visited, a:active {display: block; font-family: Arial; 1em; color:black; text-decoration: none; background-color: blue;}
a:hover {display: block; font-family: Arial; 1em; color:black; text-decoration: none; background-color: pink;}
/* Need to findout how to set cell as link and not just text */

</style>
</head>
<body>
<div class="top">
Corner logo/background</br> goes here
<div class="left">
<a href="home.php">
Home</a></div>
<div class="right_of_left">
<a href="Contacts.php">
Contacts</a></div>
<div class="left2right">
<a href="comments.php">
Comments</a></div>
<div class="right">
<a href="sitemap.php">
Site Map
</a></div>
</div>

jetboy_70

11:01 pm on Nov 21, 2004 (gmt 0)

10+ Year Member



Just changing <a> to display: block; isn't enough. If you also add:

height: 100%;
width: 100%;

the link will expand to fill its container.

Kysmiley

11:23 pm on Nov 21, 2004 (gmt 0)

10+ Year Member



I'm not sure I follow you? Do you mean in the a link properties like this,
/* Link properties for header */
div a:link, a:visited, a:active {display: block; height: 100%; width: 100%; font-family: Arial; 1em; color:black; text-decoration: none; background-color: blue;}
a:hover {display: block; font-family: Arial; 1em; color:black; text-decoration: none; background-color: pink;}
/* Need to find out how to set cell as link and not just text */
It seems that when viewing in browser it did not work the way i wanted it to yet when I uploaded it it works ok just now the a:hover will not display the different background color and work as a hover till i at least click on a link one time then after that that link button hover works. Any ideas. The page and layout look great with the background.

Kysmiley

11:59 pm on Nov 21, 2004 (gmt 0)

10+ Year Member



fixed the hover problem i forgot to include the div infront of the a for the properties
now to see if it works in ie 5.5 its ok in netscape 6 and firfox and ie 6 thats all i have on my machins so far to test with. If anyonbe else has any other suggestions on ways to make it better while keeping the main theme please let me know
Pat