Bueno, bueno, bueno...
Me la paso criticando a a los que postean sin leer el tema, y resulta que nosotros estamos haciendo lo mismo.
Ya entendí de donde viene lo de
Cita: ¿Una tabla o una lista para un menú (grupo de enlaces)?
Lo que pasa es que no le di importancia, porque a pesar del silencio ante mi pregunta, tuve por descontado que el uso de anclas no fue para 'saltar' a ningún lado sino porque la etiqueta
anchor (
<a>) es una de las pocas
in line que acepta
width. Está ahí para simular un encolumnado; como en una tabla. Por cuestiones de
doctype o de versión de navegador, ya probé que ahora tampoco los enlaces permiten un cambio de ancho, pero igual estoy seguro de que no es una lista de links, y semanticamente no deberían ser más que
span; aunque el "truco" para darles ancho es un poco engorroso : usa los
span anidados con una imagen espaciadora o un margen superpuesto y la posición ...
Bah. ¿qué voy a explicar?. El que lo conoce no lo necesita; y al que no, le va a servir más un ejemplo
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<html>
<head>
<style type="text/css">
body {font:100% sans-serif; }
p {float:left; width:12em; font-size:1.4em; background-color:red;
margin:0; }
#formulario {background-color:silver; height:auto; font:1em
sans-serif; }
#formulario input, textarea {font:0.8em sans-serif; width:6em;
border:0; background-color:transparent; }
</style>
</head>
<body>
<h2><tt>span</tt> con ancho fijo sin usar tablas.</h2>
<div id="formulario">
<p>
<span style="background: yellow; font-size:1em;">
Nombre:</span>
<span style="background: lime; position: absolute;
left:6.68em; "><input></span>
</span><br>
<span style="background: yellow; position: relative; font-size:1em;">
<img src="http://img72.imageshack.us/img72/2408/semitrans017oh.png"
style="height:1px; width: 6.4em; margin:0; " alt="Relleno"><span
style="position: absolute; left:0">Apellido:</span><input
style="background:lime; ">
</span><br>
<span style="background: yellow; position: relative;
font-size:1em;"><img
src="http://img72.imageshack.us/img72/2408/semitrans017oh.png"
style="height:1px; width: 6.4em; visibility:hidden; " alt="Relleno"><span style="position: absolute;
left:0">Cargo:</span><input style="background:lime; ">
</span><br>
<span style="background: yellow; position: relative;
font-size:1em;"><img src="data:image/bmp;base64,
Qk1CAAAAAAAAAD4AAAAoAAAAAQAAAAEAAAABAAEAAAAAAAQAAABhDwAAYQ
8AAAAAAAAAAAAAAAAAAP///wAAAAAA" alt=""
style="height:1px; width: 6.4em; "><span
style="position: absolute; left:0">E-Mail:</span><input
style="background:lime; ">
</span><br>
<input value="Teléfono:" style="background: yellow; font-size:1em;
width:6.4em; " readonly="readonly"><input
style="background:lime; "><br>
<span style="background: yellow; font-size:1em; white-space:pre;
">Consulta: </span><input style="background:lime; "></span><br>
</p>
<b>"Detail" de relleno.<br>
<br>
A partir de acá hay un párrafo largo, porque la idea es que en algún
momento la altura de este grupo de líneas supere a la del formulario
que está a la izquierda y se note cómo el texto envuelve a la capa
con los datos que está flotando justo antes con los campos para
llenar. Por supuesto que se puede cambiar el tamaño de la ventana
para ver el efecto en el mismo navegador sin necesidad de meter tanto
"relleno"; pero ya que el espacio es gratis aprovecho para escribir
un poco más.<br>
El ancho del campo "Nombre" está fijado sólo con CSS, dando una
posición absoluta al <tt>input</tt> dentro de un <tt>span</tt> que
también contiene al encabezado. También podría usarse un margen.<br>
El campo "Apellido" tiene como relleno espaciador una imagen real
(<img src="http://img72.imageshack.us/img72/2408/semitrans017oh.png"
alt="Cuadro semitransparente.">) de <tt>6.4em</tt> de ancho por
<tt>1px</tt> de alto. Lo mejor es que sea transparente, aunque en el
ejemplo usé una semitransparente para que se pudiese ver.<br>
El campo "Cargo" tienen la misma imagen, pero muestra como se puede
usar hasta una *.jpg, si le damos <tt>visibility: hidden</tt>";
aunque si se quita el CSS la imagen se ve como una línea de más.<br>
El campo "E-Mail" usa un método para <u>Mozilla</u> que evita la
aparición del <tt>alt</tt> como texto si no encuentra la imagen en el
disco o el servidor, y es el de meter el código de una imagen en
el mismo código fuente de la página. Usando a <u>Firefox</u> en
<i>quirk mode</i> (o simplemente eliminando la línea
<tt>"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"</tt>)
las imágenes que no se cargan aparecen como un
elemento con el ancho y alto que tengan declarados, pero en verdad
hay que usar el <i>doctype</i>. En el ejemplo no oculte el relleno
para que se pueda apreciar mejor (es la línea negra).<br>
El campo "Teléfono" usa 2 <tt>input</tt>, uno para el encabezado —que
no es editable y se ve como texto— y el otro para ongresar los datos.
Como este elemento acepta valores de ancho, podemos usarlo para
"espaciar" hasta el elemento siguiente.<br>
El último campo "Consulta" también es puro CSS, y aprovecha el estilo
tipo <tt>pre</tt>(formated) para "rellenar" con espacios y/o
tabulaciones, lo que simula el encolumnado como si fuese una tabla.
El problema es que no hay mucho control sobre las medidas y puede
verse desajustado si, como en este caso, se lo combina con otros
métodos o con columnas de diferente cantidad de caracteres.</b>
</div>
</body>
</html>
Antiguamente se usaban imágenes con
src="0.0"; y por supuesto, en
IE sigue funcionando, el problema apareció cuando otros navegadores empezaron a reemplazar las que no encontraban con el texto del
alt sin ninguna diferenciación con el texto del documento.
Entonces hubo que empezar a poner una
"transparente.gif" o similar (asegurándose de que el navegador la encontrara).
Aunque después de mucho rezongar en éste y en otros foros, las últimas versiones de
Chrome y
Opera ya muestran un elemento con atributos que asemejan a la imagen para mostrar un texto alternativo.
Firefox todavía no, porsu... :-/ .
Hay, está claro, más formas de lograr el efecto. Una que no puse, porque no creo que sea muy compatible, es la de aprovechar que hay sólo dos "columnas" y que la segunda seguro va a tener ancho fijo porque son cajas de formulario. Se puede meter cada "fila" en un párrafo, y justificarlo por palabra (
inter-word). Si cada "
header" es una cadena sin espacio, y éste aparece sólo para separarlo del campo editable, entonces el justificado va a mandar el texto a la izquierda y el campo a la derecha.
No lo probé, pero en algún navegador debería funcionar.
Lo de
inline-block que mencionaste también es práctico,
kseso?. En
IE anda desde el 6.x, en los demás no sé. Lo que no recomiendo es meter estilos de tabla con CSS, porque para eso ya está el HTML. Es un criterio elemental : algunos predican usar solamente una de las propiedades; pero hay que usar todas, o ninguna, porque de otra forma sería como poner una
td sin una
table. Y si lo que estamos haciendo no es una tabla, no deberíamos usar ni etiquetas ni propiedades de tabla. No se puede ser 'coherente' a medias con la semántica. Es un tema del que ya se habló, y dejo algún enlace al final.
Otra manera es usar
-moz-column. O quizá una fuente 'monospace' en un
pre, así podemos controlar exactamente la posición de cada columna.
Para eso también existen caracteres unicode de "ancho fijo", pero si del lado cliente no hay instalada una fuente que llegue del 65281 al 65373 no los va a poder leer.
Lo que quiero decir con todo esto es que hay chorosientos fil piriyones de maneras de hacer el efecto. Y hay que conocerlas todas, para después elegir la que mejor se adapte a nuestro diseño.
Y déjense de romper con las flotaciones. ¿Sí?. Centrar datos, tablas, textos,... en la vertical Dando el formato de tabla con div problema con la etiqueta <span> TAB en HTML ¿El diseño sin tablas tiene futuro?