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: #ffffff;
>    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"
> />
>        <title>Titulo</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.html">Inicio</a></li>
>                    <li><a href="#">Link_1</a></li>
>                    <li><a href="#">Link_2</a></li>
>                    <li><a href="#">Link_3</a></li>
>                    <li><a href="#">Link_4</a></li>
>                    <li><a href="#">Link_5</a></li>
>                </ul>
>            </div>
>            <!-- Fin topmenu -->
>
>            <div id="contents">
>                <div id="maincontent">
>                    <h1>Header 1</h1>
>                    <h2>Header 2</h2>
>                    <h6>Header 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. Cras ultrices.
> Curabitur molestie sapien eget diam. In sit amet nibh. Sed
>                        fringilla fringilla magna. Cras suscipit ligula
> dictum urna. Praesent sit amet sem non lacus imperdiet
>                        placerat. Aliquam mi orci, viverra eu, molestie sit
> amet, dictum ac, turpis. Sed feugiat auctor tellus.
>                        Pellentesque habitant morbi tristique senectus et
> netus et malesuada fames ac turpis egestas. Morbi
>                        sollicitudin sapien eu neque. Suspendisse imperdiet
> euismod dui. Duis luctus nibh.
>                    </p>
>
>                </div>
>                <!-- Fin maincontent -->
>
>
>                <div class="clear"></div>
>
>            </div>
>            <!-- Fin contents -->
>
>            <div id="footer">
>                <p>
>                    nombre | dirección | código postal
>                </p>
>            </div>
>            <!-- Fin footer -->
>
>        </div>
>        <!-- Fin container -->
>    </body>
> </html>
> _______________________________________________
> 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
>



-- 
Ignacio Aguirre
http://www.soyelnacho.com
Independiente Producciones
8.5783569
_______________________________________________
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

Responder a