Borders & Background on rollover

bswinnerton · 12-05-2007, 04:48 PM

Hi guys,

I have a quick question. I'm running a site in all html, and I was wondering if there is a way to have a border on hover.

Here is what I have now:

Code:

<p style="border: 1px solid #9099AB; padding: 0px 0px 0px 0px; background-color: #BFCFE6; padding-left: 0px; padding-right: 0px;"><a href="http://www.mysite.com/">My Site</a></p>

If you're unsure of what I'm trying to say, check out the windows update site. Their links on the left is basically what I want to do. Only in HTML

Thanks.

searchbliss · 12-05-2007, 06:40 PM

I'm not sure you can do this with the code above. You can use DHTML or Javascript to make a table border around the link show using the "OnMouseOver" and "OnMouseOff" events.

bswinnerton · 12-05-2007, 06:44 PM

Alright, Any ideas for the code or where to point me?

Boogle · 12-06-2007, 01:04 AM

this will work:

Code:

<p style="border: 1px solid #9099AB; padding: 0px 0px 0px 0px; background-color: #BFCFE6; padding-left: 0px; padding-right: 0px;"><a href="http://www.mysite.com/">My Site</a></p>

Change your code to the following code:

FIRST CSS

Code:

a p
    {
        border: 1px solid #9099AB; 
        padding: 0px 0px 0px 0px; 
        background-color: #BFCFE6; 
        padding-left: 0px; 
        padding-right: 0px;
    }
    
    a p:hover
    {
        border:4px solid #000000;
    }

NOW HTML

Code:

<a href="mysite.html"><p>My site</p></a>

This will work as i've tested it.

HTH's
Boog's

bswinnerton · 12-06-2007, 03:32 PM

Alright, I'm a little confused about that script. For CSS on the top of my page I have the following

Code:

<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:20px;
	top:38px;
	width:105px;
	height:197px;
	z-index:1;
	background-color: #FFFFFF;
	a p
    {
        border: 1px solid #9099AB; 
        padding: 0px 0px 0px 0px; 
        background-color: #BFCFE6; 
        padding-left: 0px; 
        padding-right: 0px;
    }
    
    a p:hover
    {
        border:4px solid #000000;
    }
}
-->
</style>

And then in the layer I have the links. Is something wrong?

Costin Trifan · 12-06-2007, 03:50 PM

just change the a with p in the code above, like this:

Code:

P A { .. the code from above...}
P A:hover { .. the code from above...}

bswinnerton · 12-06-2007, 04:29 PM

For some reason neither of those are working. Right now in my style.css sheet I have:

Code:

#Layer1 {
	position:absolute;
	left:20px;
	top:38px;
	width:105px;
	height:197px;
	z-index:1;
	background-color: #FFFFFF;
	P A
    {
        border: 1px solid #9099AB; 
        padding: 0px 0px 0px 0px; 
        background-color: #BFCFE6; 
        padding-left: 0px; 
        padding-right: 0px;
    }
    
    P A:hover
    {
        border:4px solid #000000;
    }
}

Costin Trifan · 12-06-2007, 04:33 PM

that's weird... hmm

bswinnerton · 12-06-2007, 04:34 PM

Perhaps it's not compatible with firefox? ..Let me try out some other browsers

Costin Trifan · 12-06-2007, 04:34 PM

update: you've forgotten to add the } here:

Code:

#Layer1 {
	position:absolute;
	left:20px;
	top:38px;
	width:105px;
	height:197px;
	z-index:1;
	background-color: #FFFFFF;
}

bswinnerton · 12-06-2007, 04:37 PM

:/ Nope, still nothing on IE, Firefox and Safari

Costin Trifan · 12-06-2007, 04:41 PM

ok. let me try again:
what element you want bordered here? the P or the A ?

Costin Trifan · 12-06-2007, 05:33 PM

anyway...

Check the code I provided and adjust it to suit your needs. If you want other element to share that styles, just replace the current element "p" with the one you want.

this adds a border to your "p" element:

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>Your Page Name Here</title>
    <style type="text/css">

    #Layer1 {
	    position:absolute;
	    left:20px;
	    top:38px;
	    width:105px;
	    height:197px;
	    z-index:1;
	    background-color: #FFFFFF;
    }

    
    #Layer1 P {
        border: solid 1px #9099AB;
        padding: 0px 0px 0px 0px;
        background-color: #BFCFE6;
        padding-left: 0px; padding-right: 0px;
    }
    
    #Layer1 P:hover {
        border: solid 3px #ff0000;
    }
    
    </style>
</head>
<body>
    <div id="Layer1">
        <p>
            <a href="http://www.mysite.com/">My Site</a></p>
    </div>
</body>
</html>

bswinnerton · 12-06-2007, 05:47 PM

I'm sorry, it does work now that I put the ending bracket. I missed that post.

bswinnerton · 12-06-2007, 06:01 PM

One more question. Is there a way to set that just for the layer that I have? It is also changing the background and rollovers of my normal links as well.

Boogle · 12-07-2007, 12:45 AM

Quote:

Originally Posted by bswinnerton

One more question. Is there a way to set that just for the layer that I have? It is also changing the background and rollovers of my normal links as well.

There's no way that the code Costin Trifan posted, will be changing your background color: the hover element is only changing your border attributes. Is your code different to his?

Boog's

bswinnerton · 12-07-2007, 08:36 AM

Yes, I'm sorry I forgot to mention that

Is there any way to make it so it only changes the layer and not all of my page?

Boogle · 12-07-2007, 08:37 AM

yes, within the hover declaration you must change all the styles you want to change? Is thatwhat you mean?

bswinnerton · 12-07-2007, 09:21 AM

Yes I believe so. So would I still be using the A or P? For example all of my links in my layer1 are .style2, so I'm not sure if i'd still use A or P