Foros del Web » Creando para Internet » CSS »

Ajustar ancho y centrar DIV

Estas en el tema de Ajustar ancho y centrar DIV en el foro de CSS en Foros del Web. Hola gente, tengo un problema que me trae de cabeza desde hace unos días. Tengo un div con un contenido variable. Además, quiero que se ...
  #1 (permalink)  
Antiguo 03/06/2011, 20:00
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 4 meses
Puntos: 309
Ajustar ancho y centrar DIV

Hola gente, tengo un problema que me trae de cabeza desde hace unos días.
Tengo un div con un contenido variable. Además, quiero que se quede en el centro, y para que sea útil margin:auto no puede ocupar todo el width, así que necesito que el ancho del div se ajuste al contenido. Por lo que he encontrado esto se puede hacer de varias maneras:
Cita:
display:inline-block
- No se centra con margin:auto
float:left
- Flota a la izquierda, así que no se queda en el medio
position:absolute
- No afecta al flujo de la página, puedo dejarlo en el medio pero se superpone con otros contenidos
Espero vuestra ayuda, porque ya no sé dónde más acudir
Saludos y gracias :D
Edit: Me da gual IE y todos los demás, me vale con que funcione en Chrome.
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #2 (permalink)  
Antiguo 04/06/2011, 07:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 4 meses
Puntos: 538
Respuesta: Ajustar ancho y centrar DIV

¿Qué es lo que necesita centrar, el div contenedor o su contenido o ambos?
¿Qué elementos conforman ese contenido variable?
¿...?

Los códigos implicados (css+html generado) estoy seguro que ayudarían.

Última edición por kseso?; 04/06/2011 a las 07:36
  #3 (permalink)  
Antiguo 04/06/2011, 07:33
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 4 meses
Puntos: 1010
Respuesta: Ajustar ancho y centrar DIV

@_cronos2 tendrás que dar mas información

@kseso? perdona. cuando respondí aún no esta tu respuesta
  #4 (permalink)  
Antiguo 04/06/2011, 07:51
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 4 meses
Puntos: 309
Respuesta: Ajustar ancho y centrar DIV

Ups, pensaba que había posteado el código Es generado por PHP para validar un formulario, pero viene a ser así:
Cita:
<div id='errores'>
<p class="error">El campo nombre no ha sido rellenado correctamente</p>
<p class="error">El campo contraseña no ha sido rellenado correctamente</p>
<!--- ... -->
</div>
Y está a pelo dentro del body.
Entonces, lo que necesito es que se centre #errores.
De momento lo conseguí poniéndole display:inline-block, viendo el width que ocupaba, seteando el width y vuelvo a display:block, pero me parece una manera muy cutre.
Creo que no me queda mucha información por dar, pero pedid lo que necesitéis.
Gracias a los dos
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #5 (permalink)  
Antiguo 04/06/2011, 10:36
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 4 meses
Puntos: 538
Respuesta: Ajustar ancho y centrar DIV

Código CSS:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <title>Kseso? Jugando con css</title>
  6. <style type="text/css">
  7.  * {
  8.     margin: 0;
  9.     padding: 0;
  10.     border: 0;
  11. }
  12. html, body {
  13.   height: 100%;
  14.   width:100%;
  15.   font-size: 100%;
  16. }
  17. html {display: table;}
  18. body {display: table-row;}
  19. #caja{
  20.  display:table-cell;
  21.  border:1px solid #444;
  22.  height:300px;
  23.  width:100%;
  24.  vertical-align:middle;
  25. }
  26. #caja p {
  27.  text-align:center;
  28.  font-size: 2em;
  29.  }
  30. </style>
  31. </head>
  32. <body>
  33. <div id="caja">
  34.   <p>El campo nombre no ha sido rellenado correctamente</p>
  35.   <p>El campo contraseña no ha sido rellenado correctamente</p>
  36. </div>
  37. </body>
  38. </html>
  #6 (permalink)  
Antiguo 04/06/2011, 15:05
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 4 meses
Puntos: 309
Respuesta: Ajustar ancho y centrar DIV

Ok, muchas gracias. Más dudas, resulta que tengo una lista:
Cita:
<div id='info'>
<!-- ... ->
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</div>
Y tengo esto:
Código CSS:
Ver original
  1. #info ul {
  2.  padding:10px;
  3.  list-style:square inside none;
  4. }

Sin embargo, no me aparece el cuadrado. En la consola de Chrome, en Computed Style, me dice que el list-style-type es square, pero sigue sin aparecer
¿Qué puede estar causando esto?
Saludos y gracias de nuevo :D
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #7 (permalink)  
Antiguo 04/06/2011, 15:43
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 4 meses
Puntos: 1010
Respuesta: Ajustar ancho y centrar DIV

al usar el valor none le dices que no muestre ningún marcador en los elementos de la lista
  #8 (permalink)  
Antiguo 04/06/2011, 15:48
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 4 meses
Puntos: 309
Respuesta: Ajustar ancho y centrar DIV

Pero esque yo le estoy poniendo square, no none
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #9 (permalink)  
Antiguo 04/06/2011, 16:03
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 4 meses
Puntos: 1010
Respuesta: Ajustar ancho y centrar DIV

que bien leí!! prueba a no usar la propiedad shorthand

edito: probado y funciona en chrome con y sin shorthand

Última edición por IsaBelM; 04/06/2011 a las 16:09
  #10 (permalink)  
Antiguo 04/06/2011, 16:16
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 4 meses
Puntos: 309
Respuesta: Ajustar ancho y centrar DIV

Cita:
Iniciado por IsaBelM
que bien leí!! prueba a no usar la propiedad shorthand

edito: probado y funciona en chrome con y sin shorthand
Creo que ya había probado a usar sólo list-style-type, en un desesperado intento de que se vieran los cuadrados
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #11 (permalink)  
Antiguo 04/06/2011, 16:36
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 4 meses
Puntos: 1010
Respuesta: Ajustar ancho y centrar DIV

pero, es en el único navegador que funciona??

por casolidad no tendrás también algo como esto??
Cita:
#info li {
display: inline;
}
  #12 (permalink)  
Antiguo 04/06/2011, 16:55
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 4 meses
Puntos: 309
Respuesta: Ajustar ancho y centrar DIV

No, pero gracias a eso acabo de descubrir el motivo. Resulta que tenía puesto:
Código CSS:
Ver original
  1. #info * {
  2.  display:block;
  3. }
Y mirando un poco más, resulta que el list-style-type que pone el user agent es list-item, así que añadiéndole :not(li) al selector todo solucionado.
Muchas gracias otra vez, creo que voy a tener que volver a recurrir a vosotros no muy tarde
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #13 (permalink)  
Antiguo 05/06/2011, 13:35
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 4 meses
Puntos: 1010
Respuesta: Ajustar ancho y centrar DIV

me alegra que lo hayas resuelto

una puntualización; el selector universal no tiene sentido ahí, es decir
Cita:
#info * {
#info {
en ambos casos se aplicará a todos los elemento #info del documento la misma propiedad (releyendo) por otro lado sólo puede haber uno ya que estás usando id

otra puntualización para aquellos que quieren maquetar para ie. ie no soporta el selector :not() CSS3

Última edición por IsaBelM; 05/06/2011 a las 15:10
  #14 (permalink)  
Antiguo 05/06/2011, 16:58
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 4 meses
Puntos: 309
Respuesta: Ajustar ancho y centrar DIV

Con #info * me refiero a todos los elementos dentro de #info, ¿en el segundo caso hace lo mismo?
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #15 (permalink)  
Antiguo 06/06/2011, 04:28
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 4 meses
Puntos: 1010
Respuesta: Ajustar ancho y centrar DIV

no sé si estoy equivocada, pero creo que este es el resultado que quieres
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#info {
display:block;
}

#info ul {
padding:10px;
list-style:square inside none;
}
</style>
</head>
<body>
<div id='info'>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</div>
</body>
</html>
  #16 (permalink)  
Antiguo 06/06/2011, 06:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 4 meses
Puntos: 538
Respuesta: Ajustar ancho y centrar DIV

#info * {...} aplica a los elementos contenidos en #info sin importar el grado de descendencia, eso sí, la especificidad es mejor que /#info p/ pero superior a /p/

#info {...} aplica al elemento con id /info/ y sólo aquellas propiedades que se hereden pasarán a sus descendientes

Etiquetas: ancho
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 11:26.