I'm following one tutorial on webdesign tutsplus, Final Page:http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/demo_css_ribbon.htmlI've completed everything but one problem is coming in html styling, you can see I've included height:100% , but in original tutorial there was not that line, if I remove that line then it's collapsing, but in original tutorial it's perfect, why so?And also right now I've done height:100% then you can scroll at bottom and can see there's a margin left off at bottom, I want that image to stick at the very bottom of the page.Please download image also so that you can try this code, here are the links of images:http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/bottom_bg.jpghttp://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/top_bg.pngcode :\[code\]<html><head><style type="text/css">html{ background:#77d5fb url('bottom_bg.jpg') bottom center no-repeat; height:100%;}body{ background:transparent url('top_bg.png') top center no-repeat; height:100%; width:100%; margin:0 0;}#container{ width:900px; margin:0 auto;}#navBar{ height:62px; background-color:#e5592e; margin:3em 0; position:relative; -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.55); box-shadow:0px 0px 4px rgba(0,0,0,0.55); -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.55); -o-box-shadow:0px 0px 4px rgba(0,0,0,0.55); border-radius:3px; z-index:500;}#menu li{ list-style-type:none; display:block; float:left; margin:1em 0.8em;}#menu li a{ display:block; text-decoration:none; color:#F0F0F0; font-size:1.6em; margin:0; line-height:28px; text-shadow:0 2px 1px rgba(0, 0,0, 0.5);}#menu li a:hover{ /*transition:margin-top 0.3s; -webkit-transition:margin-top 0.3s;*/ margin-top:2px;}#lt-corner{ width:0px; height:0px; border:50px solid; border-color:#d9542b transparent transparent; position:relative; float:left; top:1px; left:-50px;}#lb-corner{ border:50px solid; border-color:transparent transparent #d9542b; width:0px; height:0px; position:relative; float:left; top:-40px; left:-150px;}#rt-corner{ width:0px; height:0px; border:50px solid; border-color:#d9542b transparent transparent; position:relative; float:right; top:-107px; right:-45px;}#rb-corner{ border:50px solid; border-color:transparent transparent #d9542b; width:0px; height:0px; position:relative; float:right; top:-149px; right:-145px;}</style></head><body> <div id="container"> <div id="lt-corner"></div> <div id="lb-corner"></div> <div id="navBar"> <ul id="menu"> <li><a href="http://stackoverflow.com/questions/13827664/#">✭ Home</a></li> <li><a href="http://stackoverflow.com/questions/13827664/#">✭ About</a></li> <li><a href="http://stackoverflow.com/questions/13827664/#">✭ Services</a></li> <li><a href="http://stackoverflow.com/questions/13827664/#">✭ Contact</a></li> </ul> </div> <div id="rt-corner"></div> <div id="rb-corner"></div> </div> </body></html>\[/code\]
Background-Position on HTML tag not working
- Thread starter qglenn
- Start date