css - Theres no bottom padding in my web page -


i'm having trouble web page: there no bottom padding , makes website weird. have tried changing body, , html margin-bottom: 100px not seem work. seems happen when add outsourced navigation bars.

css

@charset "utf-8"; /* css document */ html, body { margin: 0; padding:0px;}         body { margin: 5px; background: #f2f2f2; }         ul.menu { margin: 50px auto 0 auto; }     .menu, .menu ul, .menu li, .menu {     margin: 0;     padding: 0;     border: none;     outline: none; }  /* menu */ .menu {      height: 40px;     width: 905px;      background: #4c4e5a;     background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);     background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);     background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);     background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);     background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);      border:#8fde62 medium solid;     -webkit-border-radius: 5px;     -moz-border-radius: 5px;     border-radius: 5px; }  .menu li {     position: relative;     list-style: none;     float:left;     display: block;     height: 40px; }  /* links */  .menu li {     display: block;     padding: 0 14px;     margin: 6px 0;     line-height: 28px;     text-decoration: none;      border-left: 1px solid #393942;     border-right: 1px solid #4f5058;      font-family: helvetica, arial, sans-serif;     font-weight: bold;     font-size: 13px;      color: #f3f3f3;     text-shadow: 1px 1px 1px rgba(0,0,0,.6);      -webkit-transition: color .2s ease-in-out;     -moz-transition: color .2s ease-in-out;     -o-transition: color .2s ease-in-out;     -ms-transition: color .2s ease-in-out;     transition: color .2s ease-in-out; }  .menu li:first-child { border-left: none; } .menu li:last-child a{ border-right: none; }  .menu li:hover > { color: #8fde62; }  /* sub menu */  .menu ul {     position: absolute;     top: 40px;     left: 0;      opacity: 0;      background: #1f2024;      -webkit-border-radius: 0 0 5px 5px;     -moz-border-radius: 0 0 5px 5px;     border-radius: 0 0 5px 5px;      -webkit-transition: opacity .25s ease .1s;     -moz-transition: opacity .25s ease .1s;     -o-transition: opacity .25s ease .1s;     -ms-transition: opacity .25s ease .1s;     transition: opacity .25s ease .1s; }  .menu li:hover > ul { opacity: 1; }  .menu ul li {     height: 0;     overflow: hidden;     padding: 0;      -webkit-transition: height .25s ease .1s;     -moz-transition: height .25s ease .1s;     -o-transition: height .25s ease .1s;     -ms-transition: height .25s ease .1s;     transition: height .25s ease .1s; }  .menu li:hover > ul li {     height: 36px;     overflow: visible;     padding: 0; }  .menu ul li {     width: 100px;     padding: 4px 0 4px 40px;     margin: 0;      border: none;     border-bottom: 1px solid #353539; }  .menu ul li:last-child { border: none; }  #wrapper{     width:900px;     height:auto;     margin: 50px auto 0 auto;      } #xboxcard{     width:300px;     height:500px;     background-color:#4c4e5a;     border:#8fde62 medium solid;     border-radius:5px;     } #rightcontent{     width:575px;     height:342px;     background-color:#4c4e5a;     border:#8fde62 medium solid;     border-radius:5px;     float:right;     padding: 10px 10px 10px 10px;     position:absolute;     top:150px;     left:495px;     text-align:center;     color:#fff;      }    #step1{     width:245px;     height:250px;     position:absolute;     top:550px;     left:180px;     text-align:center;     color:#fff;     padding: 10px 10px 10px 10px;     background-color:#4c4e5a;     border:#8fde62 medium solid;      } 

html

<body> <ul class="menu">      <li><a href="#">home</a></li>     <li><a href="#">contact</a></li>     <li><a href="#">claim</a></li>     <li><a href="#">proof</a></li>  </ul> <!-- end .menu -->  <div id="wrapper">      <img src="#" alt="#"  height="342" width="245" style="  background-color:#4c4e5a;     border:#8fde62 medium solid;     border-radius:5px;     padding:10px 10px 10px 10px;   " />         <div id="rightcontent">         <h1>this right content!</h1>         </div>             <div id="step1">             </div> </div> </body> </html> 

try add css...

#wrapper { margin-bottom:50px; } 

or many pixels want bottom margin have


Comments

Popular posts from this blog

.htaccess - First slash is removed after domain when entering a webpage in the browser -

Automatically create pages in phpfox -

c# - Farseer ContactListener is not working -