1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Please help with CSS Navigation overhang ??

Discussion in 'CSS' started by zinghana, Feb 22, 2011.

0
  1. #1
    Hi all,

    Trying to achieve this effect:

    [​IMG]

    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
     
    zinghana, Feb 22, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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):
     
    Last edited: Feb 24, 2011
    Cash Nebula, Feb 24, 2011 IP
    zinghana likes this.