Div con display inline y width y height de 1px

derkenuke · #1 (**permalink**) 01/09/2008, 16:50

Hola, cómo estamos:

Tengo una duda, supongo que no muy complicada, acerca de crear un DIV de altura y anchura exactamente igual a 1px. En display: block no le veo problema ni en FF3 ni en IE6:

Código:

.pto {
	display: block;     /* se podría obviar al ser DIV */
	height:1px;
	width: 1px;
	line-height:1px;    /* se podría obviar al tener display: block pero no en display:inline */
	font-size: 1px;
	background: red;
	overflow: hidden;
}


<div class="pto">&nbsp;</div>

El problema viene cuando quiero que ese DIV tenga display: inline (o sea un SPAN, por ejemplo). En IE6 no hay problema, lo logra con ese código pero cambiando el display. Pero FF3 imprime el DIV con una altura (creo que 1em) y la anchura respectiva a un espacio, más o menos 4px.

¿Hay alguna forma de hacer un DIV con display:inline de 1x1 px?

Gracias por leerme

kseso? · #2 (**permalink**) 01/09/2008, 17:46

Hola Derdenuke.
¿max-width y max-height?
¿reseteando el css (border, padding y margin a 0).?

Vale que el espacio se venda caro, pero ¿ya tenemos necesidad de hacerlo pixel a pixel?

¿o sí?

derkenuke · #3 (**permalink**) 01/09/2008, 19:23

Hola kseso?, gracias por responder.

He probado max-width y max-height, he reseteado el border, padding, margin y no ha dado resultado. En IE6 perfecto, como antes, en firefox no hay manera.

Hablas de reseteo, acabo de probar el reseteo que propone anieto2k y tampoco, no cambia nada.

El código más largo que acabo de utilizar es el siguiente:

Código HTML:

<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
/* Reseteo de anieto, pero acortado */
div {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: normal;
     font-style: normal;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
}

/* todas las opciones que se me ocurren */
.pto {
	display: inline;
	height:1px;
	width: 1px;
	line-height:1px; 
	font-size: 1px;
	background: red;
	overflow: hidden;
	max-width: 1px;
	max-height: 1px;
	border: 0;
	margin: 0;
	padding: 0;
}
</style>
</head>

<body>

<div class="pto">&nbsp;</div>


</body>
</html>

He probado con DTD's loose de HTML, transitional de XHTML y strict de XHTML, y dan invariablemente el mismo resultado.

El objetivo de poder dibujar un pixel inline es para hacer dibujitos con pixeles, con un experimento javascript que estoy montando. Pero si no es inline no me sirve.

Ya no sé qué más probar, me he quedado sin recursos.
Saludos.

derkenuke · #4 (**permalink**) 01/09/2008, 19:38

Bueno, creo que lo acabo de solucionar. Resulta que según la especificación un width no puede ser aplicado a un elemento inline. Pero claro, IE hace lo que quiere y sí deja aplicar un ancho.

Lo leí aqui, que lo he encontrado de chiripa.

La solución pasa por declarar el elemento como inline-block en la propiedad display (algo que yo desconocía).

Bueno, dejo el código que a más de uno le servirá. Contiene un hack para IE6, aunque soy consciente de que no se deben utilizar y que estaría mejor en un archivo CSS aparte para incluirlo solamente en IE6. Nótese que no se puede dejar ningún espacio entre etiqueta DIV y etiqueta DIV o no se acoplarán correctamente, de ahí el código siguiente:

Código HTML:

<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">

.pto {
	display: -moz-inline-box;		/* mozilla firefox */
	display: inline-block;			/* resto de navegadores */
	_display: inline;				/* hack para IE6 */
	height: 1px;
	width: 1px;
	line-height:1px; 
	font-size: 1px;
}
</style>
</head>

<body>

<div class="pto" style="background-color: red;">&nbsp;</div
><div class="pto" style="background-color: blue;">&nbsp;</div
><div class="pto" style="background-color: olive;">&nbsp;</div>


</body>
</html>

Espero que os sirva.

Saludos!

kseso? · #5 (**permalink**) 02/09/2008, 12:26

Hola Derdenuke
Me alegro que encontrases la solución, y mejor el por qué no te iba.

Cita:

El objetivo de poder dibujar un pixel inline es para hacer dibujitos con pixeles, con un experimento javascript que estoy montando. Pero si no es inline no me sirve.

Pues ya nos mostrarás esos dibujos, pero si quieres inspiración mira estos ejemplos de dibujos con solo css. Incluso un PACMAN (o comecocos en España).
Su autor, Román Cortés, tiene también un programa en descarga para hacer un dibujo en blanco y negro con css+html a partir de una imagen:
http://www.youtube.com/v/WEvv37xEv5A
Y aunque no sea lo mismo, recuerdo la existencia de una página que convertía las imágenes a código html, (todos '1') variando el color de cada dígito.
Pues eso, a la espera de ver la sustitución de photoshop por tu CSS

Un saludo

derkenuke · #6 (**permalink**) 02/09/2008, 16:02

Qué bueno. Ya conocía a Román Cortés, pero no sabía que seguía haciendo tonterias CSS. El PACMAN es absolutamente espectacular, incluso es jugable.

También me suena ese hilo donde hablamos del img2css, interesante.

Lo mío era mucho más teórico. Como vi que PHP tenía patrones al utilizar rand(), quería hacer lo mismo con javascript para saber si Math.random() mostraba patrones en su distribución o no.

Las imágenes resultantes de las pruebas no han revelado ninguno, y aunque experimenté hacerlo con DIVs que representasen pixeles, al final lo he hecho de la misma manera, generando una imagen PHP con valores aleatorios mandados por javascript (es bastantes veces más rápido). El resultado de generar una matriz de 500x500 unos y ceros es este, para los curiosos:

Ya ves qué cosas más raras hago

Un saludo.

kseso? · #7 (**permalink**) 02/09/2008, 17:02

Sí, el pacman es irresistible :) (además no necesitas 'insert coins' ;)
Pero reconozco que es infinitamente más grande mi curiosidad por estos temas que mis conocimientos sobre ellos. ¡Qué suerte! todos los días descubro/aprendo algo nuevo.
Así que estos temas en los que estáis algunos no solo me sorprenden, sino que me superan. Pero gracias a que no os importa compartirlas (gracias), con algo me voy quedando.
Un saludo

P.D.:
Muy original tu saludo ;)

derkenuke · #8 (**permalink**) 02/09/2008, 17:17

Jejej, una imagen de un muy viejo post!

De una vez que Imageshack no estaba disponible y tenía que tirar de cualquier otra cosa...

En fin, si alguien ha sido capaz de dibujar un punto de 1px por 1px en un elemento inline, será bienvenida su aportación.