La tabla no se pone en su sitio

[Usa_Firefox]

Hola!

Como sé que el IE quiere llamar la atención y no soportar los estándares, creé una tabla en CSS para mostrar imágenes y el respectivo enlace a su pag.

Esta se ve perfectamente en los navegadores de calidad y el IE... pero tengo un problema al querer aplicar esta tabla a mi pag. Principal, ya que pongo la tabla, pero el div padre no se ajusta a su contenido... y queda esto:

Edito: El tema ha avanzado y ahora las imágenes son otras... por lo que he borrado la imagen.

Pulsa aquí para ver las nuevas....

Y yo en realidad quiero que aparezca la tabla y debajo de esta, las letras (Las que se ven en el fondo detrás de la tabla)

Código css:

Ya se ha modificado, por lo que lo he quitado....

Edito: Si no entienden mi pregunta me lo dicen y me explico mejor... es que no tenía mucho tiempo...

Pd.: El link de la pag de prueba es este: h ttp://risaydiversion.webcindario.com/Principalpr.php

No es para hacer publicidad ni nada, es para que vean cómo queda en cada navegador...


Saludos!

[Usa_Firefox]

Ya funciona... ahora se ve en FF de maravilla (seguro que en chrome, opera y otros también)... Pero ($ya_lo_sabes) en el maldito internet explorer...

En IE las imágenes salen un 50% más arriba aprox y unos 6 px más a la izquierda aprox...


Pd.: $ya_lo_sabes == NO (por si acaso no conoces a IE) ... =]

[Calizman]

Saludos!!

Eso que te sucede es por el problema que IE tiene para interpretar el margin y el padding, algunos dicen que es porque se topa con float: left / right o cosas similares...

Sea como sea, a nosotros no nos interesa porque sucede, sino como se soluciona cierto?

Para eso, te dejo un articulo que te ayudara... Modelo de Caja IE6

Hasta Luego!!

[Usa_Firefox]

Gracias por tu respuesta...

Ya había leído este tema en alguna ocasión... pero no sé donde poner exactamente el hack en el css... y con qué dimensiones...

Saludos!

Edito: Calizz, me gusta tu sitio, pero duelen un poco los ojos de verlo XD... aunque mu chulo de veras

[Calizman]

Gracias!! Duelen los ojos? Porque lo dices?!? Muchos colores?!

Si ahora que tenga mas tiempo libre, le hare un rediseño...

Tengo unas semanas de estrenarlo y ya pienso en rediseñarlo... :

[Usa_Firefox]

Hombre... no lo decía con esa intención... está muy bien... la parte de arriba perfecta....

En el cuerpo... las tablas.... podrías hacer que la tabla aparezca solo al pulsar en el título (el rectangulito que sale en el lado con el texto).... o ponerlas con un color más oscuro y hacer que este recupere su estado cuando se haga clic ahí donde te dije... pero bueno... yo quería saber si puedes ayudarme a esto de la tabla...

Saludos!

[Calizman]

Pues... Gracias por las sugerencias, las tomare en cuenta...

Pero, no habias resuelto ya tu problema?

[Usa_Firefox]

No, lo había resuelto para firefox... pero en IE salían movidas las imágenes... y me diste eso...

En FF o uotro (normal)


Navegadores tontos (Versiones IE)


Pero no sé cómo poner el hack:

-Dimensiones

Saludos


El css es este:

div.filaatablamenu{
float:left;
width:100%;
height:76px;
margin:0;
}
div.filabtablamenu{
float:left;
width:100%;
height:30px;
margin:0;
}
div.columnatablamenua{
margin-top:3px;
margin-left:4px;
margin-bottom:3px;
float:left;
padding-right:3px;
height:70px;
width:76px;
border-right:1px;
border-right-style:solid;
border-right-color:#CCCCCC;
}
div.columnatablamenub{
margin:3px;
float:left;
text-align:center;
width:77px;
}

Las imgs son de 70x70

Saludos!

[Calizman]

Jmm... pense que era una lista de objetos... y si lo intentas asi?!

Ejemplo:
<div id="menu">
<ul>
<li><img scr="imagen1.jpg" /></li>
<li><img scr="imagen2.jpg" /></li>
<li><img scr="imagen3.jpg" /></li>
<li><img scr="imagen4.jpg" /></li>
<li><img scr="imagen5.jpg" /></li>
</ul>
</div>
Y el CSS lo haces asi:

#menu ul {
width: 100%;
display: block;
height: 150px;
}
#menu li {
float: left;
margin: 5px;
width: 70px;
height: 70px;
}

Intentalo, y me dices como te va Por los MP no hay problema... solo que igual el foro me envia un mail cada vez que contestas, pero si quieres seguir con los MP, no hay ningun problema

[Usa_Firefox]

Gracias... Pero no es lo que buscaba (aunque se ve igual en todos los navegadores )

Con lo que me diste sale esto:


Y quiero algo lo más parecido posible a:


Saludos!!

[Calizman]

Jmm... no entonces no lo has hecho bien.

Sale asi, porque no has puesto en #menu li { float: left; } y en #menu ul { display: block; )

Si lo pones como te digo, los elementos se alinean horizontalmente. Eso funciona mejor que divs individuales...

[Usa_Firefox]

Ya funciona gracias.... es que había otro div que se llama menu, y lo que he hecho es cambiarle el nombre a menuimg y ya va...

Pero una cosa:

¿Có quito los puntitos negros y pongo el texto debajo? ¿como la imagen anterior?

Saludos

[Calizman]

Los puntitos los quitas con el #menu li { display: block }

Y las letras abajo, simplemente comienzas a escribir y creas un class para el texto, por ejemplo:

.menutext {
position: relative;
margin-top: 50px;
}

y todo entero te quedaria asi:

<ul>
<li><img src /><a href="adondevalla.html" class="menutext">loquesea</a></li>
<li><img src /><a href="adondevalla.html" class="menutext">loquesea</a></li>
<li><img src /><a href="adondevalla.html" class="menutext">loquesea</a></li>
<li><img src /><a href="adondevalla.html" class="menutext">loquesea</a></li>
</ul>

Asi se me ocurre a mi, posiblemente pueda venir otra persona y darte una forma mejor... no lo se

Tambien tienes la opcion de hacer dos listas una con las imagenes y otra con los links, seria una mejor idea creo... el todo es tener la creatividad para hacerlo

[Usa_Firefox]

Ya está casi perfecto...

Solo 1 fallo:

tengo esto:

.menutexto{
margin-top:40px;
text-align:center;
}

Ejemplo de un <li>

<li>imagen<a href="link" class="menutexto">Ir</a></li>

Pero en IE el texto este sale detrás de la imagen... y en FF, no sale a 40px, sale justo debajo, y alineado en left... Saludos

[Calizman]

Jmm... eso esta dificil, pero podrias poner imagenes de como se ve? Esque asi veo que es lo que estas haciendo, y por ultimo pon tu codigo CSS de esa seccion para ver que podemos cambiarle.

Por cierto, nada de crack, nada mas comparto lo poco que aprendo

[Usa_Firefox]

Jaja... Ok

Bueno, aquí dejo imágenes desde FF y desde IE

FF


IE 8


El css: (hoja de estilo externa)

/*Imágenes de la p principal donde aparecen diferenctes servicios */
div.menulin ul {
width: 100%;
display: block;
height: 150px;
}
div.menulin li {
display: block;
float: left;
margin: 5px;
width: 70px;
height: 70px;
}
.menutexto{
margin-top:40px;
text-align:center;
}

.menutexto a:hover{
color:#FF9933;
}

Por cierto: No funciona el hover... cuando se pone encima el ratón (en cualquier navegador), no hace nada

Bueno, el código en la web de prueba es este:

Código HTML:

 <div class="menulin">
<ul>
<li><img title="Enlazar" height="70" width="70" src="/imagenes/servicios/enlazar.jpg" /><a href="/enlazar.php" class="menutexto">Enlazar</a></li>
<li><img title="Test" height="70" width="70" src="/imagenes/servicios/test.jpg" /><a href="/otros/test.php" class="menutexto">Test</a></li>
<li><img title="Noticias" height="70" width="70" src="/imagenes/servicios/noticia.jpg" /><a href="/servicios/noticias/allnoticias.php" class="menutexto">Noticias</a></li>
<li><img title="SMS" height="70" width="70" src="/imagenes/servicios/sms.jpg" /><a href="/servicios/sms/smsgratis.php" class="menutexto">SMS</a></li>
<li><img title="Chistes" height="70" width="70" src="/imagenes/servicios/chtexto.jpg" /><a href="/chistes/texto/chistestexto.php" class="menutexto">Chistes</a></li>
<li><img title="Chistes" height="70" width="70" src="/imagenes/servicios/chgraficos.jpg" /><a href="/chistes/graficos/humorgrafico.php" class="menutexto">Test</a></li>
<li><img title="Más" height="70" width="70" src="/imagenes/servicios/mas.gif" /><a href="/menu.php" class="menutexto">M&aacute;s</a></li>
</ul>
</div> 

Saludos

[Calizman]

Primero:

El hover no funcionara hasta que no pongas primero .estilo a { } y luego .estilo a:hover { }

Tienes que tener muuy en cuenta el orden de los links, de lo contrario posiblemente no funcione algo de ello...

Se me ocurre esto, y seguramente funcionara!

CSS:

.menu img {
width: 70px;
height: 70px;
float: left;
}

Y luego solo graduas los px de el top-margin del texto, con eso se tendria que solucionar todo el problema...

[Usa_Firefox]

Fuhh... lo siento... pero sigue igual

Este es el código en el css:
/*Imágenes de la p principal donde aparecen diferenctes servicios */
div.menuprincipaldiv{height:150px;margin:3px;}

.menuprincipal ul {
width: 100%;
display: block;
height: 150px;
}
.menuprincipal li {
display: block;
float: left;
margin: 5px;
width: 70px;
height: 150px;
}
.menuprincipaltext{
margin-top:40px;
text-align:center;
}

.menuprincipaltext a{color:#3399CC;}

.menuprincipaltext a:hover{color:#FF9933;}

Y en el html:

Código HTML:

 <div class="menuprincipaldiv">
<ul class="menuprincipal">
<li><img title="Enlazar" height="70" width="70" src="/imagenes/servicios/enlazar.jpg" /><a href="/enlazar.php" class="menuprincipaltext">Enlazar</a></li>
<li><img title="Test" height="70" width="70" src="/imagenes/servicios/test.jpg" /><a href="/otros/test.php" class="menuprincipaltext">Test</a></li>
<li><img title="Noticias" height="70" width="70" src="/imagenes/servicios/noticia.jpg" /><a href="/servicios/noticias/allnoticias.php" class="menuprincipaltext">Noticias</a></li>
<li><img title="SMS" height="70" width="70" src="/imagenes/servicios/sms.jpg" /><a href="/servicios/sms/smsgratis.php" class="menuprincipaltext">SMS</a></li>
<li><img title="Chistes" height="70" width="70" src="/imagenes/servicios/chtexto.jpg" /><a href="/chistes/texto/chistestexto.php" class="menuprincipaltext">Chistes</a></li>
<li><img title="Chistes" height="70" width="70" src="/imagenes/servicios/chgraficos.jpg" /><a href="/chistes/graficos/humorgrafico.php" class="menuprincipaltext">Test</a></li>
<li><img title="Más" height="70" width="70" src="/imagenes/servicios/mas.gif" /><a href="/menu.php" class="menuprincipaltext">M&aacute;s</a></li>
</ul>
</div> 

Bueno... en FF se ve igual que en la imagen anterior (el a:hover sigue sin funcionar)... EN el IE 8 no lo sé, ya que he formateado el ordenador y me trae el 6... pero en este hace algo muy extraño...

El texto sale unos 50 o 60 px más debajo de la imagen y al poner el ratón encima, la imagen se pega al texto...

Saludos!

[Calizman]

Haber haber amigo... lamento decir que esto se ha alargado demasiado y creo que nos salimos del tema inicial... Con gusto te sigo ayudando, pero tambien me gustaria que pusieras mas de tu parte, yo realmente no estoy aqui para solucionarte todos tus problemas, puedo guiarte y puedo orientarte, pero al final de todo el que tendra que solucionar los problemas, aprender e investigar, seras tu.

Escribe esto en el CSS:

.menuprincipal li img {
width: 70px;
height: 70px;
float: left;
}

Esto va en el CSS no en el ul! sirve para que le de un ancho y un alto a las imagenes y las tome como si fueran un div mas. Seguramente si aplicas eso, te solucionara muchos problemas.

Con lo de ie6 es obvio que iba a pasar... para eso, investiga un poco sobre el Modelo de Caja de IE6 y sus condicionales... Eso te servira bastante para que tu web se vea bien en IE6...

Ahora si, Hasta Luego!!

[Usa_Firefox]

Gracias calizzz...

Ya funciona!