Foros del Web » Creando para Internet » CSS »

galeria css

Estas en el tema de galeria css en el foro de CSS en Foros del Web. Buenas me ayudais un poquito, quiero implementar esta galeria en mi web galeria lo que pasa esque los enlaces de arriba lo quiero quitar y ...
  #1 (permalink)  
Antiguo 02/01/2009, 11:03
nfo
 
Fecha de Ingreso: octubre-2008
Ubicación: EsPaCiO TiEmPo
Mensajes: 408
Antigüedad: 15 años, 5 meses
Puntos: 5
galeria css

Buenas me ayudais un poquito, quiero implementar esta galeria en mi web galeria lo que pasa esque los enlaces de arriba lo quiero quitar y dejar solo las imagenes que al pasar el raton se amplie, pero si quito una clase llamada set no funciona echadme una mano. con el codigo



Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Cross Browser Multi Page Photograph Gallery</title>
<meta name="Author" content="Stu Nicholls" />


<style type="text/css">


/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* common styling */

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

/* slides styling */

.photo {width:635px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul, 
.photo ul.topic li ul 
{display:none;}

.photo ul.topic li.active a
{color:#000; background:#bbb;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}

.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover, 
.photo ul.topic li:hover ul li a:hover 
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img, 
.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
</style>


</head>

<body>

<div class="photo">
<ul class="topic">
	<li class="active"><a class="set" href="#Landscapes">Landscapes<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="lbox/landscape1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/landscape1a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape2.jpg"><img src="lbox/landscape2a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape3.jpg"><img src="lbox/landscape3a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape4.jpg"><img src="lbox/landscape4a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape5.jpg"><img src="lbox/landscape5a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape6.jpg"><img src="lbox/landscape6a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape7.jpg"><img src="lbox/landscape7a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape8.jpg"><img src="lbox/landscape8a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape9.jpg"><img src="lbox/landscape9a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape10.jpg"><img src="lbox/landscape10a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape11.jpg"><img src="lbox/landscape11a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape12.jpg"><img src="lbox/landscape12a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape13.jpg"><img src="lbox/landscape13a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape14.jpg"><img src="lbox/landscape14a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape15.jpg"><img src="lbox/landscape15a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape16.jpg"><img src="lbox/landscape16a.jpg" alt="" title="" /></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>


</ul>
<br class="clear" />
</div>


</body>
</html> 
  #2 (permalink)  
Antiguo 02/01/2009, 11:07
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 9 meses
Puntos: 177
Respuesta: galeria css

Probá sacandole esta línea al código HTML

Cita:
<a class="set" href="#Landscapes">Landscapes<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #3 (permalink)  
Antiguo 02/01/2009, 11:23
nfo
 
Fecha de Ingreso: octubre-2008
Ubicación: EsPaCiO TiEmPo
Mensajes: 408
Antigüedad: 15 años, 5 meses
Puntos: 5
Respuesta: galeria css

si le quito esa linea no funciona con Ie 6 :p solo quiero dejar las imagenes sola pero no puedo!!1
  #4 (permalink)  
Antiguo 02/01/2009, 11:49
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 9 meses
Puntos: 177
Respuesta: galeria css

Cita:
<a class="set" href="#Landscapes">Landscapes<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
Quitale solo lo que te puse en negrita!
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #5 (permalink)  
Antiguo 02/01/2009, 17:00
nfo
 
Fecha de Ingreso: octubre-2008
Ubicación: EsPaCiO TiEmPo
Mensajes: 408
Antigüedad: 15 años, 5 meses
Puntos: 5
Respuesta: galeria css

no hace nada para ie 6 jooooooooooo
  #6 (permalink)  
Antiguo 02/01/2009, 19:27
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 19 años, 5 meses
Puntos: 10
Respuesta: galeria css

nfo he entendido que necesitas la galería del maestro Stu Nicholls pero quitándole los enlaces, dejando sólo el efecto de ampliación de la foto al paso del mouse, si estoy en lo cierto, lo he subido a este almacén:

http://www.box.net/shared/h9ju5x0rip

Bájalo y nos dices si es lo que estás buscando.

Saludos
  #7 (permalink)  
Antiguo 03/01/2009, 03:26
nfo
 
Fecha de Ingreso: octubre-2008
Ubicación: EsPaCiO TiEmPo
Mensajes: 408
Antigüedad: 15 años, 5 meses
Puntos: 5
Respuesta: galeria css

exacto!!! muchisimas gracias!! eso es lo que queria ,pero para ie 6 no funcion, supongo que no se podra hacer nada.....
  #8 (permalink)  
Antiguo 03/01/2009, 11:53
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 19 años, 5 meses
Puntos: 10
Respuesta: galeria css

Efectivamente, el sistema css utilizado por Stu Nicholls para esta galería no funciona en ie6.

Quizás fuese bueno que investigaras en la página del autor si tiene alguna galería específica, similar a esta, que funcione en ie6 y si la encuentras, luego podríamos ver de adaptarla.

Suerte y saludos

RECTIFICO, sustituye el html por este otro y verás que funciona perfectamente en ie6 y en los otros browsers:

______________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cross Browser Multi Page Photograph Gallery</title>
<meta http-equiv="imagetoolbar" content="no" />
<!-- todos los créditos para el autor: Stu Nicholls (el genio de las css). http://www.cssplay.co.uk/menu/lightbox.html -->
<!-- versión simplificada, sin tabs, con una única galeria y con enlaces sólo las cuatro primeras imágenes -->
<link rel="stylesheet" media="all" type="text/css" href="css/estilo.css" />
</head>

<body>
<div id="wrapper">
<div class="photo">
<ul class="topic">
<li class="active"><a class="set" href="#Landscapes">Landscapes<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="lbox/portrait1.jpg"><img src="lbox/portrait1a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait2.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait3.jpg"><img src="lbox/portrait3a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait4.jpg"><img src="lbox/portrait4a.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="lbox/portrait5a.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="lbox/portrait6a.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="lbox/portrait7a.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="lbox/portrait8a.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="lbox/portrait9a.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="lbox/portrait10a.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="lbox/portrait11a.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="lbox/portrait12a.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="lbox/portrait13a.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="lbox/portrait14a.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="lbox/portrait15a.jpg" alt="" title="" /></a></li>
<li><a href="#"><img src="lbox/portrait16a.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div> <!-- end of wrapper -->
</body>
</html>
______________

Saludos

Última edición por ssclamp; 03/01/2009 a las 11:59
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 09:38.