SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast Pharaoh001's Avatar
    Join Date
    Oct 2002
    Location
    Perth, Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border effect on hover.

    Hi,

    What i want to do is create a border around an area that has text and an image, when the user rolls over it with the mouse, like the hover effect in links.

    This is what I have so far trying to emulate the link effect:

    #featured {
    border: 1px solid #FFF;
    text-align:left;
    color:#000;
    font-size: 90%;
    padding: 5px 5px 5px 5px;
    margin-top: 1px;
    width: 200px;
    }

    #featured a {
    color: #000;
    text-decoration: none;
    border: 1px solid #FFF;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom:2px;
    }
    #featured a:hover {
    color: #000;
    font-wieght: bold;
    border: 1px solid #9DCD21;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom:2px;
    }

    #featured a:visited {
    color: #000;
    text-decoration: none;
    }


    The problem with this is that it gives each line of ext a border as well.
    I need to have the text and the image in surrounded in the same border.

    Can anyone suggest what I am missing here?
    Or am I completly off base.

    Thanks

  2. #2
    SitePoint Zealot sethtrain's Avatar
    Join Date
    Dec 2003
    Location
    Paducah, KY
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you might have to clarify yourself. I just processed the code like this:

    HTML Code:
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html;">
    <link rel=StyleSheet href="styles.css" type="text/css">
    </head>
    <body bgcolor="#ffffff">
    <div id="featured">This is a test. <a href="test.php">This is a link</a></div> 
    </body>
    </html>
    and it seemed like it worked fine. Don't forget with the way you have your stylesheet set up you don't need to put
    HTML Code:
    id = "featured"
    in your anchor.
    --
    sethtrain

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This may help you:

    Code:
    div.nav a
     {
     	padding:6px;
     	display:block;
     	float:left;
     	border-right:1px solid #000;
     }
     div.nav a:link, div.nav a:visited
     {
     	font-size:small;
     	font-weight:bold;
     	color:#000;
     }
     
     
     
     div.nav a:hover 
     {
     	font-size:small;
     	font-weight:bold;
     	color:#000;
     	text-decoration: none;
     	background:#999;
     	border-top: 0px inset #ccc;
     }
    Try using display:block; in your code and see what happens.
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  4. #4
    SitePoint Enthusiast Pharaoh001's Avatar
    Join Date
    Oct 2002
    Location
    Perth, Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI guys,

    Thanks for you help. Maybe I did not explain very well.

    Folow this link for an example of what I meen

    http://www.pharaoh.net.au/test/test.htm

    If you rollover the GIF it has a border surrounding both the text and the image. I would like to do this with CSS if possible.

    Cheers.
    May fortune favour the brave....

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would try putting the text and image in a container, say a Div, then have the hover effect the div. I remember seeing something like this done, but can't remember where.
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can use this method:
    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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .outer{
    position:absolute;
    left:200px;
    top:200px;
    width:200px;
    height:200px;
    background:#fff;
    }
    .outer img {float:right;}
    .outer a {background:#fff;color:#000}
    .outer a span{display:none}
    .outer a:hover span {
    display:block;
    position:absolute;
    left:-25px;
    top:-25px;
    width:250px;
    height:250px;
    border:5px solid red;
    }
    .outer a:hover {background:green;color:#fff;}
    </style>
    </head>
    <body>
    <div class="outer">
    <p><a href="#"><img src="images/pmoblogo7.jpg" width="155" height="102" alt="test" />
    Hello this is some text<span></span></a></p>
    </div>
    </body>
    </html>
    It works in modern browsers. IE6, mozilla/firebird opera7 etc. You have to make sure that the background changes slighly on hover otherwise ie won't show it (another bug).

    (You can use hover on other elements but only mozilla will support it.)

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •