- This topic is empty.
-
AuthorPosts
-
December 11, 2012 at 2:46 pm #41277rssatnamParticipant
I’m following one tutorial on webdesign tutsplus, Final Page: http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/demo_css_ribbon.html
I’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.jpg
http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/top_bg.png
**CodePen** = http://codepen.io/joe/full/xruKk
**jsFiddle** = http://jsfiddle.net/rssatnam/YekQe/embedded/result/
Code:
December 17, 2012 at 8:40 am #117778KetanMemberHi Satnam,
Below is the revised code use this one its work fine for me.
CSS :
html{
background:#77d5fb url(bottom_bg.jpg) bottom center no-repeat;
height:100%;
}
body{
background:#77d5fb url(bottom_bg.jpg) bottom center no-repeat;
height:100%;
width:100%;
margin:0 0;
}
#wrapper { width:100%; height:auto; margin:0px; padding:0px; float:left; background:transparent url(top_bg.png) top center no-repeat; }
#container{
width:900px;
margin:0 auto; height:auto; padding:0px;
}
#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;
}
December 17, 2012 at 8:46 am #117779KetanMember -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.