Question

I have a div that is rectangular with some cute rounded corners. This is the appearence of it;

But, what I should do is, put the header in a tab but it wount be clickable. Just the looks.This is the way it should look

Is there an easy way to do this? Or should I make the background an image? The div and the header is typical divs with height, width etc. The header has an image only. I could really use some suggestions. I would love to get some help with the CSS of it. It is Openx so it is kind of hard to me to understand each line of code in the project. I am very new at this.

Answer 1

It can be done completely without javascript, just plain old css..

If you have the markup

 <div id="stuff">
     <h1>title</h1>
     Lorem ispum dolor sit amet
 </div>

(I have an <h1>, but in your case it would be an Image. Except for that there should be no difference)

Then a css like the following should do the trick:

 #stuff {
     margin: 100px;
     position:relative;
     background-color: silver;
     -moz-border-radius-topleft: 30px;
     -moz-border-radius-topright: 0px;
     -moz-border-radius-bottomright: 30px;
     -moz-border-radius-bottomleft: 30px;
     -webkit-border-radius: 30px 0px 30px 30px;
     border-radius: 30px 0px 30px 30px;
     padding: 30px;
 }

 #stuff h1 {
     position: absolute;
     top: -40px;
     height: 40px;
     right: 0px;
     left: 50%;
     background-color: silver;
     padding: 10px;
     -moz-border-radius-topleft: 30px;
     -moz-border-radius-topright: 0;
     border-radius: 30px 0 0 0;
 }

You can see a working example here: http://jsfiddle.net/4RPhu/

basically you’re styling the div, and then positioning the “Tab” absolutely relative to the div, with negative top value so it sticks out, and then simply on the left. Just adjust the values according to your needs.