Es posible que no haya entendido correctamente lo que Tere Codina pedia en
su e-mail porque; yo entendí que se trataba mas bien de un formulario y no
de como mostrar los resultados del mismo.
Si el problema de Tere es: cómo alinear el label con el imput. En este caso
basta con usar correctamente los elementos propios del lenguaje HTML y, una
vez resuelto eso, hacer uso de los estilos (CSS), para lograr un aspecto más
atractivo.
Aqui un caso de un formulario compuesto de la siguiente manera:
Un elemento <fieldset> con el <legend> que dice: información personal. Dos
campos para completar: Nombre y apellido con sus respectivos <labels>; y por
último el botón para enviar el formulario.
- código HTML
<form>
<div class="formularioUno">
<fieldset>
<legend>Información personal</legend>
<p>
<label for="nombre"><strong title="Obligatorio"
class="requerido">*</strong>Nombre o Razón Social</label>
<input type="text" name="nombre" id="nombre" accesskey="1" />
</p>
<p>
<label for="apellido"><strong title="Obligatorio"
class="requerido">*</strong>Apellidos</label>
<input type="text" name="apellido" id="apellido" accesskey="2" />
</p>
<p>
<input name="" type="submit" value="Submit" />
</p>
</fieldset>
</div>
</form>
El label se acomoda (por defecto), del lado izquierdo del campo de texto
para completar (input). Por lo tanto lo que podrias hacer para organizar los
labels en una columna (estos estarian del lado izquierdo), y los campos para
completar en otra (derecha); es armar unos estilos como estos que hice de
ejemplo.
-- comienzo del código CSS
.formularioUno {
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.formularioUno input {
font-size:100%
}
.formularioUno p {
margin:0;
padding:.5em 0
}
.formularioUno label {
width:17em;
float:left
}
.formularioUno legend {
font-weight:bold;
font-size:110%
}
.formularioUno .requerido {
color:#FF0033;
font-weight:bold
}
Espero que haya sido esto lo que buscabas
Saludos
On 9/8/07, Tere Codina <[EMAIL PROTECTED]> wrote:
>
> Hola:
>
> No hace muchos días he descubierto esta lista y parece muy pero que muy
> interesante.
>
> Acabo de aterrizar en este mundo del HTML y estoy intentando aprender a
> hacer hojas de estilo.
>
> He leído que en las pautas de accesibilidad del W3C se recomienda dejar el
>
> uso de tablas si no es imprescindible para la información que se quiere
> mostrar en pantalla.
>
> Yo uso un lector de pantalla que se llama JAWS porque soy ciega total, y
> JAWS es una herramienta no soñada hace años, pero en fin, digamos que hace
>
> lo que puede y tiene sus limitaciones. Por eso pido aquí un consejo de CSS
> desde el punto de vista visual, porque no siempre puedo conseguir
> enterarme
> bien de cómo se muestra la info en pantalla.
>
> Lo que quiero preguntar es lo siguiente:
>
> Si quiero en mi página que haya un cuestionario, en el que se piden datos
> tales como nombre, apellido, e-mail, deportes que uno practica y aficiones
> que uno tiene, etc., etc. La idea es que a mano izquierda se muestren los
> títulos de lo que se pide, nombre, etc., y a la derecha que el usuario vea
> puesto su nombre, Juan, y debajo de Juan cada dato que se le va pidiendo
> en
> la izquierda, alineado y comprensible.
>
> ¿Cómo hacer esto sin tablas? ¿o para esto sí es aconsejable el uso de
> tablas?
>
> He leído un manual básico de CSS, pero aún así no sabría en el ejemplo que
> he puesto, cómo controlar el área derecha de la pantalla,o sea, donde se
> muestran los datos del usuario.
>
> Cualquier lista de correo, o material que me pueda ayudar al respecto y
> que
> me podáis sugerir sería muy bienvenido, aparte, claro, de cualquier
> opinión
> en lo que necesito saber.
>
>
>
> Perdonad la extensión del mensaje.
>
> Saludos
>
>
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
