Una pavada de alineacion.

Intersys · #1 (**permalink**) 07/06/2011, 13:30

Hola que tal webmasters.

es una duda simple pero no encuentro el error.

Ok en las diferentes secciones de mi web, por alguna razon que no encuentro la alineacion se ve diferente, paso a mostrarles:

Si notan sobre el cuadro amarillo en la parte superior se hay un espacio entre el comienzo de la web y el primer div (un cm aprox)

En al siguiente seccion:

Arriba del rectangulo ya no hay espacio!
Asi es como quiero que quede!.

Pero no hay ningun css que lo afecte, ni espacios ni nada. los dos comienzan justo al comienzo del body.

alguna ayuda?

Dejo los css x las dudas.

css:

Cita:

#contenido {
height:150px;
background-color:#FFFFFF;
width:802px;
padding-bottom: 0px;
background-image: url(Imagenes/ban2.jpg);
background-repeat: no-repeat;
}

css

Cita:

#contenido {
height:150px;
background-color:#FFFFFF;
width:802px;
background-image: url(Imagenes/ban2.jpg);
background-repeat: no-repeat;
}

Nose porque pero quiero quitar ese espacio.
Miren el cod no hay nada raro:

Del que tiene espacio:

Código:

<body>
<div id="contenido" style="margin-left:260px; width: 800px">

Del que no:

Código:

<body>
<div id="contenido" style="margin-left:260px; width: 800px">

rossijona · #2 (**permalink**) 07/06/2011, 13:55

al principio de todo el CSS pone:
*
{
margin: 0px
padding: 0px
}

esa propiedad se aplica a todos los elementos, luego cuando no quieres que algo tenga margin 0 o padding 0 solo se lo pisas poniendole el padding o el margin que quieras.

Luego nos cuentas.

emprear · #3 (**permalink**) 07/06/2011, 13:55

Intersys:

Salvo ese padding-bottom: 0px; no veo mucha diferencia.
Me da la sensación que el problema esta en otro elemento del html y no en la capa en si, o css..

Visto asi en las imágenes me da la sensación que el segundo, el que no tiene esos margenes, tiene un reset css para el body
margin: 0px;
padding: 0px;

Tampoco entiendo por que le das ancho en el css y sobreescribis el valor con style en el mismo tag (el cual prevalece sobre el css del <style></style>)
Habría que ver todo el código

saludos

Intersys · #4 (**permalink**) 07/06/2011, 14:06

Muchas gracias por la rapida respuesta, segui mirando bien y me di cuenta que en algunas paginas tenia un css con un reset de todos los valores a 0 para los diferentes navegadores.

Lo que hice fue aplicarlo a todos para que se vea igual. (me habia olvidado que lo tenia)

Dejo el cod del css por si alguno le sirve (muy util para lograr una correcta alineacion en todos los navegadores)

Código:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i{vertical-align: baseline border: 0; outline: 0;
                font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit;}
*               {margin: 0; padding: 0}
body            {line-height: 1; height:100%}
:focus          {outline: 0}
ol, ul          {list-style: none}
table           {border-collapse: collapse; border-spacing: 0;}
blockquote, q   {quotes: "" ""}
hr              {border: 0; color: #000; height:1px}
blockquote:before, blockquote:after, q:before, q:after {content: ""}

rossijona · #5 (**permalink**) 07/06/2011, 14:51

Cita:

Iniciado por Intersys

Muchas gracias por la rapida respuesta, segui mirando bien y me di cuenta que en algunas paginas tenia un css con un reset de todos los valores a 0 para los diferentes navegadores.

Lo que hice fue aplicarlo a todos para que se vea igual. (me habia olvidado que lo tenia)

Dejo el cod del css por si alguno le sirve (muy util para lograr una correcta alineacion en todos los navegadores)

Código:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i{vertical-align: baseline border: 0; outline: 0;
                font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit;}
*               {margin: 0; padding: 0}
body            {line-height: 1; height:100%}
:focus          {outline: 0}
ol, ul          {list-style: none}
table           {border-collapse: collapse; border-spacing: 0;}
blockquote, q   {quotes: "" ""}
hr              {border: 0; color: #000; height:1px}
blockquote:before, blockquote:after, q:before, q:after {content: ""}

con
"*"
simplificas todo. :)

tredio · #6 (**permalink**) 07/06/2011, 15:33

Cita:

Iniciado por rossijona

con
"*"
simplificas todo. :)

solo con eso no lograras lo que hay en ese codigo css, incluso hay hojas de reseteo mucho mas largas, y solo con "*" no lo podrias hacer.

jomaruro · #7 (**permalink**) 08/06/2011, 15:45

Hola:

Cita:

Iniciado por tredio

... hay hojas de reseteo mucho mas largas, y solo con "*" no lo podrias hacer.

Tampoco veo la necesidad de resetear muchas etiquetas que no usamos en nuestra página.

Saludos.