Problema con div y class...

tyrantyan · #1 (**permalink**) 02/04/2013, 06:17

Hola tengo el siguiente problema...

Es que como toda esta pagina va bajo el <div class="gallery">

parece ser que en este stylo no puedo habilitar los links y por tanto no me funciona...

O a lo mejor tengo una confusion de dos class distintos

Mi html es :

Cita:

<div id="main" class="center">
<h2>Bisutería</h2>
<p>Realizamos vitrales que permiten el paso de la luz, como resultado de un lenguaje artístico propio que combina requisitos estéticos y funcionales armonizando el vitral con su entorno.Algunos de nuestros trabajos...</p>
<div class="gallery">
<li><a rel="group1" title="Image Title" href="css/images/img7.jpg"><img src="css/images/img9.jpg" alt="" /></a>
<div class="info">
<div class="in">
<h4 align="center"><a href="project-detailed.html"><span class="style8 style4">Vitral energético. REF:002</span></a></h4> <p class="style7 style5">Pieza de tamaño 62x64cm (24x25) Un clásico para cualquier hogar u oficina.<p>
<p class="arrowed arrowed-3"><a href="blog.html" class="style9">Detalles y Comprar<span class="style9"></span></a></p>
</span></li>

y mi css es

Cita:

.gallery { height: 100%; overflow: hidden; }
.gallery ul { margin-left: 0; }
.gallery li { float: left; display: inline; width: 301px; list-style-type: none; margin: 0 38px 38px 0; }
.gallery li.last { margin-right: 0; }
.gallery li img { display: block; }
.gallery li.arrowed { position: relative; margin: -20px 0 0 0; }

Tengo que habilitar algo en el css para que funcionen los links en el html? Gracias...

pzin · #2 (**permalink**) 02/04/2013, 07:04

No entiendo. Tendrías que ser un poco más específico. Expláyate un poco más.

tyrantyan · #3 (**permalink**) 02/04/2013, 07:59

En mi html que subí… tengo este código que refiere a un link (blog.html)

Cita:

<p class="arrowed arrowed-3"><a href="blog.html" class="style9">Detalles y Comprar<span class="style9"></span></a></p>

Pero no funciona cuando aprieto el link ( No redirije a ninguna parte y se queda pensando)
En cambio, si quito <div class="gallery"> en el html, funciona correctamente el link… pero claro, pierdo todo el formato…
Por eso pregunto si en el css tengo que agregar algo o porque no funciona el link bajo este estilo?

pzin · #4 (**permalink**) 02/04/2013, 10:18

CSS no interviene en cómo se maneja un enlace.

Dado que es un caso extraño, ¿lo tienes subido a algún sitio para verlo? Igual está interfiriendo algún código de JavaScript, algún z-index o alguna otra historia.

tyrantyan · #5 (**permalink**) 02/04/2013, 10:23

No lo subí.. lo hare entre mañana y pasado... pero puedo enviarte o postear los códigos completos...porque yo tampoco le encuentro solución... es como si algo estoy haciendo mal, ya que dentro de
<div class="gallery">

y dentro de ella pongo una foto y debajo una descripcion con un link para poder comprar el articulo de la foto y el link no funciona de ninguna manera, solo cuando saco <div class="gallery">

tyrantyan · #6 (**permalink**) 02/04/2013, 10:29

Ladrillazoooo ya lo sé... pero a lo mejor se puede solucionar:
Te dejo una foto para ilustrarnos... http://subefotos.com/ver/?09b18a9035bb0f25460c7fb49b2b2563o.jpg

Lo que no me anda es el link que dice "detalles y comprar"

Cita:

<!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=utf-8" />
<title>Bisutería</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />


<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.jcarousel.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>


<script type="text/javascript" src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox-1.3.1.css" media="screen" />


<script src="js/functions.js" type="text/javascript"></script>
<style type="text/css">

</style>
</head>
<body>

<div id="wrapper">

<div id="top" class="center">

<ul class="nav">
<li><a href="#" class="facebook">Facebook:</a></li>
<li><a href="#" class="rss">RSS:</a></li>
</ul>
</div>


<div id="navigation">
<div class="center">

<h1 id="logo" name="logo"><a href="index.html"></a></h1>

<ul class="fix-last">
<li><a href="index.html">Home</a></li>
<li><a href="#">Quienes Somos</span></a>
<div class="dd">
<ul class="fixlast">
<li><a href="Mision.html">Misión</a></li>

<li><a href="Mi historia.html">Mi historia</a></li>

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

<li>
<a href="services.html" class="active"><span>Que Hacemos</span></a>
<div class="dd">
<ul class="fixlast">
<li><a href="Bisuteria.html">Bisutería</a></li>
<li><a href="Deco Art.html">Deco Art</a></li>
<li><a href="Geometria sagrada.html">Geometria Sagrada</a></li>
<li><a href="Vitrales.html">Vitrales</a></li>
<li><a href="Wall Art.html">Wall Art</a></li>

<div class="dd">

</div>
</li>
</ul>
</div>
</li>
<li><a href="contact.html"><span>Contacto</span></a></li>
</li>
</ul>
</div>
</div>



<div id="main" class="center">
<h2>Bisutería</h2>
<p>Realizamos vitrales que permiten el paso de la luz, como resultado de un lenguaje artístico propio que combina requisitos estéticos y funcionales armonizando el vitral con su entorno.Algunos de nuestros trabajos...</p>
<div class="gallery">
<li><a rel="group1" title="Image Title" href="css/images/img7.jpg"><img src="css/images/img9.jpg" alt="" /></a>
<div class="info">
<div class="in">
<h4 align="center"><a href="project-detailed.html"><span class="style8 style4">Vitral energético. REF:002</span></a></h4> <p class="style7 style5">Pieza de tamaño 62x64cm (24x25) Un clásico para cualquier hogar u oficina.<p>
<p class="arrowed arrowed-3"><a href="blog.html" class="style9">Detalles y Comprar<span class="style9"></span></a></p>
</span></li>

<li><a rel="group1" title="Image Title" href="css/images/img8.jpg"><img src="css/images/img3.jpg" alt="" />
<div class="info">
<div class="in">
<h4 align="center"><a href="project-detailed.html"><span class="style8 style4">Vitral energético. REF:002</span></a></h4>
<p class="style7 style5">Pieza de tamaño 62x64cm (24x25) Un clásico para cualquier hogar u oficina.<p>
<p class="arrowed arrowed-3"><a href="blog.html" class="style9">Detalles y Compra<span class="style9"></span>r</a></p>
</span></div></li>

<li class="last"><a rel="group1" title="Image Title" href="css/images/img15.jpg"><img src="css/images/img1.jpg" alt="" /><div class="info">
<div class="in">
<h4 align="center"><a href="project-detailed.html"><span class="style8 style4">Vitral energético. REF:002</span></a></h4>
<p class="style7 style5">Pieza de tamaño 62x64cm (24x25) Un clásico para cualquier hogar u oficina.<p>
<p class="arrowed arrowed-3"><a href="Vitrales.html" class="style9">Detalles y Compra<span class="style9"></span>r</a></p></span></div></a></li>

<li><a rel="group1" title="Image Title" href="css/images/img6.jpg"><img src="css/images/img10.jpg" alt="" />
<div class="info">
<div class="in">
<h4 align="center"><a href="project-detailed.html"><span class="style8 style4">Vitral energético. REF:002</span></a></h4>
<p class="style7 style5">Pieza de tamaño 62x64cm (24x25) Un clásico para cualquier hogar u oficina.<p>
<p class="arrowed arrowed-3"><a href="Vitrales.html" class="style9">Detalles y Compra<span class="style9"></span>r</a></p></span></div></a></li>
<li><a rel="group1" title="Image Title" href="css/images/img12.jpg"><img src="css/images/img2.jpg" alt="" />
<div class="info">
<div class="in">
<h4 align="center"><a href="project-detailed.html"><span class="style8 style4">Vitral energético. REF:002</span></a></h4>
<p class="style7 style5">Pieza de tamaño 62x64cm (24x25) Un clásico para cualquier hogar u oficina.<p>
<p class="arrowed arrowed-3"><a href="Vitrales.html" class="style9">Detalles y Compra<span class="style9"></span>r</a></p></span></div></a></li>
<li class="last"><a rel="group1" title="Image Title" href="css/images/img16.jpg"><img src="css/images/img5.jpg" alt="" />
<div class="info">
<div class="in">
<h4 align="center"><a href="project-detailed.html"><span class="style8 style4">Vitral energético. REF:002</span></a></h4>
<p class="style7 style5">Pieza de tamaño 62x64cm (24x25) Un clásico para cualquier hogar u oficina.<p>
<p class="arrowed arrowed-3"><a href="Vitrales.html" class="style9">Detalles y Compra<span class="style9"></span>r</a></p></span></div></a></li>

</div>
<div class="pagination">
<div class="line"> </div>
<p class="left"><span class="style7">Páginas </span><span>/</span> <a href="blog.html"></a></p>
<p class="right"><a href="blog.html"></a> <span>/</span> <a href="blog.html" class="style6"></a></p>
<p class="middle"><a href="blog.html" class="active">1</a> <span>/</span> <a href="blog.html">2</a> <span>/</span> </p>
<div class="line"> </div>
</div>

<div class="line"> </div>




<div class="copy">
<p class="right"><span class="style2">© <span class="style3">2013 Vivian. Design by </span></span><a href="http://www.vab-consulting.net" title="The Sweetest CSS Templates WorldWide" target="_blank" class="style3">Vab-Consulting</a></p>

</div>
</div>
</div>



<div id="screen"></div>

<div class="abs-holder">
<div class="login">
<form action="" method="post">
<h3>Login</h3>
<div class="row">
<label>Username</label>
<input type="text" class="field" value="Username" title="Username" />
</div>
<div class="row">
<label>Password</label>
<input type="password" class="field" value="Password" title="Password" />
</div>
<input type="submit" class="submit-button" value="Login" />
<label for="login-check" class="remember"><input type="checkbox" class="checkbox" value="" id="login-check" />Remember me</label>
<div class="field-error">
<span class="alert">Invalid Username or Password!</span>
</div>
</form>
</div>
</div>

<script type="text/javascript" charset="utf-8">
pageLoaded();
</script>
</body>
</html>

pzin · #7 (**permalink**) 02/04/2013, 12:08

Va a ser mejor que lo subas, ya que ese es sólo el código HTML, y ahí vinculas a varios .css y .js.

tyrantyan · #8 (**permalink**) 02/04/2013, 16:04

ok en breve! Gracias por la paciencia...

juansegovia497 · #9 (**permalink**) 09/04/2013, 09:45

Subilo porque asi esta complicado!
Saludos

tyrantyan · #10 (**permalink**) 18/04/2013, 07:05

Ya lo solucione cambiando de quuajo el diseño. Gracias por el intento

SeoPosicWeb · #11 (**permalink**) 23/04/2013, 15:56

Amig@... estas haciendo éste diseño con un programa WYSIWYG ? porque a simple vista se ve un caos el codigo, hay etiquetas que no tienen sentido ... y en el primero cuadro ocupas una etiqueta li cuando no has abierto una etiqueta ul o en su caso ol.
Si la respuesta a la pregunta que te hice es si, te recomiendo que aprendas un poco de programacion y lo hagas tu mismo, porque esos editores simplifican el proceso pero generan muchos errores y codigo basura.
Si lo hiciste tu entonces debes ser un poco mas ordenado al maquetar... la validacion de W3 te puede ayudar...porque vi muchos errores en tu codigo HTML, ni siquiera vi ya el CSS...