Hi all, Trying to achieve this effect: The navbar with the overhang i would like to implement into one of my new designs but i am struggling to understand this... Reference site: http://www.mbike.com/ Willing to pay $5- for the CSS / HTML Code.. provided it works within my new style, ive looked over the reference site with firebug but can still not make the code work. Please pm or reply with any help on this topic please. Regards, Darren
Here is my demo code for that effect. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head profile='http://gmpg.org/xfn/11'> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>Menu Demo</title> <style type="text/css"> * { border: 0; margin: 0; padding: 0; } body { background-color: #000; } #container { background-color: #fff; margin: 0 auto; width: 980px; } #header { height: 100px; } #menubar { background-color:#004080; border-bottom: 4px solid #FF7000; height:40px; margin-bottom: 20px; position: relative; width:980px; z-index: 20; } #menubar .corner { border-style: solid; border-width: 10px; bottom: -10px; position: absolute; z-index: -1; } #ribbonLeft, #ribbonRight { background-color:#004080; height:40px; position: absolute; width: 10px; } #ribbonLeft { left: -10px; top: 0; } #ribbonLeft .corner { border-color: transparent #FF7000 transparent transparent; left: -10px; } #ribbonRight { right: -10px; top: 0; } #ribbonRight .corner { border-color: transparent transparent transparent #FF7000; right: -10px; } #content { height: 500px; } </style> </head> <body> <div id="container"> <div id="header"></div> <div id="menubar"> <div id="ribbonLeft"><div class="corner"></div></div> <div id="ribbonRight"><div class="corner"></div></div> </div> <div id="content"></div> </div> </body> </html> Code (markup):