Tema: perdida borde en el lado derecho siempre
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/10/2009, 15:50
Pax-Man
 
Fecha de Ingreso: noviembre-2003
Mensajes: 403
Antigüedad: 20 años, 5 meses
Puntos: 4
perdida borde en el lado derecho siempre
Saludos, estoy trabajando en un diseNo usando un 1kbcss (framework de maquetacion css) y estoy algo trabajo con unos divs que al momento de colocarles un borde pierdo el del lado derecho, sim importar el ancho de este... asumo que al tener una dimension fija mi div los pixeles de ancho del borde a la derecha se perderan... pero realmente no se ya como hacer para solucionar esto... realmente es bastante importante para mi desarrollo...

anexo los codigos para que los puedan revisar y me expliquen un poco donde esta el problema.. o como solucionarlo..

Código html: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6.     <title>The 1Kb Grid Demo – 12 columns, 80 pixels each, with 10 pixel gutter</title>
  7.     <link href="grid.css" type="text/css" rel="stylesheet" media="screen"/>
  8.     <link href="style.css" type="text/css" rel="stylesheet" media="screen"/>
  9. </head>
  10. <body>
  11.  
  12. <div class="row">
  13.     <div class="column grid_12"><p>12</p></div>
  14. </div>
  15.  
  16. <div class="row">
  17.     <div class="column grid_8"><p>8</p>
  18.         <div class="row">
  19.             <div class="column grid_4"><p>4</p></div>
  20.             <div class="column grid_4"><p>4</p></div>
  21.         </div>
  22.     </div>
  23.     <div class="column grid_4">
  24.         <div class="row">
  25.             <div class="column grid_4 boxhead">4</div>
  26.             <div class="column grid_4 boxbody">45</div>
  27.         </div>
  28.     </div>
  29. </div>
  30.  
  31. </body>
  32. </html>

Css de la la grilla provisto por 1kbcss
Código css: 
Ver original
  1. /* ================ */
  2. /* = The 1Kb Grid = */     /* 12 columns, 80 pixels each, with 10 pixel gutter */
  3. /* ================ */
  4.  
  5. .grid_1 { width:80px; }
  6. .grid_2 { width:170px; }
  7. .grid_3 { width:260px; }
  8. .grid_4 { width:350px; }
  9. .grid_5 { width:440px; }
  10. .grid_6 { width:530px; }
  11. .grid_7 { width:620px; }
  12. .grid_8 { width:710px; }
  13. .grid_9 { width:800px; }
  14. .grid_10 { width:890px; }
  15. .grid_11 { width:980px; }
  16. .grid_12 { width:1070px; }
  17.  
  18. .column {
  19.     margin: 0 5px;
  20.     overflow: hidden;
  21.     float: left;
  22.     display: inline;
  23. }
  24. .row {
  25.     width: 1080px;
  26.     margin: 0 auto;
  27.     overflow: hidden;
  28. }
  29. .row .row {
  30.     margin: 0 -5px;
  31.     width: auto;
  32.     display: inline-block;
  33. }


Css propio del diseNo...
Código css: 
Ver original
  1. body
  2. {
  3.     background: #f6f6f6;
  4.     font-family: "Lucida Grande",Verdana,sans-serif;
  5.     font-size: 10px;
  6.     margin: 0 0 0 0;
  7. }
  8. p
  9. {
  10.     border: 1px solid #000;
  11.     color: #000;
  12.     font: 60px/100px Helvetica;
  13.     margin: 0 0 10px 0;
  14.     text-align: center;
  15. }
  16. .header
  17. {
  18.     background: #000;
  19.     color: #fff;
  20.     line-height: 100px;
  21. }
  22. .nav
  23. {
  24.     background: #f6f6f6;
  25.     color: Gray;
  26.     margin: 5px 0 5px 10px;
  27. }
  28. .nav a,a:link,a:visited
  29. {
  30.     color: Gray;
  31.     font-weight: bold;
  32. }
  33. .boxhead
  34. {
  35.     color: #fff;
  36.     background: #0099ff;
  37.     text-align: center;
  38.     font-size:16px;
  39.     font-weight:bold;
  40.     height:24px;
  41. }
  42. .boxbody
  43. {
  44.     border-bottom:1px solid #dedede;
  45.     border-left:1px solid #dedede;
  46.     border-right:1px solid #dedede;    
  47.     background:#fff;
  48.     }