Foros del Web » Creando para Internet » CSS »

¿Es posible maquetar una lista así?

Estas en el tema de ¿Es posible maquetar una lista así? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/05/2006, 13:15
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
¿Es posible maquetar una lista así?

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
__________________
...___...
  #2 (permalink)  
Antiguo 04/05/2006, 13:30
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
- 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.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 04/05/2006, 15:23
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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)

__________________
...___...
  #4 (permalink)  
Antiguo 04/05/2006, 15:52
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
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.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #5 (permalink)  
Antiguo 04/05/2006, 16:37
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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
__________________
...___...
  #6 (permalink)  
Antiguo 05/05/2006, 16:52
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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} )
__________________
...___...
  #7 (permalink)  
Antiguo 05/05/2006, 17:41
 
Fecha de Ingreso: abril-2004
Mensajes: 634
Antigüedad: 13 años, 8 meses
Puntos: 2
Hola.

quiza lo que buscas este en esta url
Código:
http://www.alistapart.com/articles/sprucemaps
__________________
Una a una resuelvo mis dudas... y una a una se me suman mas dudas... :adios:
  #8 (permalink)  
Antiguo 06/05/2006, 09:19
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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?
__________________
...___...
  #9 (permalink)  
Antiguo 06/05/2006, 11:22
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Mmmm... i'm stuck.
Creo que deberé recurrir a algo menos semántico para lograr lo que quiero.
__________________
...___...
  #10 (permalink)  
Antiguo 06/05/2006, 14:08
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
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.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #11 (permalink)  
Antiguo 06/05/2006, 14:20
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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 ;)
__________________
...___...
  #12 (permalink)  
Antiguo 06/05/2006, 14:41
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
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í...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #13 (permalink)  
Antiguo 08/05/2006, 16:14
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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:
__________________
...___...
  #14 (permalink)  
Antiguo 08/05/2006, 16:17
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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.
__________________
...___...
  #15 (permalink)  
Antiguo 11/05/2006, 16:09
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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 :)
__________________
...___...
  #16 (permalink)  
Antiguo 11/05/2006, 17:32
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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> 
__________________
oohh... quisiera ser godines!!!
  #17 (permalink)  
Antiguo 11/05/2006, 17:46
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
hola safe, gracias.
dejá que lo miro y te comento. Seguramente será mañana porque en un rato salgo.

Gracias nuevamente
__________________
...___...
  #18 (permalink)  
Antiguo 12/05/2006, 19:12
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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? :)
__________________
...___...
  #19 (permalink)  
Antiguo 13/05/2006, 12:59
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
hol a Al Zuwaga... supongo que tu pregunta es ironica o llegue tarde como siempre, por que yo no veo ningun problema!
__________________
oohh... quisiera ser godines!!!
  #20 (permalink)  
Antiguo 13/05/2006, 17:46
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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)
__________________
...___...
  #21 (permalink)  
Antiguo 13/05/2006, 19:04
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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.
__________________
oohh... quisiera ser godines!!!
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 13:01.