CODEWITHSUNDEEP
cssimagebackground
Tommy Cox Green
Tommy Cox Green

Reputation: 633

Curved Menu Tabs

I am trying to make rounded corners on a tabbed dynamic menu using Drupal ad the dynamic-peristent-menu module, (hence the dynamic-persistant style definitions in the code below) You can see the code and the menu is 99% right here: http://vpscentre.co.uk/sandbox/ Can anyone make my solution 100% correct and make it so the navi_top_right.png and navi_top_left.png both show at the same time?

The html which I have generated to make an active menu element is here:

VPS Servers

I have tried many css combinations and now I think I need to open this problem up to the community!

Here are the relevant style sheet definitions I am currently using:

a.dynamic-persistent-menu-menu-item { background: url(images/backgrounds/business/navi_top_left.png) top left no-repeat; }

.dynamic-persistent-menu-menu li.active, .dynamic-persistent-menu-menu a:hover {

background: #093056 url(images/backgrounds/business/navi_top_left.png) top left no-repeat;

}

.dynamic-persistent-menu-menu-item a.active {

background: #093056 url(images/backgrounds/business/navi_top_right.png) top right no-repeat;

}

Upvotes: 0

Views: 663

Answers (4)

Tommy Cox Green
Tommy Cox Green

Reputation: 633

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!!!

Upvotes: 0

stephenmurdoch
stephenmurdoch

Reputation: 34633

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 :)

Upvotes: 0

Jonny Haynes
Jonny Haynes

Reputation: 3186

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.

Upvotes: 1

Stephan Muller
Stephan Muller

Reputation: 27620

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

Upvotes: 0

Related Questions