Foros del Web » Creando para Internet » CSS »

Div con display inline y width y height de 1px

Estas en el tema de Div con display inline y width y height de 1px en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/09/2008, 17:50
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Div con display inline y width y height de 1px

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
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #2 (permalink)  
Antiguo 01/09/2008, 18:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div con display inline y width y height de 1px

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í?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 01/09/2008 a las 18:50 Razón: Se me quedó pequeño este div
  #3 (permalink)  
Antiguo 01/09/2008, 20:23
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Respuesta: Div con display inline y width y height de 1px

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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #4 (permalink)  
Antiguo 01/09/2008, 20:38
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Respuesta: Div con display inline y width y height de 1px

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!
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #5 (permalink)  
Antiguo 02/09/2008, 13:26
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div con display inline y width y height de 1px

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 02/09/2008, 17:02
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Respuesta: Div con display inline y width y height de 1px

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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #7 (permalink)  
Antiguo 02/09/2008, 18:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div con display inline y width y height de 1px

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 ;)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 02/09/2008, 18:17
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Respuesta: Div con display inline y width y height de 1px

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.

__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
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:24.