Ver Mensaje Individual
  #3 (permalink)  
Antiguo 31/10/2012, 00:32
Avatar de C2am
C2am
 
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 3 meses
Puntos: 306
Respuesta: margen derecho texto css

Tu maquetación es bastante pobre.

Seguramente está hecha con algún programa visual tipo dreamweaver.

Te dejo un ejemplo rápido de como podrías mejorarla.
http://jsfiddle.net/c2am/g56Ls/64/embedded/result/


Código HTML:
Ver original
  1. <div id="contenedor">
  2.  
  3. <div id="cabecera">
  4.     <div id="logo">Logo</div>
  5.     <div id="menu" >
  6.         <ul>
  7.             <li><a href="#">Enlace</a></li>
  8.                 <li><a href="#">Enlace</a></li>
  9.                 <li><a href="#">Enlace</a></li>
  10.                 <li><a href="#">Enlace</a></li>
  11.                 <li><a href="#">Enlace</a></li>
  12.         </ul>            
  13.     </div>
  14.     <div id="telefono">Venta Telefono 1234567 </div>
  15. </div>
  16.  
  17. <div id="contenido">
  18. <div id="lateral">
  19.     <div id="reflejologo"> reflejo logo</div>
  20.     <div id="contenidoverde">
  21.     contenido verde</div>
  22.   </div>
  23. <div id="principal-rojo">Inicio
  24.  
  25. Electrodomésticos? Muebles? Colchones? Cámaras de seguridad? Tenemos todo!
  26.  
  27. Visita nuestro Facebook, hacete amigo y comenza a disfrutar de nuestro amplio catálogo de productos con sus características, medidas, peso.
  28.  
  29. Nuestros operadores se encuentran trabajando constantemente para poder tener ilustraciones de todos los artículos que comercializamos y sus respectivas descripciones actualizadas para tu mejor compra. Ingresa a nuestro Facebook y comenza a disfrutar de todos los beneficios de ser nuestro cliente!</div>
  30.  
  31. </div>
  32. <div id="pie">
  33. Contenido pie.
  34. </div>
  35.  
  36. </div>


fijate que no se usan div vacíos para separar las cajas, todo se acomoda con el CSS

Código CSS:
Ver original
  1. *{margin:0; padding:0;}
  2.  
  3. /*Estructura ppal */
  4. #contenedor{
  5. margin:0 auto;
  6. width:800px;
  7. }
  8.  
  9. #cabecera{
  10. height:110px;
  11.     overflow:hidden;
  12. }
  13. #contenido{
  14. background:#dfdfdf;
  15.     height:372px;
  16. }
  17. #pie{
  18. background:#d8f5ee;}
  19. /*fin estructura ppal */
  20.  
  21.  
  22. /*dentro de cabecera */
  23. #logo, #menu{
  24.     border:1px solid #000;
  25.     float:left;
  26. }
  27. #logo{
  28.     height:110px;
  29.     width:129px;
  30. }
  31. #menu{
  32.     height:110px;
  33.     width:438px;
  34. }
  35.  
  36. #menu ul{
  37.     list-style-type: none;
  38.     height:33px;
  39.     margin: 65px auto 0;
  40.     border:1px solid #000;
  41. }
  42. #menu ul li{
  43. float:left;
  44.     line-height:45px;
  45.     width:20%;
  46.     text-align:center;
  47.         }
  48.  
  49. #telefono{
  50. float:right;
  51. height:110px;
  52. width:201px;}
  53.  
  54.  
  55.  
  56. /* dentro de contenido */
  57. #lateral{
  58.     float:left;
  59.     width:157px;
  60.     height:100%;
  61. }
  62. #lateral #contenidoverde{
  63. background: green;
  64. width: 157px;
  65. height: 214px;
  66.     margin: 115px 10px 0;
  67. padding-left: 15px;
  68. padding-top: 20px;
  69.      border-radius:20px;
  70.     border-radius:20px;
  71.     box-shadow:5px 5px 5px #999;
  72. }
  73.  
  74. #principal-rojo{
  75.     float:right;
  76. background: red;
  77. width: 550px;
  78. height: 372px;
  79. padding-left: 15px;
  80. padding-right: 50px;
  81. font-size: 14px;
  82.     border-radius:20px;
  83.     border-radius:20px;
  84.     box-shadow:5px 5px 5px #999;
  85. }
  86. &#8203;


El menú o navbar se hace con listas es decir con <ul><li></li></ul> y no con <div>.

Se puede mejorar, se puede usar html5, etc, pero creo es bastante simple para que puedas comprenderla.



Te dejo también un manual muy bueno:

www.librosweb.es

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--