Hi I want to ask some question about css. I want to make a website that use css to design it.. But I'm stuck with the css code that make me confused.. Here the web I want to be :
The content of the web only 1000px in the middle, and the one that I made is like this :
I don't know how to make the corner to be like that, like ribbon corner. And I want to make the rest of ribbon that longer into the end of website (it's still proportional if you zoom in or zoom out)The second question is when I try to open it at mozilla, it's will be a mess at the login box like this :
Here's the code :\[code\]<html> <head> <script src="http://stackoverflow.com/questions/15566342/js/jquery-1.9.1.min.js"></script> <script src="http://stackoverflow.com/questions/15566342/js/jquery-migrate-1.1.1.min.js"></script> <style> a{ text-decoration:none; } html{ height: 100%; overflow-y: scroll; } body { margin:0px; font-size:8pt; font-family: Verdana, Helvetica, Arial, Sans-Serif; background-color:#ffbeec; } .clearBoth{ clear:both; } #divHeader{ height:321px; } #menuHeader{ height:50px; background-color:#93113d; } #isiMenuHeader { margin:0px auto; width:1000px; height:100%; filter
rogid
XImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#93113d, endColorstr=#d41a59); background-image:-moz-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-webkit-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-o-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-ms-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#93113d), color-stop(50%,#d41a59),color-stop(100%,#93113d)); } #logoHeader{ height:221px; background-color:#000000; } #isiLogoHeader{ margin:0px auto; width:1000px; height:100%; background-color:#000; } #lineHeader{ height:13px; background-color:#986f39; } #isiLineHeader{ margin:0px auto; width:1000px; height:100%; filterrogidXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#986f39, endColorstr=#d3944d); background-image:-moz-linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%); background-image:linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%); background-image:-webkit-linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%); background-image:-o-linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%); background-image:-ms-linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%); background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#986f39), color-stop(50%,#d3944d),color-stop(100%,#986f39)); } #menu2Header{ height:37px; background-color:#93113d; } #isiMenu2Header{ margin:0px auto; width:1000px; height:100%; filterrogidXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#93113d, endColorstr=#d41a59); background-image:-moz-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-webkit-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-o-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-ms-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#93113d), color-stop(50%,#d41a59),color-stop(100%,#93113d)); } </style> </head> <body> <div id="divHeader"> <div id="menuHeader"> <div id="isiMenuHeader"> <div style="float:left"> dsfasfas </div> <div style="float:right;background-color:#f782af;height:52px;width:241px;margin-top:24px;"> dsfdsfds </div> </div> </div> <div class="clearBoth"></div> <div id="logoHeader" style="margin-top:-26px"> <div id="isiLogoHeader"> <div style="float:left;margin-left:24px;position:absolute;"> <img src="http://stackoverflow.com/questions/15566342/images/logo.png"> </div> <div style="float:right;color:#fff;margin-right:34px;margin-top:50px;"> <div> Member Login<br> <input type="text" style="width:204px"><br> <input type="text" style="width:156px"> </div> <div> What are you looking for?<br> <input type="text" style="width:156px"> </div> </div> </div> </div> <div class="clearBoth"></div> <div id="lineHeader"><div id="isiLineHeader"></div></div> <!--136--> <div id="menu2Header"> <div id="isiMenu2Header"> sdasdsas </div> </div> </div> <div class="clearBoth"></div> <div id="divBody"> <!--86--> <div style="margin:0px auto;width:1000px;height:100%;"> sfasfasdfas </div> </div> </body></html>\[/code\]Thank you very much.. Hope someone can help me.. Thank you... 
rogidXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#93113d, endColorstr=#d41a59); background-image:-moz-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-webkit-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-o-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-ms-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#93113d), color-stop(50%,#d41a59),color-stop(100%,#93113d)); } #logoHeader{ height:221px; background-color:#000000; } #isiLogoHeader{ margin:0px auto; width:1000px; height:100%; background-color:#000; } #lineHeader{ height:13px; background-color:#986f39; } #isiLineHeader{ margin:0px auto; width:1000px; height:100%; filterrogidXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#986f39, endColorstr=#d3944d); background-image:-moz-linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%); background-image:linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%); background-image:-webkit-linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%); background-image:-o-linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%); background-image:-ms-linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%); background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#986f39), color-stop(50%,#d3944d),color-stop(100%,#986f39)); } #menu2Header{ height:37px; background-color:#93113d; } #isiMenu2Header{ margin:0px auto; width:1000px; height:100%; filterrogidXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#93113d, endColorstr=#d41a59); background-image:-moz-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-webkit-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-o-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-ms-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%); background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#93113d), color-stop(50%,#d41a59),color-stop(100%,#93113d)); } </style> </head> <body> <div id="divHeader"> <div id="menuHeader"> <div id="isiMenuHeader"> <div style="float:left"> dsfasfas </div> <div style="float:right;background-color:#f782af;height:52px;width:241px;margin-top:24px;"> dsfdsfds </div> </div> </div> <div class="clearBoth"></div> <div id="logoHeader" style="margin-top:-26px"> <div id="isiLogoHeader"> <div style="float:left;margin-left:24px;position:absolute;"> <img src="http://stackoverflow.com/questions/15566342/images/logo.png"> </div> <div style="float:right;color:#fff;margin-right:34px;margin-top:50px;"> <div> Member Login<br> <input type="text" style="width:204px"><br> <input type="text" style="width:156px"> </div> <div> What are you looking for?<br> <input type="text" style="width:156px"> </div> </div> </div> </div> <div class="clearBoth"></div> <div id="lineHeader"><div id="isiLineHeader"></div></div> <!--136--> <div id="menu2Header"> <div id="isiMenu2Header"> sdasdsas </div> </div> </div> <div class="clearBoth"></div> <div id="divBody"> <!--86--> <div style="margin:0px auto;width:1000px;height:100%;"> sfasfasdfas </div> </div> </body></html>\[/code\]Thank you very much.. Hope someone can help me.. Thank you...