16.12. Solución ejercicio 12 (Introducción a CSS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Ejercicio 12 - Formulario de alta</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/* Formatear el formulario a dos columnas */
body {
  font: 13px/1.6 Tahoma, sans-serif;
  background: #F5F5F5;
}

.izquierda {
  float: left;
  clear: left;
}

.derecha {
  float: right;
  clear: right;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#contenedor {
  background: #FFF;
  border: 1px solid silver;
  margin: 1em auto;
  padding: 1em;
  width: 768px;
}

span.requerido {
  font-size: 1.3em;
  font-weight: bold;
  color: #C00;
}

h2 {
  font: normal 2em arial, sans-serif;
  margin: 0;
}

ul li.botones {
  border-top: 2px solid #CCC;
  clear: both;
  float: none;
  padding: 1em 0;
  margin-top: 1em;
  text-align: right;
  width: 100%;
}

ul li.botones input {
  font-size: 1.3em;
}

ul li {
  margin: 0.5em 0;
  padding: 0.5em;
  width: 46%;
}

ul li label.titulo {
  font-weight: bold;
}

ul li div span {
  float: left;
  padding: 0.3em 0;
}

ul li div span.completo {
  width: 100%;
}

ul li div span.mitad {
  width: 50%;
}

ul li div span.tercio {
  width: 33%;
}

ul li div span.dostercios {
  width: 66%;
}

ul li div span label {
  display: block;
  font: normal 0.8em arial, sans-serif;
  color: #333;
}

ul li p.ayuda {
  display: none;
}

ul li input {
  padding: 0.2em;
}

input#apellido1, input#apellido2, input#direccion, input#email {
  width: 260px;
}

input#codigopostal {
  width: 80px;
}

select#provincia {
  width: 90px;
}

select#pais {
  width: 150px;
}

input#telefonofijo, input#telefonomovil {
  width: 135px;
}

/* Cambiar el color en el :hover y resaltar los campos en el :focus */
ul li:hover {
  background-color: #FF9;
}

ul li.botones:hover {
  background-color: transparent;
}

ul li input:focus {
  border: 2px solid #E6B700;
}

/* Formatear el formulario a una columna */
ul li.izquierda, ul li.derecha {
  float: none;
  width: auto;
}

ul li {
  overflow: hidden;
}

ul li label.titulo {
  float: left;
  width: 150px;
}

ul li div {
  margin-left: 160px;
}

/* Aspecto final del formulario con los mensajes de ayuda */
h2 {
  margin-bottom: 0.3em;
}

ul li {
  border-top: 1px solid #CCC;
  margin: 0;
  padding: 1em;
}

ul li.botones {
  margin: 0;
}

ul li label.titulo {
  text-align: right;
  width: 100px;
}

ul li div {
  margin-left: 110px;
  overflow: hidden;
}

ul li {
  position: relative;
}

ul li:hover p.ayuda {
  display: block;
  margin: 0.3em;
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
}
</style>
</head>

<body>
<div id="contenedor">

<h2>Formulario de alta</h2>

<form method="post" action="#">
<ul>
<li class="izquierda">
  <label class="titulo" for="nombre">Nombre y apellidos <span class="requerido">*</span></label>
  <div>
    <span class="completo">
      <input id="nombre" name="nombre" value="" />
      <label for="nombre">Nombre</label>
    </span>

    <span class="completo">
      <input id="apellido1" name="apellido1" value="" />
      <label for="apellido1">Primer apellido</label>
    </span>

    <span class="completo">
      <input id="apellido2" name="apellido2" value="" />
      <label for="apellido2">Segundo apellido</label>
    </span>
  </div>

  <p class="ayuda">No te olvides de escribir también tu segundo apellido</p>
</li>

<li class="derecha">
  <label class="titulo" for="direccion">Dirección <span class="requerido">*</span></label>

  <div>
    <span class="completo">
      <input id="direccion" name="direccion" value="" />
      <label for="direccion">Calle, número, piso, puerta</label>
    </span>

    <span class="tercio">
      <input id="codigopostal" name="codigopostal" value="" />
      <label for="codigopostal">Código postal</label>
    </span>

    <span class="dostercios">
      <input id="municipio" name="municipio" value="" />
      <label for="municipio">Municipio</label>
    </span>

    <span class="tercio">
      <select id="provincia" name="provincia">
        <option value=""></option>
        <option value="provincia1">Provincia 1</option>
        <option value="provincia2">Provincia 2</option>
        <option value="provincia3">Provincia 3</option>
      </select>
      <label for="provincia">Provincia</label>
    </span>

    <span class="dostercios">
      <select id="pais" name="pais">
        <option value=""></option>
        <option value="pais1">País 1</option>
        <option value="pais2">País 2</option>
        <option value="pais3">País 3</option>
      </select>
      <label for="pais">País</label>
    </span>
  </div>

  <p class="ayuda">El código postal es imprescindible para poder recibir los pedidos</p>
</li>

<li class="izquierda">
  <label class="titulo" for="email">Email</label>

  <div>
    <span class="completo">
      <input id="email" name="email" value="" />
    </span>
  </div>

  <p class="ayuda">Asegúrate de que sea válido</p>
</li>

<li class="derecha">
  <label class="titulo" for="telefonofijo">Teléfono <span class="requerido">*</span></label>

  <div>
    <span class="mitad">
      <input id="telefonofijo" name="telefonofijo" value="" />
      <label for="telefonofijo">Fijo</label>
    </span>

    <span class="mitad">
      <input id="telefonomovil" name="telefonomovil" value="" />
      <label for="telefonomovil">Móvil</label>
    </span>
  </div>

  <p class="ayuda">Sin prefijo de país y sin espacios en blanco</p>
</li>

<li class="botones">
  <input id="alta" type="submit" value="Darme de alta &rarr;" />
</li>

</ul>
</form>

</div>
</body>
</html>
Descargar solución completa