clicks misteriosos

Bram · #1 (**permalink**) 07/04/2008, 15:47

Muy buenas, llevo un par de semanas con esto de las css. Me gusta la versatilidad que dan, pero no me gusta lo lento que se va! supongo que al cojer experiencia mejora el tiempo que se tarda en hacer cualquier tonteria.

Bien, tengo una duda que no consigo solucionar. El problema lo tengo solo con Firefox. He probado IE 5.5, 6 y el Safari y en todos no tengo ningún problema.

El tema es que cuando hago click a los links se me mueven los contenedores (y además no accede al contenido del link hasta que vuelvo a hacer click). Mejor ver para creer:

http://www.trabajillos.es/HTML/

Dad al link "identificate" debajo de título "Bienvenido a tuProfe"

Alguna idea? os dejo lo que puede ser revelante de la css. El código html si quereís lo veis con la web (boton drecho -> ver código fuente de la página). Aunqué lo más importante va aquí:

<div id="contenidor_fL_W485">

<div class="recuadre">
<h1> ¡ Bienvenido a TuProfe.com ! </h1>
<div>
<ul id="llista-en-linia">
<li><a href="#">Registrate Gratis!</a></li>
<li><a href="identificacio.html">Identifícate</a></li>
<li><a href="#">¿Nuevo a TuProfe.com?</a></li>
</ul>
</div>
</div>

---este es el contenedor de todo el contenido del site-----
.contenidor_w720{
width:720;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
clear:both;
display:table;
}

----este contenedor es que incluye toda la columna izquierda (bienvendio a tu profe + formulario)----
#contenidor_fL_W485{
float:left;
width:485px;
}

-----este contenedor es el de "bienvenido a tu profe"-----------
.recuadre h1{
color:#FFB03b;
line-height:1.5;
text-align:center;
font-size:25px;
text-decoration:none;
padding:5px;
}

-----i finalmente la lista---------
ul#llista-en-linia{
list-style-type: none;
}

ul#llista-en-linia li { display: inline;
}

Muchas gracias de antemano.

arriaka · #2 (**permalink**) 07/04/2008, 19:58

Hola Bram

Lo que te esta dando problemas es el display: table de contenidor_w720. Quitando eso ya no se desencaja al hacer clic. Ademas de esto, he visto que el tamaño no lo has dado en px. Por lo tanto el codigo seria el siguiente:

Código:

.contenidor_w720{
width:720px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
clear:both;
}

El doble clic es solo porque al soltar el raton ya no hay ningun enlace en esa posicion. Al no moverse no hay que hacer doble clic.

Espero que con esto se solucione el problema. Ya nos diras.

Saludos!

arriaka · #3 (**permalink**) 07/04/2008, 20:06

Porcierto Bram, bienvenido al maravilloso mundo del CSS!!

Ya he visto que has hecho mas preguntas y que estas aprendiendo poco a poco como funciona todo esto.

Aunque lleves tiempo maquetando en CSS siempre hay cosas que te sorprenden. Te animo a que sigas asi, practicando. Y ya sabes, si tienes dudas o problemas aqui estamos para intentar solucionarlas.

Saludos y hasta pronto!

Bram · #4 (**permalink**) 08/04/2008, 01:53

A funcionado a la perfección! gracias.

¿la moraleja es que no puedo usar un display:table en el contenedor general?

Mikmoro · #5 (**permalink**) 08/04/2008, 02:18

display:table no funciona en IE6 y anteriores.

Mikel

PedroRodas · #6 (**permalink**) 08/04/2008, 03:30

yo nunca he usado display:table, alquien me da un ejemplo en el que sea conveniente su uso y no se pueda hacer ninguna orden alternativa? muchas gracias

Mikmoro · #7 (**permalink**) 08/04/2008, 03:55

Pues yo no sé si soy capaz de hacer esto sin display table o sin tablas directamente:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title>Tabla</title>
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
#tabla { width: 600px;
background-color: rgb(204, 204, 204);
margin-left: auto;
margin-right: auto;
display: table;
}
.celda { border: 1px solid rgb(102, 102, 102);
display: table-cell;
font-size: 0.8em;
text-align: center;
vertical-align: middle;
width: 25%;
padding-left: 5px;
padding-right: 5px;
height: 150px;
}
.fila { display: table-row;
}
</style>
</head>
<body>
<div id="tabla">
<div class="fila">
<div class="celda">una celda simulada</div>
<div class="celda">Otra celda simulada algo más
grande</div>
<div class="celda">una celda</div>
<div class="celda">una celda simulada con un trozo
más de texto que las otras
</div>
</div>
<div class="fila">
<div class="celda">una celda simulada con un trozo
más de texto que las otras para que se vea que se centra
vertical y horizontalmente</div>
<div class="celda">una celda simulada</div>
<div class="celda">Otra celda simulada algo más
grande</div>
<div class="celda">una celda</div>
</div>
</div>
</body>
</html>

Mikel.

P.D.: como ha quedado claro en el hilo, no sirve de mucho porque IE no lo entiende.