homepage Welcome to WebmasterWorld Guest from 54.227.77.237
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Nav with Curved Comers Using Images
kiwibrit




msg:4267461
 5:32 pm on Feb 15, 2011 (gmt 0)

The following works well for horizontal menu buttons where the background images are 5px wide gifs giving the appearance of the top and bottom having a curved bevel:

CSS


ul#navbar {
padding: 0;
margin: 0;
color: #fff;
float: left;
width: 100%;
}
ul#navbar li {
display: inline;
}
ul#navbar li a {
background-image:url(../images/nav/main-1m.gif);
padding:3.5px;
margin-right: 10px;
margin-bottom: 20px;

color: #fff;
text-decoration: none;
float: left;
}
ul#navbar a:link, ul#navbar a:visited { color: #fff; }
ul#navbar a:focus, ul#navbar a:active, ul#navbar li a:hover {
color: #000;
background-image:url(../images/nav/main-2m.gif);
}


HTML


<div>
<ul id="navbar">
<li><a href="../index.php">Home</a></li>
<li><a href="../Something.php">Electric</a></li>
<li><a href="../else.php">Something else</a></li>
<li><a href="../support.php">Support</a></li>
</ul>
</div>


But I would like to add images to each side of the buttons so that the button sides appear to have bevels and rounded corners.

Anyway of doing that simply - or must I do a major overhaul and call up absolute positioning?

 

webprutser




msg:4267849
 10:24 am on Feb 16, 2011 (gmt 0)

I happen to be working on a menubar with curved buttons. I made my buttons in the right shape, so the image already has the curves in it and this works very well. No difficult things, just make the right image and you only have to deal with making a menu bar like you do when you use "normal" images. Or didn't I understand your question in the right way?

kiwibrit




msg:4267892
 11:09 am on Feb 16, 2011 (gmt 0)

Thanks for coming back to me. I was trying to do to things - minimise the actual image (so using tiling of the 5px-wide background image for the main area of the button) and allow for differing lengths of button text. I have seen something that calls up a wider image (no great penalty if using a gif) and then closes off at the right width with a right-hand end image. I'll play with that, and drop in a note of how I got on.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved