Foros del Web » Creando para Internet » CSS »

desplazamiento de capas en una tabla

Estas en el tema de desplazamiento de capas en una tabla en el foro de CSS en Foros del Web. Tengo un jpg insertado en una tabla que se encuentra centrada en el navegador. Dentro de esa tabla quiero poner capas ordenadas en zonas definidas ...
  #1 (permalink)  
Antiguo 15/11/2006, 08:11
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 17 años, 4 meses
Puntos: 0
desplazamiento de capas en una tabla

Tengo un jpg insertado en una tabla que se encuentra centrada en el navegador. Dentro de esa tabla quiero poner capas ordenadas en zonas definidas de ese jpg. el problema es que cuando lo abro en el navegador, el jpg sigue centrado en la tabla, mientras las capas kedan todas descentradas según la resolución de pantalla. Hay alguna forma de que las capas no se desplazen del lugar que se le asigne dentro de la tabla?

Por fa necesito ayuda en este sentido
  #2 (permalink)  
Antiguo 15/11/2006, 09:56
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 20 años, 6 meses
Puntos: 5
POn los codigos
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #3 (permalink)  
Antiguo 15/11/2006, 09:58
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 17 años, 4 meses
Puntos: 0
y donde están los codigos?
  #4 (permalink)  
Antiguo 15/11/2006, 10:11
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Hola renderonesio

Estarás usando HTML y Css para la tabla y las imágenes. Eso es lo que te pide fearlex que pongas, porque así, a ciegas, es casi imposible saber donde está el problema.

Saludos,
  #5 (permalink)  
Antiguo 15/11/2006, 10:14
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 20 años, 6 meses
Puntos: 5
Cita:
Iniciado por renderonesio Ver Mensaje
y donde están los codigos?
No se que editor usas, pero cualquiera que sea, tiene que tener una opcion para ver el codigo (x)html que estas creando, ademas supongo que el css tambien. Si no lo encuentras, dinos que editor usas, y nos será mas facil
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #6 (permalink)  
Antiguo 15/11/2006, 10:37
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 17 años, 4 meses
Puntos: 0
Haa perdon, comprendí mal jejeje, pensé que se referias a que pusiera los códigos para evitar ese problema.
Bueno aqui va el codigo tanto de la tabla como de la capa:

body {
background-color: #FFFFFF;
font-size: 12px;
color:#564b47;
padding:20px;
margin:0px;
text-align: center;
}

#inhalt {
text-align: left;
vertical-align: middle;
margin: 0px auto;
padding: 0px;
width: 550px;
background-color: #ffffff;
border: 1px dashed #564b47;
}

text-align: left;
padding: 0px;
border: 1px dotted #000000;
overflow: hidden;
}
p, h1 {
margin: 0px;
padding: 10px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
}

a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}
.Estilo1 {font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
}
.Estilo11 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
.Estilo5 {color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.Estilo14 {font-family: Arial, Helvetica, sans-serif}
.Estilo15 {color: #FFFFFF}
/* ]]> */
-->
</style>
</head>
<body>
<div id="inhalt">
<p align="center">
<a href="renderonesia"></a>
<!-- /Creative Commons License -->
<img src="prueba.jpg" width="975" height="565" border="0" usemap="#Map" /></p>
<div id="noticias" style="position:absolute; width:294px; height:195px; z-index:3; left: 814px; top: 376px; overflow: auto; visibility: visible;">
<div align="left">
<p align="center"><b><span style='mso-fareast-font-family:&quot;MS Mincho&quot;'>
<o:p><span class="Estilo1"><img src="vue6.jpg" alt="Vue 6" width="230" height="78" border="0" /></a></span> </o:p>
</span></b></p>
<p align="justify"><span class="Estilo1">Pre release de todas las versiones de Vue 6 disponible: </span></p>
<p align="justify" class="Estilo5">02 -11 - 2006</p>
<p align="left" class="Estilo5 Estilo11"> Por fin para los que estabamos impacientes, ya ha salido la versi&oacute;n 6 de pre lanzamiento para todos los productos Vue. Esta podr&aacute; ser descargada de la web a un precio bastante m&oacute;dico, durante todo el mes de Noviembre. Dicha oferta se acabar&aacute; el d&iacute;a 1 de Diciembre que es cuando se pondr&aacute; a la venta las versiones finales del vue 6. Para los usuarios que deseen tener el manual y los cds tendr&aacute;n que esperar a que el programa salga a la venta y por 50 $ mas se les enviar&aacute; la caja completa. Todas las versiones est&aacute;n para window y mac, pero por una extra&ntilde;a raz&oacute;n , quiz&aacute;s por puro marketing, no han sacado el Xstream para plataforma macintosh. Algo incomprensible a estas alturas </p>
<p align="left" class="Estilo5">Para mas informaci&oacute;n sobre todas las versiones del Vue 6, pincha en la imagen superior </p>
<p><b><span style='mso-fareast-font-family:&quot;MS Mincho&quot;'>
<o:p> </o:p>
</span></b></p>
</div>
</div>
<p align="center">
<map name="Map" id="Map">
<area shape="rect" coords="940,530,965,556" href="#" alt="cerrar" onclick="self.close()" /><area shape="rect" coords="939,506,965,530" href="mailto:[email protected]" alt="e-mail" />
<area shape="rect" coords="940,480,965,505" href="../index.html" alt="Inicio" />
</map>
</p>
</div>
</body>
</html>
  #7 (permalink)  
Antiguo 15/11/2006, 12:11
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 17 años, 4 meses
Puntos: 0
He subido la web al servidor, pero no puedo poner la dirección por aquí.
:(
  #8 (permalink)  
Antiguo 16/11/2006, 05:59
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 17 años, 4 meses
Puntos: 0
Soledad digame?
  #9 (permalink)  
Antiguo 16/11/2006, 10:30
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 20 años, 6 meses
Puntos: 5
POn la direccion sin el http:// o ponle espacios al H T T P : / / para poder postear la direccion aqui. Asi podemos ir directo al problema :D
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #10 (permalink)  
Antiguo 16/11/2006, 13:47
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 17 años, 4 meses
Puntos: 0
Aqui esta la dirección a ver si hay alguna solución
renderonesia.com/prueba/prueba.html
  #11 (permalink)  
Antiguo 17/11/2006, 10:55
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 20 años, 6 meses
Puntos: 5
Para empezar:

1- No repitas cada propiedad para cada uno de los lados si vas a darle el mismo valor:

Padding-top: 10px, Padding-left: 10px, Padding-right: 10px, Padding-bottom: 10px, seria lo mismo que utilizar Padding: 10px;

Se aplica para border y margin.

2- Las clases se crean para reutilizarlas, no sirve de nada crear clases iguales para poder utilizarlo en otra etiqueta cuando puedes utilizar la misma.

3-Las clases inline, se escriben con comillas, asi class="estilo1"

4-LO mejor que haces es dividir ese GRAN jpg en varios pedazos, y ponerlos como background images en los distintos divs, asi podras acomodar la pagina bien, por que de esa manera, es poco probable.

No obstante modifique tu codigo, lo mas que pude, respetando tus etiquetas, pero aun asi, si redimensionas la pagina se va a descentrar el div noticias.

Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html4...1224/loose.dtd">
<HTML xmlns="<A href="http://www.w3.org/1999/xhtml"><HEAD><TITLE>CSS">http://www.w3.org/1999/xhtml"><HEAD><TITLE>CSS TEMPLATE 11</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
BODY , html{
FONT-SIZE: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
MARGIN: 0px;
padding: 0px;
COLOR: #564b47;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;
}
#inhalt {
BORDER: #564b47 1px dashed;
PADDING: 0px;
MARGIN: 0px auto;
WIDTH: 100%;
TEXT-ALIGN: left;
}
P, h1 {
PADDING: 10px;
}
H1 {
FONT-SIZE: 11px;
TEXT-TRANSFORM: uppercase;
COLOR: #564b47;
BACKGROUND-COLOR: #90897a;
TEXT-ALIGN: right;
}
A {
FONT-SIZE: 11px;
COLOR: #ff66cc;
BACKGROUND-COLOR: transparent;
TEXT-DECORATION: none;
}
.Estilo1 {
FONT-WEIGHT: bold; COLOR: #ffffff;
}
.Estilo5 {
FONT-SIZE: 12px; COLOR: #ffffff;
}
#noticias{
LEFT: 63%;
position: absolute;
OVERFLOW: auto;
WIDTH: 294px;
TOP: 54%;
HEIGHT: 195px
}
</STYLE>
<META content="MSHTML 6.00.5730.11" name=GENERATOR></HEAD>
<BODY>
<DIV id=inhalt>
<P align=center><A href="<A href="http://www.renderonesia.com/"></A">http://www.renderonesia.com/"></A><!-- /Creative Commons License -->
<img
height=565 src="CSS%20TEMPLATE%2011_files/prueba.jpg" width=975 usemap=#Map
border=0>
<map id=Map name=Map>
<area onClick=self.close() shape=RECT
alt=cerrar coords=940,530,965,556
href="http://renderonesia.com/prueba/prueba.html#">
<area shape=RECT alt=e-mail
coords=939,506,965,530 href="mailto:[email protected]">
<area shape=RECT
alt=Inicio coords=940,480,965,505
href="http://renderonesia.com/index.html">
</map>
</P>
<DIV id=noticias>
<P align=center><B><SPAN style="mso-fareast-font-family: 'MS Mincho'"><O:P><SPAN
class="Estilo1"><A href="http://www.e-onsoftware.com/products/" target=_blank><IMG
height=78 alt="Vue 6" src="CSS%20TEMPLATE%2011_files/vue6.jpg" width=230
border=0></A></SPAN> </O:P></SPAN></B></P>
<P align=justify><SPAN class=Estilo1>Pre release de todas las versiones de Vue 6
disponible: </SPAN></P>
<P class="Estilo5" align="justify">02 -11 - 2006</P>
<P class="Estilo5" align="left">Por fin para los que estabamos
impacientes, ya ha salido la versión 6 de pre lanzamiento para todos los
productos Vue. Esta podrá ser descargada de la web a un precio bastante módico,
durante todo el mes de Noviembre. Dicha oferta se acabará el día 1 de Diciembre
que es cuando se pondrá a la venta las versiones finales del vue 6. Para los
usuarios que deseen tener el manual y los cds tendrán que esperar a que el
programa salga a la venta y por 50 $ mas se les enviará la caja completa. Todas
las versiones están para window y mac, pero por una extraña razón , quizás por
puro marketing, no han sacado el Xstream para plataforma macintosh. Algo
incomprensible a estas alturas </P>
<P class="Estilo5" align="left">Para mas información sobre todas las versiones del
Vue 6, pincha en la imagen superior </P>
<P><B><SPAN
style="mso-fareast-font-family: 'MS Mincho'"><O:P></O:P></SPAN></B></P>
</DIV>
</DIV>
</BODY>
</HTML>
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #12 (permalink)  
Antiguo 19/11/2006, 04:22
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 17 años, 4 meses
Puntos: 0
Gracias fearlex:

He seguido tu consejo de trozear esta imagen jpg en trozitos para ir poniendolos como background dentro de las diferentes tablas. Pero para el caso se da el mismo problema pero con doble trabajo. Pues si en una de esas tablas quieres anidar una capa dinámica como menú o simplemente con texto, esta volverá a desplazarse de sitio según la resolución:
Me pregunto muchas veces para que puñetas se inventaron las capas flotantes en dreamweaver si no sirven para nada ya que se descentran todas y al final un buen trabajo se te desordena todo.

  #13 (permalink)  
Antiguo 19/11/2006, 04:49
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Cita:
Iniciado por renderonesio Ver Mensaje

He seguido tu consejo de trozear esta imagen jpg en trozitos para ir poniendolos como background dentro de las diferentes tablas. Pero para el caso se da el mismo problema pero con doble trabajo. Pues si en una de esas tablas quieres anidar una capa dinámica como menú o simplemente con texto, esta volverá a desplazarse de sitio según la resolución:
Hola renderonesio,

Los contenedores posicionados de forma absoluta (capas) toman la posición que se les asgina con respecto al contenedor donde están insertados si éstos tiene asignado un tipo de posicionamiento relativo. De esa forma las capas tendran la posición siempre con respecto a donde están independientemente de dónde se coloque su contenedor padre.

Te dejo un ejemplo para ilustrarlo.

Código:
<table align="center">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td><div style="position: relative"><div style="width: 100px; height: 30px; background-color: yellow; position: absolute; left: 1px; top: 1px;">hola</div></div>d </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
Conste que el ejemplo es para ilustrarlo y para que te resulte más sencillo cambiar la alineación de la tabla usé el atributo align. Cámbialo a left y a right y verás como la capa se mantiene pegada a la celda en donde está ubicada

Cita:
Iniciado por renderonesio Ver Mensaje
Me pregunto muchas veces para que puñetas se inventaron las capas flotantes en dreamweaver si no sirven para nada ya que se descentran todas y al final un buen trabajo se te desordena todo.

No hombre, las capas flotates no se inventaron para dreamweaver si no que el programa ofrece la posibilidad de insertarlas, pero ya estaban inventadas de antes.

Un saludo
  #14 (permalink)  
Antiguo 20/11/2006, 10:58
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 20 años, 6 meses
Puntos: 5
Cita:
Iniciado por renderonesio Ver Mensaje
Gracias fearlex:

He seguido tu consejo de trozear esta imagen jpg en trozitos para ir poniendolos como background dentro de las diferentes tablas. Pero para el caso se da el mismo problema pero con doble trabajo. Pues si en una de esas tablas quieres anidar una capa dinámica como menú o simplemente con texto, esta volverá a desplazarse de sitio según la resolución:
Me pregunto muchas veces para que puñetas se inventaron las capas flotantes en dreamweaver si no sirven para nada ya que se descentran todas y al final un buen trabajo se te desordena todo.

Pero que dices, imaginate que esa imagen tan grande, no se va a demorar en cargar a muchos usuarios que no precisamente tienen un internet rapida, ademas, acomodando pequeñas cajas, te va a ser mas facil para poder acomodar todo, y que se adapte a cualquier resolucion, es solo un cosejo, si de veras quieres lograr lo que explicastes, es dificil al principio, pero una vez le cojes la vuelta, es bien facil :D
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #15 (permalink)  
Antiguo 20/11/2006, 13:48
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 17 años, 4 meses
Puntos: 0
Que va, esa imagen jpg tan solo pesa 30 kb aproximadamente, hasta con un usuario de tarifa plana la puede ver sin problemas de demora (ya lo he probado). No obstante como te comenté antes, el partir la imagen en trozitos me da el problema de que luego no puedo anidar las capas flotantes, en cada parte de la imagen sin que se me descentren.

Esa solución de trozear el jpg, está muy bien cuando se usan tablas anidadas, pero nada mas.

Por lo que veo, una capa en valor absoluto siempre será imposible de centrar independientemente de la resolución de pantalla. Por lo que tendré que plantearme la unica solución posible. Dejar la capa situada en la esquina superior izquierda del navegador (valores 0 para left y 0 para top), es ahí donde siempre se verá igual, independientemente de la resolución en pantalla que tengamos. Claro que siempre estará centrada a valores de resolución 800 x 600. Valores superiores la dejaran descentrada.

Que le vamos a hacer
  #16 (permalink)  
Antiguo 21/11/2006, 08:49
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 20 años, 6 meses
Puntos: 5
Yo no lo creo, mira el codigo y el posicionamiento que utilize en mi portfolio, y veras que si es posible.

www.fearlex.com


LO dividi en pequeñas partes, ademas donde mejor que mirar esto que en

www.csszengarden.com

Es mejor hacerlo de la manera que te digo, e incluso, el posicionamiento de capas da mas ventajas, y posibilidades que las tablas.

Bueno, es mi opinion.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
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:18.