Ajustar ancho y centrar DIV

_cronos2 · #1 (**permalink**) 03/06/2011, 20:00

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.

kseso? · #2 (**permalink**) 04/06/2011, 07:30

¿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.

IsaBelM · #3 (**permalink**) 04/06/2011, 07:33

@_cronos2 tendrás que dar mas información

@kseso? perdona. cuando respondí aún no esta tu respuesta

_cronos2 · #4 (**permalink**) 04/06/2011, 07:51

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

kseso? · #5 (**permalink**) 04/06/2011, 10:36

Código CSS:

Ver original<!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" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Kseso? Jugando con css</title>
<style type="text/css">
 * {
    margin: 0;
    padding: 0;
    border: 0;
}
html, body {
  height: 100%;
  width:100%;
  font-size: 100%;
}
html {display: table;}
body {display: table-row;}
#caja{
 display:table-cell;
 border:1px solid #444;
 height:300px;
 width:100%;
 vertical-align:middle;
}
#caja p { 
 text-align:center;
 font-size: 2em;
 }
</style>
</head>
<body>
<div id="caja">
  <p>El campo nombre no ha sido rellenado correctamente</p>
  <p>El campo contraseña no ha sido rellenado correctamente</p>
</div>
</body>
</html>

_cronos2 · #6 (**permalink**) 04/06/2011, 15:05

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#info ul {
 padding:10px;
 list-style:square inside none;
}

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

IsaBelM · #7 (**permalink**) 04/06/2011, 15:43

al usar el valor none le dices que no muestre ningún marcador en los elementos de la lista

_cronos2 · #8 (**permalink**) 04/06/2011, 15:48

Pero esque yo le estoy poniendo square, no none

IsaBelM · #9 (**permalink**) 04/06/2011, 16:03

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

edito: probado y funciona en chrome con y sin shorthand

_cronos2 · #10 (**permalink**) 04/06/2011, 16:16

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

IsaBelM · #11 (**permalink**) 04/06/2011, 16:36

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

por casolidad no tendrás también algo como esto??

Cita:

#info li {
display: inline;
}

_cronos2 · #12 (**permalink**) 04/06/2011, 16:55

No, pero gracias a eso acabo de descubrir el motivo. Resulta que tenía puesto:

Código CSS:

Ver original#info * {
 display:block;
}

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 (:

IsaBelM · #13 (**permalink**) 05/06/2011, 13:35

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

_cronos2 · #14 (**permalink**) 05/06/2011, 16:58

Con #info * me refiero a todos los elementos dentro de #info, ¿en el segundo caso hace lo mismo?
Saludos (:

IsaBelM · #15 (**permalink**) 06/06/2011, 04:28

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>

kseso? · #16 (**permalink**) 06/06/2011, 06:29

#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