Foros del Web » Creando para Internet » CSS »

La tabla no se pone en su sitio

Estas en el tema de La tabla no se pone en su sitio en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/04/2009, 14:47
(Desactivado)
 
Fecha de Ingreso: abril-2009
Ubicación: En mi casa
Mensajes: 191
Antigüedad: 8 años, 8 meses
Puntos: 0
Pregunta La tabla no se pone en su sitio

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!

Última edición por Usa_Firefox; 21/04/2009 a las 15:55 Razón: Ya lo he puesto en el tema
  #2 (permalink)  
Antiguo 20/04/2009, 12:49
(Desactivado)
 
Fecha de Ingreso: abril-2009
Ubicación: En mi casa
Mensajes: 191
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: La tabla no se pone en su sitio

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) ... =]
  #3 (permalink)  
Antiguo 20/04/2009, 13:48
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: La tabla no se pone en su sitio

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!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #4 (permalink)  
Antiguo 20/04/2009, 14:11
(Desactivado)
 
Fecha de Ingreso: abril-2009
Ubicación: En mi casa
Mensajes: 191
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: La tabla no se pone en su sitio

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
  #5 (permalink)  
Antiguo 20/04/2009, 15:46
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: La tabla no se pone en su sitio

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... :
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #6 (permalink)  
Antiguo 21/04/2009, 09:11
(Desactivado)
 
Fecha de Ingreso: abril-2009
Ubicación: En mi casa
Mensajes: 191
Antigüedad: 8 años, 8 meses
Puntos: 0
De acuerdo Respuesta: La tabla no se pone en su sitio

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!
  #7 (permalink)  
Antiguo 21/04/2009, 13:40
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: La tabla no se pone en su sitio

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

Pero, no habias resuelto ya tu problema?
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #8 (permalink)  
Antiguo 21/04/2009, 15:45
(Desactivado)
 
Fecha de Ingreso: abril-2009
Ubicación: En mi casa
Mensajes: 191
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: La tabla no se pone en su sitio

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!

Última edición por Usa_Firefox; 21/04/2009 a las 15:52 Razón: Añado las imágenes de muestra
  #9 (permalink)  
Antiguo 21/04/2009, 17:46
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: La tabla no se pone en su sitio

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
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #10 (permalink)  
Antiguo 22/04/2009, 09:02
(Desactivado)
 
Fecha de Ingreso: abril-2009
Ubicación: En mi casa
Mensajes: 191
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: La tabla no se pone en su sitio

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!!
  #11 (permalink)  
Antiguo 22/04/2009, 12:20
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: La tabla no se pone en su sitio

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...
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #12 (permalink)  
Antiguo 22/04/2009, 13:42
(Desactivado)
 
Fecha de Ingreso: abril-2009
Ubicación: En mi casa
Mensajes: 191
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: La tabla no se pone en su sitio

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
  #13 (permalink)  
Antiguo 22/04/2009, 13:52
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: La tabla no se pone en su sitio

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
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #14 (permalink)  
Antiguo 22/04/2009, 14:29
(Desactivado)
 
Fecha de Ingreso: abril-2009
Ubicación: En mi casa
Mensajes: 191
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: La tabla no se pone en su sitio

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
  #15 (permalink)  
Antiguo 22/04/2009, 15:23
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: La tabla no se pone en su sitio

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
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #16 (permalink)  
Antiguo 23/04/2009, 08:37
(Desactivado)
 
Fecha de Ingreso: abril-2009
Ubicación: En mi casa
Mensajes: 191
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: La tabla no se pone en su sitio

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
  #17 (permalink)  
Antiguo 23/04/2009, 17:50
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: La tabla no se pone en su sitio

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...
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #18 (permalink)  
Antiguo 24/04/2009, 08:59
(Desactivado)
 
Fecha de Ingreso: abril-2009
Ubicación: En mi casa
Mensajes: 191
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: La tabla no se pone en su sitio

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!
  #19 (permalink)  
Antiguo 24/04/2009, 15:45
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: La tabla no se pone en su sitio

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!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #20 (permalink)  
Antiguo 26/04/2009, 04:15
(Desactivado)
 
Fecha de Ingreso: abril-2009
Ubicación: En mi casa
Mensajes: 191
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: La tabla no se pone en su sitio

Gracias calizzz...

Ya funciona!
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 07:40.