Tema: Width en % teniendo en cuenta los paddings
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 06/04/2012, 20:17
elfeme
 
Fecha de Ingreso: abril-2010
Ubicación: Argentina
Mensajes: 57
Antigüedad: 14 años, 1 mes
Puntos: 1
Respuesta: Width en % teniendo en cuenta los paddings
Bueno este es el código

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>Title</title>
  5.     <link rel="stylesheet" type="text/css" href="style.css"/>
  6.     <meta charset="utf-8"/>
  7. </head>
  8. <body>
  9.     <div id="wrapper">
  10.         <div id="logo"></div>
  11.         <div id="login">
  12.             <form action="" method="post">
  13.                 <input type="text" name="user" value="Usuario"/>
  14.                 <input type="password" name="pass" value="Password"/>
  15.                 <input type="submit" name="submit" value="Ingresar"/>
  16.             </form>
  17.         </div>
  18.     </div>
  19. </body>
  20. </html>

Código CSS: 
Ver original
  1. /* margin & padding reseting */
  2. * { 
  3.     margin: 0; 
  4.     padding:0;
  5. }
  6.  
  7. /* general */
  8. body {
  9.     background: transparent url('images/bg.gif');
  10. }
  11.  
  12. /* wrapper */
  13. #wrapper {
  14.     width: 760px;
  15.     min-height: 460px;
  16.     background: #DDDDDD;
  17.     filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#ffffff', endColorstr='#dddddd'); /* fucking ie */
  18.     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd)); /* web-kit browsers */
  19.     background: -moz-linear-gradient(#fff, #ddd); /* firefox 3.6+ */
  20.     border-bottom: 1px solid #cccccc;
  21.     border-left: 1px solid #eeeeee;
  22.     border-right: 1px solid #eeeeee;
  23.     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  24.     border-radius: 10px;
  25.     margin: 100px auto 0 auto;
  26.     padding: 20px;
  27. }
  28.  
  29. /* logo */
  30.  
  31. /* login */
  32. #login {
  33.     width: 100%;
  34.     height: 100px;
  35.     background: #fff;
  36.     border: 1px solid #ddd;
  37.     padding: 10px;
  38. }