Centrar div tag contenedor

#1 (**permalink**) 29/10/2010, 11:43

A quien corresponda mi nombre es Matías soy novato en esto yestoy haciendo un proyecto personal - una página web - con el siguiente código, en dreamweaver.

<style type="text/css">
.contenedor {
color: #FFF;
background-color: #CCC;
clear: left;
float: left;
height: 915px;
width: 700px;
}

.herramientas {
color: #FFF;
background-color: #666;
clear: left;
float: left;
height: 20px;
width: 100%;
margin-top: 15px;
}
.cabecera {
color: #FFF;
background-color: #999;
clear: left;
float: left;
height: 150px;
width: 100%;
}
.menu {
background-color: #F60;
clear: both;
float: left;
height: 30px;
width: 100%;
}
.noticias {
background-color: #CCC;
float: left;
height: 400px;
width: 50%;
margin-top: 15px;
color: #000;
background-image: url(imagenes/contenidos_noticias.png);
}
.videos {
background-color: #CCC;
float: right;
height: 400px;
width: 50%;
margin-top: 15px;
color: #000;
background-image: url(imagenes/contenidos_videos.png);
}
.imagenes {
background-color: #999;
clear: both;
float: left;
width: 100%;
height: 150px;
color: #000;
}
.publicidad {
background-color: #9CF;
clear: both;
float: left;
width: 100%;
margin-top: 15px;
height: 100px;
color: #000;
}
.copyright {
background-color: #F90;
clear: both;
float: left;
height: 20px;
width: 100%;
color: #000;
}
body {
background-color: #333;
margin-top: 15px;

}
</style>
</head>

<body>

<div class="contenedor" id="contenedor">
<div class="herramientas" id="herramientas"></div>
<div class="cabecera" id="cabecera"></div>
<div class="menu" id="menu"> </div>
<div class="videos" id="videos"></div>
<div class="noticias" id="noticias"></div>
<div class="imagenes" id="imagenes"></div>
<div class="publicidad" id="publicidad"></div>
<div class="copyright" id="copyright"></div>
</div>

</body>
</html>

Lo que quiero saber es lo siguiente:

1. Como puedo centrar el div contenedor para que queda centrada la página
2. Y si ven algún problema en el código para que al subirla al servidor se pueda
ver bien en los nevegadores del usuario.

Desde ya muchas gracias.

JavierB · #2 (**permalink**) 29/10/2010, 12:00

Hola jmb0286. Bienvenido al foro.

Muevo tu tema al foro de CSS desde Web general.

Saludos,

rodomiro · #3 (**permalink**) 29/10/2010, 13:23

Prueba con este codigo al principio del css..

Código PHP:

  body {
    margin:0 auto;
    padding:0 auto;
    }

Cuentame como te va..

Si no te resulta, agregale a contenedor...

Código PHP:

  .contenedor {
margin: 0 auto;
padding: 0 auto;
}

Me llama la atencion q le pongas clases a los DIVS.... en vez del "." ocupa "#" y dime q pasa.

Saludos

#4 (**permalink**) 29/10/2010, 21:12

Voy a probar, mil gracias. Se puede ver la página en http://acceso-directo.net23.net

jomaruro · #5 (**permalink**) 30/10/2010, 03:24

Hola:

Aparte de lo que te ha indicado rodomiro que funciona perfectamente una vez seas capaz de contestarme a una pregunta.

Este es tu código:

Código CSS:

Ver original.contenedor {
    color: #FFF;
    background-color: #CCC;
    clear: left;
    float: left;
    height: 915px;
    width: 700px;
}

¿y como quieres centrarlo si lo flotas a la izquierda?

Otra cosa, no te hace falta para nada el clear:left;

Saludos.

Mariela_Fiad · #6 (**permalink**) 30/10/2010, 15:40

Cita:

Iniciado por jmb0286

A quien corresponda mi nombre es Matías soy novato en esto yestoy haciendo un proyecto personal - una página web - con el siguiente código, en dreamweaver.

<style type="text/css">
.contenedor {
color: #FFF;
background-color: #CCC;
clear: left;
float: left;
height: 915px;
width: 700px;
}

.herramientas {
color: #FFF;
background-color: #666;
clear: left;
float: left;
height: 20px;
width: 100%;
margin-top: 15px;
}
.cabecera {
color: #FFF;
background-color: #999;
clear: left;
float: left;
height: 150px;
width: 100%;
}
.menu {
background-color: #F60;
clear: both;
float: left;
height: 30px;
width: 100%;
}
.noticias {
background-color: #CCC;
float: left;
height: 400px;
width: 50%;
margin-top: 15px;
color: #000;
background-image: url(imagenes/contenidos_noticias.png);
}
.videos {
background-color: #CCC;
float: right;
height: 400px;
width: 50%;
margin-top: 15px;
color: #000;
background-image: url(imagenes/contenidos_videos.png);
}
.imagenes {
background-color: #999;
clear: both;
float: left;
width: 100%;
height: 150px;
color: #000;
}
.publicidad {
background-color: #9CF;
clear: both;
float: left;
width: 100%;
margin-top: 15px;
height: 100px;
color: #000;
}
.copyright {
background-color: #F90;
clear: both;
float: left;
height: 20px;
width: 100%;
color: #000;
}
body {
background-color: #333;
margin-top: 15px;

}
</style>
</head>

<body>

<div class="contenedor" id="contenedor">
<div class="herramientas" id="herramientas"></div>
<div class="cabecera" id="cabecera"></div>
<div class="menu" id="menu"> </div>
<div class="videos" id="videos"></div>
<div class="noticias" id="noticias"></div>
<div class="imagenes" id="imagenes"></div>
<div class="publicidad" id="publicidad"></div>
<div class="copyright" id="copyright"></div>
</div>

</body>
</html>

Lo que quiero saber es lo siguiente:

1. Como puedo centrar el div contenedor para que queda centrada la página
2. Y si ven algún problema en el código para que al subirla al servidor se pueda
ver bien en los nevegadores del usuario.

Desde ya muchas gracias.

Hola, te daría la bienvenida pero también soy nueva en el foro.

Yendo a lo tuyo supongo que quieres centrar horizontalmente tu pagina.

Suponiendo que ".contenedor" es el contenedor que tu quieres centrar , primero que nada debes eliminar ese float: left que lo que hace es que flote hacia la izquierda. Y el clear: left también debes eliminarlo, en conclusión debe quedarte algo así.

Código HTML:

.contenedor {
        margin: 0 auto;
	color: #FFF;
	background-color: #CCC;
        height: 915px;
	width: 700px;
}

Lo único que hice fue eliminar float y clear y agregar margenes. Ahora por lo que veo en tu selector usas un class y no un id en éste caso como es el contenedor de tu web debes usar id. En el xhtml donde diga

Código HTML:

class="contenedor"

deberías cambiarlo por un

Código HTML:

id="contenedor"

y el css cambiar el

Código HTML:

 .contenedor

por un

Código HTML:

#contenedor.

Y otra cosa veo que estableciste una altura y eso provocará que si tu contenido no tenga espacio suficiente se desborde. Te sugiero elimines

Código HTML:

height: 915px;

o bien lo sustituyas por un

Código HTML:

height:auto

o

Código HTML:

un heght:100%.

Aquí puedes encontrar más sobre centrado horizontal:
http://www.librosweb.es/css/capitulo12/centrar_una_pagina_horizontalmente.html

Y también aunque es poco usado el centrado vertical:
http://www.librosweb.es/css/capitulo12/centrar_una_pagina_verticalmente.html

Saludos

#7 (**permalink**) 31/10/2010, 12:12

Las opiniones de todos han sido de gran ayuda mil gracias. Cuando esté levantada con contenidos se los voy a hacer saber. Desde ya ya gracias.