Re: [Ovillo] Problemas con las propiedades margin y padding en div
Hola, aunque parece que has corregido tus problemas, comentarte que muchas
veces la separación entre bloques es debido a que el margen de un elemento
interno (por ejemplo, un párrafo dentro de un div) tiene un margen que
SOBRESALE del elemento contenedor (en el ejemplo que he puest, el margen del
párrafo sobresaldría del elemento div que lo contiene).
Una solución consiste en asignar un padding (de 1px vale) al elemento
contenedor. En el ejemplo, si se asigna un padding al div, el margen del
párrafo no rebasaría el borde del div contenedor. Es un problema muy común
pero poco conocido entre los diseñadores.
Saludos.
2008/12/2 Silvana Peralta [EMAIL PROTECTED]
Hola gente,
tengo algunos problemas con estas propiedades al anidadar divs para
darle la estructura a mi sitio. Mi idea es tener un contenedor principal
(container), que tiene un encabezado (header), el menú (nav), el contenido
del sitio (contents) y el pie (footer). Mi problema surge, que cuando le
asigno algún color de fondo o una imágen al encabezado o al cuerpo del
sitio, noto que me queda una línea blanca entre divs (por ejemplo entre el
header y el content, y el content y el footer).
Estuve buscando en internet, viendo el modelo de cajas, pero
evidentemente hay algo que estoy pasando por alto o algo que entendí mal.
Probé con el paddin, el magin y me sigue pasando lo mismo, no consigo que
los divs se unan.
Si alguno me puede dar alguna pista de lo que estoy haciendo mal lo
agradecería mucho. Igualmente pego abajo el codigo de mi css y mi html. Si
no es muy claro lo que quiero decir podría ver la posibilidad de subir una
impresión de pantalla donde se note correctamente mi proble.
Saludos y muchas gracias.
Silvana.
Acá va el código.
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/bgmain.jpg);
background-color: #828282;
}
#container {
background-color: #ff;
width: 786px;
margin: 0px auto 0px auto;
padding: 0px;
}
#header {
background: url(images/header.jpg) no-repeat;
margin: 0px;
height: 285px;
}
#nav {
background: url(images/bgnav.jpg) no-repeat;
height: 40px;
padding: 20px 25px 8px 25px;
}
#nav ul {
list-style-type: none;
}
#nav li {
display: inline;
}
#nav .active a:visited,active {
text-decoration: none;
display: block;
}
#contents {
background: url(images/bgbody.jpg) repeat-y;
margin: 0px;
}
#maincontent {
text-align: justify;
margin: 0px 70px 0px 30px;
width: 750px;
/*padding: 0px 0px 30px 30px;*/
padding-right: 60px;
}
#footer {
background: url(images/bgfooter.jpg) no-repeat;
padding-top: 10px;
height: 43px;
}
#footer p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
left: 100px;
}
HTML:
?xml version=1.0 encoding=UTF-8 ?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8
/
titleTitulo/title
link href=style.css rel=stylesheet type=text/css /
/head
body
div id=container
div id=header
/div
!-- Fin header --
div id=nav
ul
li class=#a href=index.htmlInicio/a/li
lia href=#Link_1/a/li
lia href=#Link_2/a/li
lia href=#Link_3/a/li
lia href=#Link_4/a/li
lia href=#Link_5/a/li
/ul
/div
!-- Fin topmenu --
div id=contents
div id=maincontent
h1Header 1/h1
h2Header 2/h2
h6Header 6 - Descripción/h6
p
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec placerat neque vel tortor. Duis urna. Cras
orci eros, rutrum porttitor, viverra sit amet,
gravida sit amet, nisl. Fusce laoreet elementum eros. Sed
mattis volutpat magna. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos
himenaeos. Nulla hendrerit orci ornare ipsum. Proin
semper sapien non libero. Sed auctor, est eget
volutpat sodales, nulla eros auctor tortor, et
pellentesque eros diam in odio. Etiam euismod dui eu augue.
Integer at lacus. Duis eleifend placerat tellus.
Cras velit. Suspendisse ut arcu.
/p
p
Vivamus in libero. Donec elementum. Vestibulum
iaculis interdum erat. Fusce vestibulum blandit nulla.
Nullam fringilla lacus eu sem. Sed
[Ovillo] Problemas con las propiedades margin y padding en div
Hola gente,
tengo algunos problemas con estas propiedades al anidadar divs para
darle la estructura a mi sitio. Mi idea es tener un contenedor principal
(container), que tiene un encabezado (header), el menú (nav), el contenido
del sitio (contents) y el pie (footer). Mi problema surge, que cuando le
asigno algún color de fondo o una imágen al encabezado o al cuerpo del
sitio, noto que me queda una línea blanca entre divs (por ejemplo entre el
header y el content, y el content y el footer).
Estuve buscando en internet, viendo el modelo de cajas, pero
evidentemente hay algo que estoy pasando por alto o algo que entendí mal.
Probé con el paddin, el magin y me sigue pasando lo mismo, no consigo que
los divs se unan.
Si alguno me puede dar alguna pista de lo que estoy haciendo mal lo
agradecería mucho. Igualmente pego abajo el codigo de mi css y mi html. Si
no es muy claro lo que quiero decir podría ver la posibilidad de subir una
impresión de pantalla donde se note correctamente mi proble.
Saludos y muchas gracias.
Silvana.
Acá va el código.
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/bgmain.jpg);
background-color: #828282;
}
#container {
background-color: #ff;
width: 786px;
margin: 0px auto 0px auto;
padding: 0px;
}
#header {
background: url(images/header.jpg) no-repeat;
margin: 0px;
height: 285px;
}
#nav {
background: url(images/bgnav.jpg) no-repeat;
height: 40px;
padding: 20px 25px 8px 25px;
}
#nav ul {
list-style-type: none;
}
#nav li {
display: inline;
}
#nav .active a:visited,active {
text-decoration: none;
display: block;
}
#contents {
background: url(images/bgbody.jpg) repeat-y;
margin: 0px;
}
#maincontent {
text-align: justify;
margin: 0px 70px 0px 30px;
width: 750px;
/*padding: 0px 0px 30px 30px;*/
padding-right: 60px;
}
#footer {
background: url(images/bgfooter.jpg) no-repeat;
padding-top: 10px;
height: 43px;
}
#footer p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
left: 100px;
}
HTML:
?xml version=1.0 encoding=UTF-8 ?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8
/
titleTitulo/title
link href=style.css rel=stylesheet type=text/css /
/head
body
div id=container
div id=header
/div
!-- Fin header --
div id=nav
ul
li class=#a href=index.htmlInicio/a/li
lia href=#Link_1/a/li
lia href=#Link_2/a/li
lia href=#Link_3/a/li
lia href=#Link_4/a/li
lia href=#Link_5/a/li
/ul
/div
!-- Fin topmenu --
div id=contents
div id=maincontent
h1Header 1/h1
h2Header 2/h2
h6Header 6 - Descripción/h6
p
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec placerat neque vel tortor. Duis urna. Cras
orci eros, rutrum porttitor, viverra sit amet,
gravida sit amet, nisl. Fusce laoreet elementum eros. Sed
mattis volutpat magna. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos
himenaeos. Nulla hendrerit orci ornare ipsum. Proin
semper sapien non libero. Sed auctor, est eget
volutpat sodales, nulla eros auctor tortor, et
pellentesque eros diam in odio. Etiam euismod dui eu augue.
Integer at lacus. Duis eleifend placerat tellus.
Cras velit. Suspendisse ut arcu.
/p
p
Vivamus in libero. Donec elementum. Vestibulum
iaculis interdum erat. Fusce vestibulum blandit nulla.
Nullam fringilla lacus eu sem. Sed non magna. Morbi
ut lorem. Maecenas sem magna, iaculis mollis, placerat
at, euismod ut, dolor. Phasellus fringilla mi. Nam
hendrerit. Maecenas adipiscing justo ut nibh. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque gravida posuere magna. Morbi interdum nulla id
mauris.
/p
p
Nam tellus. In elementum elementum nibh. Aenean
ante. Fusce viverra odio ac tortor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Duis magna elit, commodo sit amet,
lobortis nec, commodo in, magna.
Re: [Ovillo] Problemas con las propiedades margin y padding en div
Silvana
Si bien puede que tengas más errores, yo percato que falta definir el
ancho en la mayoría de tus divs.
En algunos IDs solo tienes definida la propiedad height.
Tambien deberas asignar la propiedad width, donde especificas el ancho.
Puede ser fijo (con pixeles uso yo, quizas hay otras medidas) o con
porcentajes. También puedes usar como valor auto, donde el navegador
calculará el ancho necesario.
Te dejo un enlace con más información. Espero te sea útil.
http://www.librosweb.es/referencia/css/width.html
Saludos!
2008/12/2 Silvana Peralta [EMAIL PROTECTED]:
Hola gente,
tengo algunos problemas con estas propiedades al anidadar divs para
darle la estructura a mi sitio. Mi idea es tener un contenedor principal
(container), que tiene un encabezado (header), el menú (nav), el contenido
del sitio (contents) y el pie (footer). Mi problema surge, que cuando le
asigno algún color de fondo o una imágen al encabezado o al cuerpo del
sitio, noto que me queda una línea blanca entre divs (por ejemplo entre el
header y el content, y el content y el footer).
Estuve buscando en internet, viendo el modelo de cajas, pero
evidentemente hay algo que estoy pasando por alto o algo que entendí mal.
Probé con el paddin, el magin y me sigue pasando lo mismo, no consigo que
los divs se unan.
Si alguno me puede dar alguna pista de lo que estoy haciendo mal lo
agradecería mucho. Igualmente pego abajo el codigo de mi css y mi html. Si
no es muy claro lo que quiero decir podría ver la posibilidad de subir una
impresión de pantalla donde se note correctamente mi proble.
Saludos y muchas gracias.
Silvana.
Acá va el código.
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/bgmain.jpg);
background-color: #828282;
}
#container {
background-color: #ff;
width: 786px;
margin: 0px auto 0px auto;
padding: 0px;
}
#header {
background: url(images/header.jpg) no-repeat;
margin: 0px;
height: 285px;
}
#nav {
background: url(images/bgnav.jpg) no-repeat;
height: 40px;
padding: 20px 25px 8px 25px;
}
#nav ul {
list-style-type: none;
}
#nav li {
display: inline;
}
#nav .active a:visited,active {
text-decoration: none;
display: block;
}
#contents {
background: url(images/bgbody.jpg) repeat-y;
margin: 0px;
}
#maincontent {
text-align: justify;
margin: 0px 70px 0px 30px;
width: 750px;
/*padding: 0px 0px 30px 30px;*/
padding-right: 60px;
}
#footer {
background: url(images/bgfooter.jpg) no-repeat;
padding-top: 10px;
height: 43px;
}
#footer p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
left: 100px;
}
HTML:
?xml version=1.0 encoding=UTF-8 ?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8
/
titleTitulo/title
link href=style.css rel=stylesheet type=text/css /
/head
body
div id=container
div id=header
/div
!-- Fin header --
div id=nav
ul
li class=#a href=index.htmlInicio/a/li
lia href=#Link_1/a/li
lia href=#Link_2/a/li
lia href=#Link_3/a/li
lia href=#Link_4/a/li
lia href=#Link_5/a/li
/ul
/div
!-- Fin topmenu --
div id=contents
div id=maincontent
h1Header 1/h1
h2Header 2/h2
h6Header 6 - Descripción/h6
p
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec placerat neque vel tortor. Duis urna. Cras
orci eros, rutrum porttitor, viverra sit amet,
gravida sit amet, nisl. Fusce laoreet elementum eros. Sed
mattis volutpat magna. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos
himenaeos. Nulla hendrerit orci ornare ipsum. Proin
semper sapien non libero. Sed auctor, est eget
volutpat sodales, nulla eros auctor tortor, et
pellentesque eros diam in odio. Etiam euismod dui eu augue.
Integer at lacus. Duis eleifend placerat tellus.
Cras velit. Suspendisse ut arcu.
/p
p
Vivamus in libero. Donec elementum. Vestibulum
iaculis interdum erat. Fusce vestibulum blandit nulla.
Nullam fringilla lacus eu sem. Sed non magna. Morbi
ut lorem. Maecenas sem magna, iaculis mollis, placerat
Re: [Ovillo] Problemas con las propiedades margin y padding en div
Hola, mil gracias Ignacio. Le especifiqué el alto y el ancho y se visualiza como corresponde (igual no lo quiero decir muy alto por las dudas, jejeje). Saludos. Silvana ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
