¿Es posible maquetar una lista así?

AlZuwaga · #1 (**permalink**) 04/05/2006, 12:15

Hola, partiendo del siguiente html...

Código:

<h2>Lorem ipsum</h2>
  <ul>
    <li>Phasellus
	<ul>
	  <li>Consectetuer</li>
	  <li>Duis</li>
	  <li>Fusce vitae</li>
	  <li>Ut pharetra</li>
	  <li>Donec tincidunt</li>
	</ul>
	</li>
    <li>Urna
	<ul>
	  <li>Cras at metus</li>
	  <li>Nam sit amet</li>
	  <li>Mauris gravida</li>
	  <li>Donec in augue</li>
	  <li>Donec ac mauris</li>
	</ul>
	</li>
  </ul>
<p>Pharetra</p>

... puedo "maquetarlo" para que quede similar a esta muestra?:

Aclaro por si no grafiqué lo suficientemente claro:
-Hay un encabezado.
-Los dos elementos de la lista principal deben actuar como una pestaña a manera de navegación. Cada uno mostrará (eso supongo lo lograré con javascript) la lista anidada que le corresponde (la segunda lista anidada no se ve -la verde- porque está activa la primer pestaña)
-Hay un pie.

Si no se puede, avisen así le doy otro enfoque :)
Gracias

webosiris · #2 (**permalink**) 04/05/2006, 12:30

- Poderse se puede... como, eso si que no se

supongo que podés usar display:none y block para que aparezca una y no la otra...
- Esto no es exactamente lo que preguntás, pero quizás puede ayudar.

AlZuwaga · #3 (**permalink**) 04/05/2006, 14:23

Gracias webos ;)
Voy a ver si con el enlace que me pasás puedo lograr algo.

Recuerdo haber visto en http://www.komodomedia.com/ que usa algo similar (sino idéntico) a lo que necesitaría... ocurre que no puedo ingresar ahora a ese sitio porque los genios, maestros, mounstruos... de informática del lugar en donde trabajo han bloqueado, entre tantas otras, la palabra media. Por lo tanto, no puedo acceder al sitio. Ni siquiera hacer ésta búsqueda en google...
http://www.google.com/search?hl=en&lr=&safe=off&q=multimedia&btnG=Search

...porque me devuelve el siguiente error:

Cita:

ERROR
The requested URL could not be retrieved

While trying to retrieve the URL: http://www.google.com/search?

The following error was encountered:

* Access Denied.

Access control configuration prevents your request from being allowed at this time. Please contact your service provider if you feel this is incorrect.

Your cache administrator is webmaster.
Generated Thu, 04 May 2006 20:21:17 GMT by proxy2 (Squid/2.4.STABLE6)

webosiris · #4 (**permalink**) 04/05/2006, 14:52

Cita:

Recuerdo haber visto en http://www.komodomedia.com/ que usa algo similar

no conocía ese sitio..

miré un poco el código y lo que tienen es:

Código HTML:

<ul>
<li>Opción visible 1</li>
<li>Opción visible 2</li>
</ul>
<ul>
<li>Opción oculta 1</li>
<li>Opción oculta 2</li>
</ul>

vamos.. una lista común y corriente

El efecto que buscás los hacen con javascript, porque lo desactivé y dejó de andar.. el enlace que te puse más arriba hace todo con css..

Cita:

ocurre que no puedo ingresar ahora a ese sitio porque los genios, maestros, mounstruos... de informática del lugar en donde trabajo han bloqueado, entre tantas otras, la palabra media.

... sin palabras (aunque vieras lo que me he reído

)... casi casi a nivel de la SGAE con la "mala palabra" linux, jeje.

AlZuwaga · #5 (**permalink**) 04/05/2006, 15:37

Ah, entonces no anida las listas.
Pretendía hacerlo con las anidadas para que quede más organizado al desactivar el css.

En fin, cuando llegue a casa me hago un back-up de komodomedia y mañana lo analizo

AlZuwaga · #6 (**permalink**) 05/05/2006, 15:52

Al final (tunait, este mensaje va también para vos!

) seguí intentándolo en base al html arriba mostrado (salvo unos span por aquí y por allí) y llegué a algo muy similar a lo que pretendía.

Luego te lo muestro (igual sabés cuál es el enlace, ver tema del #foro{visibility: hidden}

)

edudw · #7 (**permalink**) 05/05/2006, 16:41

Hola.

quiza lo que buscas este en esta url

Código:

http://www.alistapart.com/articles/sprucemaps

AlZuwaga · #8 (**permalink**) 06/05/2006, 08:19

Hola edudw, me parece que no. No he visto en ese enlace nada similar a ésto (tal vez lo pasé por alto):

http://www.alzuwaga.com.ar/tests/dwstyle/

Es la parte de "blog" y sus dos "pestañas".
El problema que estoy teniendo ahora es quue la lista se sigue expandiendo hacia abajo como si no se hubiese aplicado ninguna transformación a ellas. O sea, fijate que queda el pié separado. Ese espacio es el que ocupaba la lista antes de aplicarle los estilos.

¿Se puede solucionar?

AlZuwaga · #9 (**permalink**) 06/05/2006, 10:22

Mmmm... i'm stuck.
Creo que deberé recurrir a algo menos semántico para lograr lo que quiero.

webosiris · #10 (**permalink**) 06/05/2006, 13:08

Cita:

Iniciado por Al Zuwaga

El problema que estoy teniendo ahora es quue la lista se sigue expandiendo hacia abajo como si no se hubiese aplicado ninguna transformación a ellas.

me parece que es porque tenés este código:

Código:

#lateral .cajitas_pie{top: 180px;}

intentá eliminar ese top a ver que pasa...
lo que también veo es que hay un pequeño problema con el js... me explico:
carga la página y está activa la pestaña "últimos 10". Ok. Hago click en categorías y se desactiva "últimos 10" y se activa "categorías". Ok. Pero ahora si vuelvo a hacer click en "últimos 10" me sale un alert que dice "visible". La lista cambia a últimos 10 y se desactiva la pestaña "categorías"pero no se activa la otra pestaña.

AlZuwaga · #11 (**permalink**) 06/05/2006, 13:20

Cita:

Originalmente publicado por Al Zuwaga
El problema que estoy teniendo ahora es quue la lista se sigue expandiendo hacia abajo como si no se hubiese aplicado ninguna transformación a ellas.

Cita:

Iniciado por webosiris

me parece que es porque tenés este código:

Código:

#lateral .cajitas_pie{top: 180px;}

intentá eliminar ese top a ver que pasa...

Hola webos, ocurre que eso que viste es posterior a haber dejado mi comentario citado. Dejo la muestra tal cual estaaba para que veas qué ocurre. Le quité el top:180 y además le agregué el clear:both al pie tal y como estaba (si le quito el clear al pie, éste se superpone con las "pestañas")

Lo del problema de JS, olvídalo. Estoy haciendo pruebas con el y sé que anda mal... pero por el momento es lo de menos ;)

webosiris · #12 (**permalink**) 06/05/2006, 13:41

creo que se como solucionarlo... en el js estás jugando con visibility visible/hidden... tendrías que jugar con display none/block.. visibility lo que hace es ocultar algo, pero salvo para efectos visuales, sigue estando allí, por lo tanto ocupa lugar, etc. Display:none en cambio es como si "el objeto" no estuviera ahí...

AlZuwaga · #13 (**permalink**) 08/05/2006, 15:14

bueno, hice las modificaciones (no estan disponibles online) y a la lista anidada que se ve por defecto le puse display:block (al <ul>). a la lista anidadada que no se ve por defecto le puse diplay:neno y nada.
El pie continúa separado :llorar:

AlZuwaga · #14 (**permalink**) 08/05/2006, 15:17

ah, maldito cabrón!
Me acabo de dar cuenta que la separación del pié de la cajita está dada por el contenido del div#contenido!

Bueno, vamos avanzando. Después lo reviso.

AlZuwaga · #15 (**permalink**) 11/05/2006, 15:09

Lo anterior está solucionado. Ahora no depende del div#contenido la separación del pié (ya no recuerdo qué toque, modifiqué muchas cosas)

Ahora, al ponerle display:none a la segunda lista anidada, es como que no respeta la extención vertical de la primera. Al haber elementos posicionados absolutos y relativos intuyo que quedan fuera de flujo y sería por ello que el pié "se monta" sobre estos. Lo raro es que la primer lista anidada no está posicionada ni absoluta ni relativamente... por lo tanto, debería mantener su flujo normal.

Ya no entiendo nada :)

safe · #16 (**permalink**) 11/05/2006, 16:32

Hola Al Zuwaga...
Lei tu primer post yme puse a trabajar para ver sipdia lograr lo que planteabas... ahora vuelvo y hay mil mensajes mas!!!

De todas formas te posteo a lo que llegue, aunque se que es bastante flojo porque sirve basicamente para el ejemplo dado y habria que cambiarle muchas cosas para adaptarlo a otros casos... ademas le agregue todo el javascript adentro muy en contra detodos los estandares

Pero bueno, espero que te sirva un poquito aunque sea.

Código HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {margin:0; padding:0; width:250px;}
h2 { background-color:#F60; padding: 5px; border-bottom: 2px solid #F1F1F1; margin:0;}
ul#parent { margin:0; list-style:none; background-color:#F99; padding:0; height:250px; }
ul#parent li { float:left; width:50%; background: #F1F1F1; height: 25px;}
ul#parent li a { display:block; width:auto; height: 25px; background-color:#090; color:#FFF; text-align:center; margin: 0 2px 2px 2px;}
ul#parent li a:hover {background-color:#F99; color:#000; }
ul#parent li.selected a {display:block; height: 25px; border: 0; background-color:#F99; color:#000;  margin:0;}
ul#parent li ul { display:none; background-color:#F99; margin-top: 20px; width: 170px; position: absolute; left: 30px;}
ul#parent li.selected ul {display: block; }
ul#parent li ul li { float:none; background-color:#F99; width:auto; }
p {clear:both; display: block; padding:5px; margin:0; background-color:#666; color: #FFF; }
-->
</style>
<script type="text/javascript">
<!--
function activar(mostrar,ocultar)
{
	mostrar = document.getElementById(mostrar);
	mostrar.className = 'selected';
	
	ocultar = document.getElementById(ocultar);
	ocultar.className = '';
}
-->
</script>
</head>

<body>
<h2>Lorem ipsum</h2>
  <ul id="parent">
    <li id="op_1" class="selected">
	<a href="#" onclick="activar('op_1','op_2'); return false">Phasellus</a>
		<ul>
		  <li>Consectetuer</li>
		  <li>Duis</li>
		  <li>Fusce vitae</li>
		  <li>Ut pharetra</li>
		  <li>Donec tincidunt</li>
		</ul>
	</li>
    <li id="op_2">
	<a href="#" onclick="activar('op_2','op_1'); return false">Urna</a>
		<ul>
		  <li>Cras at metus</li>
		  <li>Nam sit amet</li>
		  <li>Mauris gravida</li>
		  <li>Donec in augue</li>
		  <li>Donec ac mauris</li>
		</ul>
	</li>
  </ul>
<p>Pharetra</p>
</body>
</html>

AlZuwaga · #17 (**permalink**) 11/05/2006, 16:46

hola safe, gracias.
dejá que lo miro y te comento. Seguramente será mañana porque en un rato salgo.

Gracias nuevamente

AlZuwaga · #18 (**permalink**) 12/05/2006, 18:12

Hola safe, lo estuve mirando y si le quito el height:250px al ul#parent ocurre algo similar a lo que a mi me ocurría, que las cosas comienzan a superponerse.

finalmente lo hice de otra manera... sin anidar las listas.
Lo podés ver acá: www.alzuwaga.com.ar/tests/dwstyle/defaultv2.asp

¿quién me dice cuál es el problemita ahora? :)

safe · #19 (**permalink**) 13/05/2006, 11:59

hol a Al Zuwaga... supongo que tu pregunta es ironica o llegue tarde como siempre, por que yo no veo ningun problema!

AlZuwaga · #20 (**permalink**) 13/05/2006, 16:46

jejeje, desactivá los estilos y hacé click sobre las que serían las pestañas de "Ultimos 10" y "Categorías". Maldito javascript! (igual, supongo hay alguna manera de evitar eso... luego le doy una miradita)

safe · #21 (**permalink**) 13/05/2006, 18:04

ahora entendi... supongo que una factible solucion seria que en vez de modificar la propiedad del fondo con javascrpit cambiases las clases de las pestañas (con className).
De esta forma, si no hay estilos el cambio no surte ningun efecto visual.