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 bo开发者_运维百科th 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;
}
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.
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
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 :)
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>
This does work in all browsers!!!
加载中,请稍侯......
精彩评论