margen derecho texto css

[jmm87]

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!!

[ArturoGallegos]

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

[C2am]

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:

<div id="contenedor">
 
<div id="cabecera">
    <div id="logo">Logo</div>
    <div id="menu" >
        <ul>
            <li><a href="#">Enlace</a></li>
                <li><a href="#">Enlace</a></li>
                <li><a href="#">Enlace</a></li>
                <li><a href="#">Enlace</a></li>
                <li><a href="#">Enlace</a></li>
        </ul>            
    </div>
    <div id="telefono">Venta Telefono 1234567 </div>
</div>
 
<div id="contenido">
<div id="lateral">
    <div id="reflejologo"> reflejo logo</div>
    <div id="contenidoverde">
    contenido verde</div>
  </div>
<div id="principal-rojo">Inicio
 
Electrodomésticos? Muebles? Colchones? Cámaras de seguridad? Tenemos todo!
 
Visita nuestro Facebook, hacete amigo y comenza a disfrutar de nuestro amplio catálogo de productos con sus características, medidas, peso.
 
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>
 
</div>
<div id="pie">
Contenido pie.
</div>
 
</div>​
 

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

Código CSS:

*{margin:0; padding:0;}
 
/*Estructura ppal */
#contenedor{
margin:0 auto;
width:800px;
}
 
#cabecera{
height:110px;
    overflow:hidden;
}
#contenido{
background:#dfdfdf;
    height:372px;
}
#pie{
background:#d8f5ee;}
/*fin estructura ppal */
 
 
/*dentro de cabecera */
#logo, #menu{
    border:1px solid #000;
    float:left;
}
#logo{
    height:110px;
    width:129px;
}
#menu{
    height:110px;
    width:438px;
}
 
#menu ul{
    list-style-type: none;
    height:33px;
    margin: 65px auto 0;
    border:1px solid #000;
}
#menu ul li{
float:left;
    line-height:45px;
    width:20%;
    text-align:center;
        }
 
#telefono{
float:right;
height:110px;
width:201px;}
 
 
 
/* dentro de contenido */
#lateral{
    float:left;
    width:157px;
    height:100%;
}
#lateral #contenidoverde{
background: green;
width: 157px;
height: 214px;
    margin: 115px 10px 0;
padding-left: 15px;
padding-top: 20px;
     border-radius:20px;
    border-radius:20px;
    box-shadow:5px 5px 5px #999;
}
 
#principal-rojo{
    float:right;
background: red;
width: 550px;
height: 372px;
padding-left: 15px;
padding-right: 50px;
font-size: 14px;
    border-radius:20px;
    border-radius:20px;
    box-shadow:5px 5px 5px #999;
}
​
 

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

[memoadian]

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

a menos que uses box-sizing

[jmm87]

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

[jmm87]

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!!!

[jmm87]

gracias a vos tambien Ag666!!