ansaurus

Question

Answer 1

+3 A:

I only gave the website a short peak and basically they provide you with a couple of PNGs. Not bad, however not the best solution in all cases. Since the current CSS standard doesn't support rounded corners and beside Firefox/Mozilla no one understands this:

-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

I think you are stuck with only one option. Choose a constant height and width for your element and create ONE png out of it. You can than create something like this

span{
 display:block;
 width:100px; height:100px;     
 background-image:url("nice.png");
}

span:hover{
 background-image:url("nice_hover.png");
}

Why do I think there is no other way? Because you only can effectively change the attributes of one element at a time with the "hover" effect. Hopefully CSS3 will give us rounded corners... However if you make use of JavaScript this is a completely different story..

Update

I thought about it and I probably flopped in presenting you all the available options. Here is a working solution for IE7+, FF, Opera that achieves exactly what you are looking for. Just replace the color with some background-image. Sorry!

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Floating</title>
    <style type="text/css">
      .content p{
        position:relative;
        height:100px;
        width:400px;
        border:1px solid black;
      }
      .content p span{
        position:absolute;
      }

      .content p .span1{
        left:0;
        top:0;
      }

      .content p .span2{
        right:0;
        top:0;
      }

      .content p .span3{
        left:0;
        bottom:0;
      }

      .content p .span4{
        right:0;
        bottom:0;
      }

      .content p:hover .span1{
        background-color:red; 
      }

      .content p:hover .span2{
        background-color:blue; 
      }

      .content p:hover .span3{
        background-color:green; 
      }

      .content p:hover .span4{
        background-color:yellow; 
      }
    </style>
  <body>
    <div class="content">
      <p>
        <span class="span1">1</span>
        <span class="span2">2</span>
        <span class="span3">3</span>
        <span class="span4">4</span>
      </p>
    </div>
    </body>
</html>

merkuro 2009-06-16 02:53:50

hey thanks for the comment :) yeah i thought perhaps this was the case - however was hoping there might be a solution with a:hover elements for each div created by the creator.so i.e. "rounded_box_bottom div a:hover" with the hover image etc and shove in some "<a href=#"> .. </a>" - not sure if this will work?

2009-06-16 02:56:27

couldnt do it - in the end just used http://www.atblabs.com/jquery.corners.html - :D

2009-06-16 03:31:42

It's not just Firefox/Mozilla: Safari/Midori/Webkit browsers have the comparable "-webkit-border-radius:" and "-webkit-border-top-left-radius" (Or bottom-right-, top-right-, bottom-left-) options.

David Thomas 2009-06-16 06:35:50

Answer 2

A:

I would recommend doing this in JavaScript, this will then allow for variable sized rounded corner boxes.

gonzohunter 2009-06-16 10:09:51

ansaurus

tags:

views:

answers:

Rounded Crnr CSS Hover

related questions