ansaurus

Question

Curved Menu Tabs

Answer 1

A:

What you need is the 'sliding doors' effect:

http://www.alistapart.com/articles/slidingdoors/

In general terms, you give the <li> a top left corner and the <a> a top right corner using a background image and some padding/margin. Then you let the content of the push both sides apart so the text always fits.

I used the same technique on www.mallorca.nl, the block top left with the rounded orange corners:

<div id="destwrapheader">
  <h2 style="font-size: 15px;">Vind jouw ideale Mallorca bestemming!</h2>
</div>

#destwrapheader {
  background:transparent url(images/mallorca/destinationblock/destination_top_right.png) no-repeat scroll right top;
}

#destwrapheader h2 {
  background:transparent url(images/mallorca/destinationblock/destination_top_left.png) no-repeat scroll left top;
margin:0 28px 0 0;
padding:0 0 0 12px;
}

Something similar goes for the other rounded corners lower in the page.

A slight problem: you'll need to indicate to the <li> that the link inside is active, not to the link itself.

Or you could also just ignore older browsers and use CSS3 border radius, of course: http://css3.info/preview/rounded-border

Litso 2009-12-17 13:26:49

thanks for this, I have been trying to use this technique, but it helps knowing that this is the right method. Now I can continue trialing and erroring with more confidence. If you or anyone else can actually see what is wrong with how I have done this so far, please shout! :)

Daniel Higgins 2009-12-17 13:55:58

just can not get both images to show up. Every time one of the images always seems to strikeout the other one. As one can see http://vpscentre.co.uk/sandbox

Daniel Higgins 2009-12-17 14:27:27

Answer 2

+1 A:

You could try border-radius in your CSS, negates the need for multiple graphics.

Works in FF, Safari, and Chrome ... just defaults to square corners in IE/Opera.

See here for more information.

Jonny Haynes 2009-12-17 15:20:16

thanks Jony.. I would dearly like the curves for IE and Opera too much, but thanks for the idea.

Daniel Higgins 2009-12-17 16:24:28

Answer 3

A:

you could always try using SpiffyCorners - a CSS implementation - http://www.spiffycorners.com/ - the markup required is a bit tedious though

you could also try niftyCube if you don't mind using a bit of javascript - http://www.html.it/articoli/niftycube/index.html

to be honest, I reckon you should use the border-radius property and then block anyone using IE from accessing your site :)

stephenmurdoch 2009-12-17 19:13:30

What about adding divs before and after?<style type="text/css">.left_corner { display:inline; background: #093056 url(left.png) top left no-repeat !important;} .right_corner { display:inline; background: #093056 url(left.png) top right no-repeat !important;} </style></head><body><div><div class="left_corner"> </div>content<div class="right_corner"> </div></div>

Daniel Higgins 2009-12-17 19:38:05

Answer 4

A:

What about adding divs before and after?

<style type="text/css"> 
  .left_corner { 
    display:inline; 
    background: #093056 url(left.png) top left no-repeat !important; 
  } 

  .right_corner { 
    display:inline; 
    background: #093056 url(left.png) top right no-repeat !important; 
  } 
</style>
</head> 
<body> 
  <div>
    <div class="left_corner">&nbsp;</div>content<div class="right_corner">&nbsp;</div>
  </div>

This does work in all browsers!!!

Daniel Higgins 2009-12-17 22:58:09

ansaurus

tags:

views:

answers:

Curved Menu Tabs

related questions