Foros del Web » Creando para Internet » CSS »

margen derecho texto css

Estas en el tema de margen derecho texto css en el foro de CSS en Foros del Web. hola buen dia estoy iniciandome en lo q es html y css y tengo varios inconvenientes. principalmente uno es si miran el texto de la ...
  #1 (permalink)  
Antiguo 30/10/2012, 21:22
 
Fecha de Ingreso: octubre-2012
Mensajes: 202
Antigüedad: 9 años, 8 meses
Puntos: 0
margen derecho texto css

hola buen dia estoy iniciandome en lo q es html y css y tengo varios inconvenientes. principalmente uno es si miran el texto de la portada http://www.distribuidorazensa.com.ar/ se sale para afuera del contenedor. alguien me puede ayudar? y si alguien sabe como hacer para q el formulario de contacto imprima el texto de FUE ENVIADO CON EXITO dentro de la misma pagina. Gracias!!
  #2 (permalink)  
Antiguo 31/10/2012, 00:23
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 14 años, 4 meses
Puntos: 1146
Respuesta: margen derecho texto css

has que el div contenedor sea del mismo tamaño del la imagen de fondo, con eso evitaras que el texto se salga... y recuerda

width + padding = tamaño total

el div debes ponerle el tamaño de la imagen menos el padding que le pongas
  #3 (permalink)  
Antiguo 31/10/2012, 00:32
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 13 años, 5 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--
  #4 (permalink)  
Antiguo 31/10/2012, 01:37
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 13 años
Puntos: 641
Respuesta: margen derecho texto css

el tamaño total es en realidad, width + padding + margin + border

a menos que uses box-sizing
  #5 (permalink)  
Antiguo 31/10/2012, 10:11
 
Fecha de Ingreso: octubre-2012
Mensajes: 202
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: margen derecho texto css

gracias negro. lo q pasa es q siempre use flash y no se mucho de html. la habia maquetado igual a vos o muy parecido la estructura html y cuando empeze a acomodar con css se me corria todo. como necesitaba terminarla rapido opte porque photoshop me maquete todo por eso esta como esta. voy a tomar en cuenta lo q me pasaste para ver si la puedo armar.
me cuesta mucho el tema de los espacios vacios

te agradezo muchisimo y voy a tratar de seguir aprendiendo
  #6 (permalink)  
Antiguo 31/10/2012, 10:21
 
Fecha de Ingreso: octubre-2012
Mensajes: 202
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: margen derecho texto css

analizando tu código veo la posibilidad de el ahorro de imágenes innecesarias. veo q redondeaste los bordes y le pusiste la sombra tambien.. muy bueno C2am!..seguire aprendiendo!!!
  #7 (permalink)  
Antiguo 31/10/2012, 13:10
 
Fecha de Ingreso: octubre-2012
Mensajes: 202
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: margen derecho texto css

gracias a vos tambien Ag666!!

Etiquetas: derecho, html, margen
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:34.