Hay guys... anyone able to tell me how to get a similiar effect to the image i attached on a menu i have... At the moment..the menu is a simple "box"..... Im unsure if id need to have images or wat...and if so...can the menu be added to without breaking it as it expands teh images? below is teh css i have...the menu is question is called in teh html with this.. <div id="sidebar"> <h3>Menu</h3> <div id="nav-right"> Code (markup): body { font:0.8em Tahoma,Geneva,Arial,Helvetica,sans-serif; color:#4D4D4D; line-height:1.8em; text-align:left; background:url(imgs/BG-slice.jpg) repeat-y center; margin:0 auto; } a:hover { color:#2699eb; } *h1 { font:30px Trebuchet MS; color:#1c6ea8; padding-left:15px; margin:15px 0; } h2 { font:22px Trebuchet MS; color:#1c6ea8; margin:15px; } h3 { font:20px Trebuchet MS; color:#1c6ea8; margin:15px; } h4 { font:20px Trebuchet MS; color:#1c6ea8; margin:15px; } p { margin:5px 15px; } blockquote p { font:160% Georgia; color:#aaa; line-height:25px; padding:5px; } .highlight { color:#9c0; font-weight:700; } #container { width:875px; text-align:left; background:#fcf5e1; line-height:1.8em; border-left:0px solid #fcf5e1; border-right:0px solid #fcf5e1; margin:0 auto; padding:0 !important; } #header { height:184px; background:url(imgs/bannerfinale.jpg) no-repeat; border-top:px solid #fcf5e1; border-bottom:px solid #fcf5e1; } #header h1 { float:left; color:#000; font:45px Trebuchet MS; background:none; font-weight:700; margin:40px 0 0 15px; } #content { float:right; width:670px; background:#ffffff; color:#787878; font-family:Tahoma,Geneva,Arial,Helvetica,sans-serif; border:0px #888; margin:10px; padding:0; } #sidebar { float:left; width:154px; background:#455641; color:#787878; border:0px #888; margin:10px 0 0 5px; padding:0; } .thumbs img { position:relative; border:2px solid #aaa; background-color:inherit; margin:2px 3px 3px 2px; padding:1px; } .thumbs img:hover { border:2px solid #2699eb; } #nav-top { float:right; background:inherit; margin:5px 15px 0 0; } #nav-top ul { background:inherit; margin:0; padding:2px; } #nav-top li { display:inline; padding:4px; } #nav-top a,#nav-top a:visited { color:#aaa; font-weight:700; text-decoration:none; margin:4px; } #nav-top a:hover,#nav-top a:visited:hover { color:#fff; } #mainnav { min-height:30px; background:inherit; margin:2px 16px 2px 11px; } #mainnav ul { height:100%; margin:0; padding:0 0 0 10px; } #mainnav li { list-style:none; float:right; width:auto; margin:7px 5px 0; } #mainnav a:link,#mainnav a:visited { display:block; color:#aaa; text-transform:uppercase; font-weight:700; text-decoration:none; background:inherit; border-bottom:2px solid #1c6ea8; padding:1px 10px 2px 12px; } #mainnav a:hover,#mainnav a:visited:hover { color:#FFF; text-decoration:none; border-bottom:2px solid #2699eb; background:#212121; padding:1px 10px 2px 12px; } #mainnavsub { clear:both; } #mainnavsub ul { margin:0; padding:0 10px; } #mainnavsub li { list-style:none; float:right; padding-left:8px; margin:4px 16px 0 2px; } #mainnavsub li a { font-size:10px; font-weight:700; text-transform:uppercase; text-decoration:none; color:#aaa; } #mainnavsub li a:hover { text-decoration:none; color:#fff; } #nav-right ul { list-style:none; margin:0; padding:0; } #nav-right { margin:10px; } #nav-right li { display:block; border-bottom:0px #888; margin:2px 0; padding:0; } #nav-right li a { display:block; text-decoration:none; background:inherit; color:#aaa; padding:1px 1px 1px 6px; } #nav-right li a:hover { background:#212121; color:#fff; } #footer-contents { clear:both; text-align:right; background:inherit; border-top:0px #aaa; margin:0; padding:2px 0; } #footer-copy { background:#455641; color:#FFF; margin:4px 16px 4px 10px; padding:5px; } #footer-copy a:hover,#footer-copy a:visited:hover { color:#aaa; } #footer-links { font-size:10px; margin:10px 16px !important; padding:0; } a,#footer-copy a,#footer-copy a:visited { color:#ffffff; } Code (markup): Thanks in advance guys...much appreciated tones
See this web link: http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml or: http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml Hope that helps.
Thanks a lot...i actually figured it out from those links.. this one here http://kalsey.com/2003/07/rounded_corners_in_css/ though wile it seems to work...im unsure if ive added it correctly into the code? as i already had a "menu div"...and didnt need the "box it used on that example i dropped the "<div class="roundcont">" i used this css from the link above... .roundtop { background: url(imgs/tr.gif) no-repeat top right; } .roundbottom { background: url(imgs/br.gif) no-repeat top right; } img.corner { width: 15px; height: 15px; border: none; display: block !important; } Code (markup): and then added into html like this... <div id="sidebar"> <div class="roundtop"> <img src="imgs/tl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> </div> <div id="nav-right"> <ul> <li><a href="{url_index}" title="Home Page ">Home Page</a></li> <li><a href="{page_link_3}" title="">About Us</a></li> <li><a href="{page_link_2}" title="">Contact Us</a></li> </ul> </div> <div class="roundbottom"> <img src="imgs/bl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> </div> Code (markup): if anyone could give it teh once over id appreciate it... again..thanks gwh for the links
dang it... lol just realised i have to have ALL corners with that code...cant seem to isolate it so i can choose say top right and bottom left... ??
You could use <b> tags like this: http://battletech.hopto.org/html_tutorials/rounded_css_borders/ Only add the <b>s where you want the round. (page 2 has other kinds of borders if you are interested.) The h3 can do the top entirely. So the div holding the menu (which you don't need by the way, you could just have a ul sitting in ther directly, but it doesn't hurt) would have the bottom. This technique uses no images and like the other will allow your box to expand in whatever direction. It's some extra HTML markup, but big whoop. There are two classes on the boxes in the examples... you could just have one. Also, the IE stuff might have to be changes... that overflow: auto screwed with my page in IE, and I had to change that, as well as hide the haslayout triggers from normal browsers. But it works, I've used it.
Ok, using my <b> tag method is WAY too complicated for such a simple layout issue... This is a definate candidate for 'sliding doors' more akin to my 'eight corners under one roof' technique... though WAY simpler. You put the whole thing in a container, we'll call it .box - in .box you have the header, the content (which gets it's own div) and the bottom part. If you don't care about transparancy or dynamic width you could simplify this further by setting the bottom on .box, but dynamic is 'where it's at'... We'll use a single image... We set the corners as they would be, pad the top area so that it can go to a couple lines if need be, and expand the whole image to 2048 pixels wide to cover the largest size we'd ever use. Border on .content, badda boom, badda bing... http://battletech.hopto.org/for_others/tones_ie/template.html as with all my examples the directory: http://battletech.hopto.org/for_others/tones_ie is unlocked so you can grab the gooey bits... validates XHTML 1.0 strict, CSS validates, tested working in IE 5.5, 6 & 7, Opera, Firefox and Safari. Simple, uses one image, fully dynamic width, dynamic height on the header up to 132pixels... I even added transparancy to top 6 px of the bottom border and 'rode it up' over the content to reduce the amount of bottom margin. That's what you wanted, right?
Thanks a lot guys... @deathshadow... That is friggin awsome...Thanks u soo much....i downloaded the sample and will take a look.. Thanks again guys...much appreciated