Foros del Web » Creando para Internet » CSS »

Botonera acordeon

Estas en el tema de Botonera acordeon en el foro de CSS en Foros del Web. Hola! Estoy realizando una botonera en acordeón y para variar me da problemas en ie. Creo que tiene algo que ver con la lista dentro ...
  #1 (permalink)  
Antiguo 23/07/2009, 06:02
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Botonera acordeon

Hola!

Estoy realizando una botonera en acordeón y para variar me da problemas en ie.
Creo que tiene algo que ver con la lista dentro del span o con los enlaces...

La verdad es que no se como solucionarlo.

Agradezco vuestros consejos.

CÓDIGO HTML:


Código:
<div class="outer">
  <ul id="menu">
   <li>
    <a href="#">
     <img src="images/arquitecturaLink.jpg" alt="arquitectura" title="arquitectura"/>
     <span>
      <ul>
        	<li><a href="#">Trámites legales</a></li>
            <li><a href="#">Reforma y rehabilitación</a></li>
            <li><a href="#">Project Manajement</a></li>
            <li><a href="#">Urbanismo</a></li>
            <li><a href="#">Decoración-Interiorismo</a></li>
            <li><a href="#">Paisajismo</a></li>
            <li><a href="#">Obra Nueva</a></li>
            <li><a href="#">Concursos</a></li>
        </ul>
     </span>
     </a>
   </li>
   <li>
    <a href="#">
     <img src="images/empresa.jpg" alt="Arquitectura Corporativa" title="arquitectura corporativa" />
    </a>
   </li>
   <li>
    <a href="#">

     <img src="images/disenograficoLink.jpg" alt="diseño grafico" title="diseño grafico" />
     <span>
     	<ul>
        	<li><a href="#">Imagen Corporativa</a></li>
            <li><a href="#">Diseño Publicitario</a></li>
            <li><a href="#">Editorial</a></li>
            <li><a href="#">Packaging</a></li>
            <li><a href="#">Ilustración</a></li>
            <li><a href="#">Eventos</a></li>
        </ul>
      	
     </span>
    </a>
   </li>

   <li>
    <a href="#">
     <img src="images/empresa.jpg" alt="Diseño Multimedia" title="Diseño Multimedia" />
     <span>
     	 <ul>
         	<li><a href="#">Diseño Web</a></li>
         </ul>
     </span>

    </a>
   </li>
   <li>
    <a href="#">
     <img src="images/empresa.jpg" alt="Servicios" title="Servicios" />

    </a>
   </li>
   <li>
    <a href="#">
     <img src="images/empresaLink.jpg" alt="Empresa" title="Empresa" />
     <span>
     	 <ul>
         	<li><a href="#">Equipo</a></li>
            <li><a href="#">Política de Empresa</a></li>
         </ul>
     </span>

    </a>
   </li>
   
    
  </ul>
</div>

CÓDIGO CSS
Código:
#menu {
  margin:10px 15px; 
  padding:0; 
  width:750px;
  height:130px;
  overflow:hidden; 
  background:#352f2e;
  }
#menu li {
  display:inline;
  list-style-type:none; 
  }
#menu li a {
  display:block;
  float:left;
  text-decoration:none; 
  margin:0; 
  }
#menu li a img {
  opacity:0.7;
  margin:3px;
  border:0;
  float:left;
  }
#menu li a span {
  display:none;
  }

#menu li a:hover {
  background:#cfc196;
  }
#menu li a:hover img {
  opacity:1;
  }
#menu li a:hover span {
	width:150px;
	height:125px;
  	color:#aaa;
  	display:block; 
  	cursor:pointer;
  	float:left;
  	margin:0;
  }


.outer {
  background:transparent; 
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
  float:left;
  }

#menu span ul {
	padding:0;
	margin:0;
	visibility:hidden;
	}
	
	
#menu span ul li a{
color:#352f2e;
width:150px;
padding-left:2px;
visibility:visible;
}

#menu span ul li a:hover{
color:#666;
width:148px;
padding-left:2px;}
  #2 (permalink)  
Antiguo 23/07/2009, 06:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Botonera acordeon

Hola Irulan (de nuevo )
Antes de seguir con tu código, mejor te comento unos detalles/errores que contiene:
---> Un span no puede contener una lista dentro <span><ul>...</ul></span>
---> Todo lo que esté dentro de una lista (ul) tiene que estar metido en su correspondiente <li>, así sí: <ul><li> todo lo que quieras</li></ul>. Así no: <ul><algo_que_no_sea_li></ul>

Te pongo unos enlaces de diversos tipos de acordeones:
varios juntos
otro
Recopilación de unos cuantos (algo más que css)
otra recopilación

EDITO para ampliar:
Uno que me encanta
Pero en esa página (www.csplay.co.uk) tienes para pasar una tarde entera viendo ejemplos:
unos cuantos más ya sean sólo con css o con algún script, lo que los dota de mayores efectos

Sírvete y ya veremos tu elección
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 23/07/2009 a las 07:04
  #3 (permalink)  
Antiguo 23/07/2009, 09:39
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Botonera acordeon

kseso muchas gracias!

No sabía estas cositas que me has explicado. Mañana intentaré probar algo nuevo. Saludos!!!
  #4 (permalink)  
Antiguo 24/07/2009, 05:45
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Botonera acordeon

Muchas gracias, ya he podido realizar mi menu, a partir de uno de los enlaces que me dejaste.

Te estoy muy agradecida, me encanta aprender y vosotros sois un gran libro!!!

Un saludo enorme!!!!!
  #5 (permalink)  
Antiguo 24/07/2009, 05:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Botonera acordeon

Todo un placer, Irulan.
¿soy un libro? Bueno, mientras no sea el "libro gordo de Petete"

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 24/07/2009, 10:41
Pic
 
Fecha de Ingreso: julio-2009
Ubicación: ESPAÑA
Mensajes: 2
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Botonera acordeon

¿Cuál es el mejor programa editor?
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:08.