duda con imagen dentro de celda

manié · #1 (**permalink**) 22/03/2010, 06:16

Hola!

Estoy en mis primreos pasos con CSS y el tema en cuestion es el que tengo una tabla dentro de la cual coloqué en una celda una imagen.

Héte aquí, que pretendo queel alto de la celda ocupe la misma dimensión que la de la tabla de forma tal que la imagen que tengo en la celda quede en el borde de la tabla pero no puedo lograrlo Y la imagen me queda muy arriba...

Aquí va el código.
.celda {
background-color: #706F39;
height: 100%;
width: 100%;
}
.tabla {
background-color: #706F39;
}

No sé si soy muy clara en mi inquietud.

Gracias!
Salute!

flpms · #2 (**permalink**) 22/03/2010, 06:31

Bien vos estas haciendo lo Layout (Diseño) de la pagina com tablas?
podria poner el HTML tambíen???

manié · #3 (**permalink**) 22/03/2010, 06:53

<head>
<title>blue skies.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {display: block;}body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.celda {
background-color: #94C945;
height: 100%;
width: 100%;
}
.tabla {
background-color: #94C945;
}
</style>
<style type="text/css">td img {display: block;}</style>

</head>
<body bgcolor="#94c945">
<table border="0" cellpadding="0" cellspacing="0" width="800">

<tr>
<td><img src="img/spacer.gif" width="500" height="1" border="0" alt="" /></td>
<td><img src="img/spacer.gif" width="222" height="1" border="0" alt="" /></td>
<td><img src="img/spacer.gif" width="78" height="1" border="0" alt="" /></td>
<td><img src="img/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="3"><img name="blueskies_r1_c1" src="img/blue%20skies_r1_c1.jpg" width="800" height="197" border="0" id="blueskies_r1_c1" alt="" /></td>
<td><img src="img/spacer.gif" width="1" height="197" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3"><img name="blueskies_r2_c1" src="img/blue%20skies_r2_c1.jpg" width="500" height="453" border="0" id="blueskies_r2_c1" alt="" /></td>
<td colspan="2"><img name="blueskies_r2_c2" src="img/blue%20skies_r2_c2.jpg" width="300" height="63" border="0" id="blueskies_r2_c2" alt="" /></td>
<td><img src="img/spacer.gif" width="1" height="63" border="0" alt="" /></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="center"><img src="file:///G|/Fernando/oldphoto_partitura.jpg" width="183" height="174" /></div></td>
</tr>
</table></td>
<td><img name="blueskies_r3_c3" src="img/blue%20skies_r3_c3.jpg" width="78" height="254" border="0" id="blueskies_r3_c3" alt="" /></td>
<td><img src="img/spacer.gif" width="1" height="254" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img name="blueskies_r4_c2" src="img/blue%20skies_r4_c2.jpg" width="300" height="136" border="0" id="blueskies_r4_c2" alt="" /></td>
<td><img src="img/spacer.gif" width="1" height="136" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>

flpms · #4 (**permalink**) 22/03/2010, 07:16

Vos esta maquetando com tablas utilizando lo fireworks va tener mucho problemas en utilizar-se las CSS de esta manera. Yo recomiendo hagas lo seguinte. Primero utliza-se del xHTML. Para despues poner todas las imagem que como fondo de las etiquetas div para esto necessita utlizar-se de la propiedade CSS

Código CSS:

Ver original.div{
       background-image:url();
}

manié · #5 (**permalink**) 22/03/2010, 07:42

vale! Pero no hay manera de subsanar esto dentro del mismo código?

Simplemente estoy haciendo unas pruebillas, a modo de ejercicio...o debería plantear el tema en editores web?...

flpms · #6 (**permalink**) 22/03/2010, 08:15

es dificil decir todos los editores Web trabajaran com tablas. Lo que digo para que sea mejor és algo que yo siempre hago.

Primero yo hago las imagens en editores web. Para que tenga los fondos de la pagina en uno editor web como Fireworks o Photoshop.

Segundo hago todo lo codigo xHTML, para tener lo texto de la forma semantica.

Tercero hago lo CSS és donde tengo toda la pagina de manera correcta.

Si vos desear puedo ayudar-te a hacer desde para que aprenda lo todo.

manié · #7 (**permalink**) 22/03/2010, 08:28

Gracias! Justamente estaba pispeteando "Migración sin dolor" de Mikmoro.

Sí, me interesa la ayuda que ofreces... pero supongo, igualmente, que debe existir algún parámetro que me permita ubicar la imagen en el borde de la tabla misma y que queden en el mismo nivel...

Mientras algún ánima me ayuda, sigo instruyéndome con la migración indolora

flpms · #8 (**permalink**) 22/03/2010, 09:31

com la propiedad border vos puede hacer lo cambio de la borda de la tabla.

manié · #9 (**permalink**) 22/03/2010, 11:08

Me parece que no nos estamos entendiendo...el borde me define el estilo (punteado,fino, etc...) y yo no estoy hablando de estilo de bordes sino que lo mío es un tema de medidas...)

Gracias igualmente! Voya a fijarme en el foro de editores a ver si alguien, alguna vez, tuvo el mismo problema que yo.

Gracias d nuevo!

flpms · #10 (**permalink**) 22/03/2010, 12:07

Perdona-me. Yo no tenia comprendido la palavra Ubicar. Ahora si vos puede intentar poner asi.

Código CSS:

Ver original.celda{
     background-image:url();
     background-position:bottom;
}

manié · #11 (**permalink**) 22/03/2010, 14:59

Gracias flpms! Pero...mira...yo no deseo colocar una imagen de background sino colcocar en la celda una imagen y que la misma esté ajustada a la misma medida de la tabla y no logro que eso suceda...

flpms · #12 (**permalink**) 23/03/2010, 07:37

Perdon. Ahora yo creo que comprendo.

Código CSS:

Ver originaltd img{
    height:100&#37;;
    width:100%;
}

mira ahora si con este codigo puedo ayudar-la

manié · #13 (**permalink**) 24/03/2010, 08:47

Sigue exactamente igual

No consigo que se ajuste el borde de la celda con el de la tabla... En fin...veremos... dijo un ciego! En algún lado debo estar teniendo el corto circuito y no logro saber dónde. Chequearé la imagen a ver si está por ese lado pero...

lo dudo...

Gracias!