Hola foreros,
no soy un asíduo a esta sección del foro pero hoy os pido ayuda
Estoy desarrollando una web en la que necesito mostrar una lista de categorías, y subcategorías, y quisiera organizarlas en varias columnas. Leyendo el artículo
CSS Swag: Multi-Column Lists de A-List apart me orienté para hacerlo pero tengo un problema:
cuando despliego una categoría, para ver sus subcategorías, me desplaza las categorías que tengo debajo. ¿sabéis a qué es debido?
Muchas gracias por la ayuda
El código de la página de ejemplo es el siguiente:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="es" lang="es" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Listado de categorias
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="revisit-after" content="15" />
<meta name="robots" content="ALL" />
<style type='text/css'>
.ulCategoBusca{
margin: 0em;
padding: 0em;
list-style-type: none;
width: 100%;
}
ul.ulCategoBusca li{
float: left;
width: 22%;
margin: .5em .3em .5em .3em;
border: .1em solid #000;
padding: 0.2em;
}
ul.ulCategoBusca ul{
border: 0.1em solid red;
}
ul.ulCategoBusca li li{
margin: 0;
padding: 0.2em;
width: 100%;
}
.categoriaListado{
width: 100%;
background-color: #F0F5FB;
display: block;
padding: 0.2em;
}
div.lista{
margin-bottom: 1em;
}
.limpiar{
clear: both;
}
</style>
<script type='text/javascript'>
function muestra(q, imagen){
if(document.getElementById(q)){
var e = document.getElementById(q).style.display;
if(e == "none"){ s = "block"; t = "/imagenes/flecha_verde_up.gif";}
else{ s = "none"; t = "/imagenes/flecha_verde_down.gif";}
document.getElementById(q).style.display = s;
document.getElementById(imagen).src = t;
}
}
</script>
</head>
<body id="Todo1">
<div id='conteBusca'>
<div id='listaCatBusca'>
<div class='lista'>
<ul class='ulCategoBusca'>
<li><span class='categoriaListado'><a href='/tienda/search2.php?cat=807' title='Electrónica'>Electrónica</a></span>
</li>
<li><span class='categoriaListado'><a href='/tienda/search2.php?cat=833' title='Ropa'>Ropa</a> <a href=
"javascript:muestra('sub833','a833')" title='Despliega/Repliega las subcategorias'><img src='/imagenes/flecha_verde_down.gif' style='width:16px;height;16px;vertical-align:bottom;' id='a833' name="a833"></a></span>
<ul id='sub833' style='display:none;'>
<li>
<a href='/tienda/search2.php?cat=836' title='chaquetas'>chaquetas</a>
</li>
<li><a href='/tienda/search2.php?cat=837' title='camisas'>camisas</a>
</li>
<li><a href='/tienda/search2.php?cat=838' title='pantalones'>pantalones</a>
</li>
</ul>
<div class='limpiar'></div>
</li>
<li><span class='categoriaListado'><a href='/tienda/search2.php?cat=834' title='Alimentación'>Alimentación</a> <a href="javascript:muestra('sub834','a834')" title='Despliega/Repliega las subcategorias'><img src='/imagenes/flecha_verde_down.gif' style='width:16px;height;16px;vertical-align:bottom;' id='a834' name="a834"></a></span>
<ul id='sub834' style='display:none;'>
<li>
<a href='/tienda/search2.php?cat=839'title='Carne'>Carne</a>
</li>
<li><a href='/tienda/search2.php?cat=840' title='pescado'>pescado</a>
</li>
</ul>
<div class='limpiar'></div>
</li>
<li><span class='categoriaListado'><a href='/tienda/search2.php?cat=835' title='Complementos'>Complementos</a> <a href="javascript:muestra('sub835','a835')" title='Despliega/Repliega las subcategorias'><img src='/imagenes/flecha_verde_down.gif' style='width:16px;height;16px;vertical-align:bottom;' id='a835' name="a835"></a></span>
<ul id='sub835' style='display:none;'>
<li><a href='/tienda/search2.php?cat=841' title='Corbatas'>Corbatas</a>
</li>
</ul>
<div class='limpiar'></div>
</li>
<li><span class='categoriaListado'><a href='/tienda/search2.php?cat=854' title='Papelería'>Papelería</a></span>
</li>
<li><span class='categoriaListado'><a href='/tienda/search2.php?cat=855' title='Cultura'>Cultura</a></span>
</li>
</ul>
<div class='limpiar'></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
P.D. sé que el listado no es del todo accesible, estoy obligado a usar Javascript, pero e intentado que sea semánticamente lo más correcto posible.