Definir listas para crear una secuencia de preguntas y respuestas

questioncss.jpg

En cssnewbie encuentro un tips muy simple para definir listas que podremos utilizar al crear una secuencia de preguntas y respuestas. Aunque no necesariamente deben ser solo utilizadas para este fin, ya que es muy simple adaptarlos a otro tipo de ideas, pero si será muy útil para comenzar con una base bien ordenada que nos lleve a conseguir otro tipo de resultados para un proyecto determinado.

Ver Demo - Descarga ejemplos - Info cssnewbie - Via css-tricks
Como dar estilo

CSS:
  1. #preguntas {
  2.     width: 450px;
  3.     margin: 15px auto;
  4. }
  5. dl {
  6.     margin: 20px;
  7.     border-left: 1px solid #999;
  8.     padding-left: 10px;
  9.     }
  10.     dt {
  11.         font-size: 2.0em;
  12.         margin-bottom: 10px;
  13.         }
  14.         dt span {
  15.             font-style: italic;
  16.             font-size: 1.3em;
  17.         }
  18.     dd {
  19.         font-size: 1.4em;
  20.         margin-left: 20px;
  21.         margin-bottom: 10px;
  22.     }

Estructura

HTML:
  1. <div id="preguntas">
  2.        
  3.        
  4.         <dl>
  5.             <dt><span>Pregunta 2:</span>Por que las personas aprietan el control remoto con mas fuerza, cuando se esta quedando sin pilas? </dt>
  6.             <dd>Esta es unan pregunta un poco comica, pero admitan que todos terminamos haceindo lo mismo.</dd>
  7.         </dl>
  8.        
  9.        
  10.     </div>

  1. User Gravatar

    Eduardo Cruz said,

    Wrote on April 28, 2008 @ 16:36

    Qué tal fuiste uno de mis seleccionados a recibir el Premio Brillante Weblog 2008 y, aunque esto suena a spam, te recomiendo que te des una vuelta por este enlace.

    Saludos.

  2. User Gravatar

    Asche said,

    Wrote on April 30, 2008 @ 11:33

    JAJAJAJ me cague de risa con esas preguntas.

  3. User Gravatar

    Definir Lista para Criar Sequencias de Perguntas e Respostas | RuanWeb said,

    Wrote on May 22, 2008 @ 0:14

    [...] Via: Xyberneticos [...]

Seguir comentarios por RSS · TrackBack URI

Nombre: (Necesario)

E-mail: (Necesario)

Website:

Comment: