Foros del Web » Creando para Internet » CSS »

Centrar div tag contenedor

Estas en el tema de Centrar div tag contenedor en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 29/10/2010, 12:43
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Pregunta Centrar div tag contenedor

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.
  #2 (permalink)  
Antiguo 29/10/2010, 13:00
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola jmb0286. Bienvenido al foro.

Muevo tu tema al foro de CSS desde Web general.

Saludos,
  #3 (permalink)  
Antiguo 29/10/2010, 14:23
 
Fecha de Ingreso: agosto-2010
Mensajes: 156
Antigüedad: 7 años, 3 meses
Puntos: 1
Respuesta: Centrar div tag contenedor

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 {
margin0 auto;
padding0 auto;

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

Saludos
  #4 (permalink)  
Antiguo 29/10/2010, 22:12
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Centrar div tag contenedor

Voy a probar, mil gracias. Se puede ver la página en http://acceso-directo.net23.net
  #5 (permalink)  
Antiguo 30/10/2010, 04:24
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Centrar div tag contenedor

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
  1. .contenedor {
  2.     color: #FFF;
  3.     background-color: #CCC;
  4.     clear: left;
  5.     float: left;
  6.     height: 915px;
  7.     width: 700px;
  8. }

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

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

Saludos.

  #6 (permalink)  
Antiguo 30/10/2010, 16:40
 
Fecha de Ingreso: octubre-2010
Mensajes: 31
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Centrar div tag contenedor

Cita:
Iniciado por jmb0286 Ver Mensaje
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)  
Antiguo 31/10/2010, 13:12
jmb0286
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Centrar div tag contenedor

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.

Última edición por jmb0286; 31/10/2010 a las 13:35

Etiquetas: contenedor, tag
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:59.