Tema: Div oculto que se despliega dentro de una lista¿?
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 23/08/2010, 11:14
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Div oculto que se despliega dentro de una lista¿?
Romperé mi propósito de no hacer códigos, pero como antes mencioné que alguno no había sido probado (y me refería a que por escueto era improbable que cubriese las necesidades planteadas):

Planteado desde la perspectiva de hacerlo lo más semántico posible y evitar el uso excesivo y abusivo de los div´s. Aunque habrá quien con razón, disienta del uso que hago de las listas de definición.

Como verás, hay una lista de definición /dl/ para los detalles de cada oferta y una lista sin orden /ul/ para los enlaces para ampliar información. Eso favorece el poder actuar sobre cada una de las dos listas y sus elementos.

No contemplo compatibilidad con navegadores (o sus versiones) obsoletas. Tampoco verificado con múltiples navegadores. Es sólo una forma de cómo se podría enfocar.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <title>Kseso? Jugando con css</title>
  6.  
  7. <style type="text/css">
  8. * {margin: 0; padding: 0; outline: 0; position: relative;}
  9. #oferta {list-style-type:none; margin:0 0 10px; padding-left:20px; width:350px; border-bottom:1px solid #cce;}
  10. #oferta li {display:block; padding:0; margin:0;}
  11. #oferta li a, #oferta li a:visited {display:block; text-decoration:none;}
  12. #oferta li dd, #oferta li ul.ampliarinfo {display:none;}
  13. #oferta li:hover dt a {color:#222; }
  14. #oferta li:hover dd, #oferta li a:hover dd, #oferta li:hover ul, #oferta li a:hover ul {display:block;}
  15. #oferta dt {margin:0; padding: 0; font-size: 1.1em; font-weight: 100; border-top:1px solid #cce;}
  16. #oferta dd {margin:0; padding-left: 20px; font-size: 1em; text-align:left; }
  17. #oferta dd span {display:block; padding-left: 40px; margin-bottom: 15px; font-size: .9em;}
  18. #oferta li:hover dt {font-size: 1em; font-weight: 700;}
  19. .expandido dt a, .expandido dt a:visited {display:block; color:#777; padding:5px 5px 0 0;}
  20. .expandido dd, .expandido dd a, .expandido dd a:visited {color:#0094F0; text-decoration:none; display:block;}
  21. #oferta li ul.ampliarinfo {position: absolute; right: 0; bottom: 0; text-align: right; font-size: .7em;}
  22. #oferta li ul.ampliarinfo a { display: block; color:#00949F;}
  23. #oferta li ul.ampliarinfo a:hover {text-decoration: underline; color:#444}
  24. </style>
  25. </head>
  26. <body>
  27.     <ul id="oferta">
  28.       <li>
  29.         <dl class="expandido">
  30.              <dt><a href="#">Instalador autorizado de gas categor&iacute;a B.</a></dt>
  31.                <dd>Duración: 80horas</dd>
  32.                <dd>Fechas: marzo-julio de 2010</dd>
  33.                <dd>Horario: de 19h a 21h
  34.                    <span>lunes, Xles y viernes</span>
  35.                </dd>
  36.         </dl>
  37.           <ul class="ampliarinfo">
  38.              <li><a href="#" title="el titulo">+info</a></li>
  39.              <li><a href="#" title="inscripción">inscripción</a></li>
  40.              <li><a href="#" title="compartir">compartir</a></li>
  41.          </ul>
  42.       </li>
  43.       <li>
  44.         <dl class="expandido">
  45.            <dt><a href="#">Nuevo reglamento de distribución de gas</a></dt>
  46.              <dd>Duración: 80horas</dd>
  47.              <dd>Fechas: marzo-julio de 2010</dd>
  48.              <dd>Horario: de 19h a 21h
  49.                <span>lunes, Xles y viernes
  50.                </span>
  51.            </dd>
  52.         </dl>
  53.         <ul class="ampliarinfo">
  54.            <li><a href="#" title="el titulo">+info</a></li>
  55.            <li><a href="#" title="inscripción">inscripción</a></li>
  56.            <li><a href="#" title="compartir">compartir</a></li>
  57.         </ul>
  58.       </li>
  59.       <li>
  60.         <dl class="expandido">
  61.            <dt><a href="#">Soldadura semiatumática mig/max</a></dt>
  62.              <dd>Duración: 80horas</dd>
  63.              <dd>Fechas: marzo-julio de 2010</dd>
  64.              <dd>Horario: de 19h a 21h
  65.                <span>lunes, Xles y viernes</span>
  66.            </dd>
  67.         </dl>
  68.         <ul class="ampliarinfo">
  69.           <li><a href="#" title="el titulo">+info</a></li>
  70.           <li><a href="#" title="inscripción">inscripción</a></li>
  71.           <li><a href="#" title="compartir">compartir</a></li>
  72.         </ul>
  73.       </li>
  74.       <li>
  75.         <dl class="expandido">
  76.           <dt><a href="#">Instalador autorizado de gas categoría A</a></dt>
  77.             <dd>Duración: 80horas</dd>
  78.             <dd>Fechas: marzo-julio de 2010</dd>
  79.             <dd>Horario: de 19h a 21h
  80.               <span>lunes, Xles y viernes</span>
  81.             </dd>
  82.         </dl>
  83.         <ul class="ampliarinfo">
  84.           <li><a href="#" title="el titulo">+info</a></li>
  85.           <li><a href="#" title="inscripción">inscripción</a></li>
  86.           <li><a href="#" title="compartir">compartir</a></li>
  87.         </ul>
  88.       </li>
  89.     </ul>
  90. </body>
  91. </html>

Espero que eso fuese lo que se busca.
Y como decía, no es la respuesta exacta a la duda, sino una idea de cómo se podría enfocar. Código css sin depurar.

Atentamente

P.D.: Como verás, va en la línea que sugirió Alexk, sin js para el despliegue (que podría hacerse con css3 con sus advertencias oportunas) y algo diferente en lo que es la anidación de elementos.