[SOLUCIONADO] Atributo position

guncamp · #1 (**permalink**) 20/06/2013, 19:46

El código que tengo es este
<body style="background-color:#FEF0DB">
<table style="width:100%">
<tr>
<td style="width:25%"><img src="images/logo-4life.jpg" alt="4Life" title="4Life" width="400" height="179" style="float:right" /></td>
<td style="width:75%; font-size:22px"><img src="images/carrusel-1.jpg" width="99%">
<p style="text-align:center; position:relative; top:5%"><b>Obtén la promoción del mes</b></p></td></tr>
</table>
<br /><br />
<table style="width:100%; font-size:14px">
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>

Entonces mi problema es que al principio de la pagina tengo una tabla con dos celdas. En la segunda celda quise poner una imagen y un parrafo que se posicione relativamente a partir de la etiqueta padre "td" dentro de la cual esta y queria que se posicionara relativamente a 5% del top. Osea... si yo en vez de poner 5% hubiera puesto 50px, el parrafo se posicionaria segun yo a 50px de la porte superior de la pagina en relacion a la etiqueta padre td. Pero yo no quiero especificar pixeles, no dare explicaciones de por que, simplemente no quiero poner pixeles, quiero poner porcentajes, pero supongamos que lo que yo lo quiero dar a entender al navegador es que del 100% de altura de la pantalla, posicione "Obten la promocion de este mes" a 5% de distancia desde la parte superior. Mi verdadera intencion es que ese texto quedara encima de la imagen para que se viera mas profesional (y aunque lo lograria expresandolo en pixeles) no logro entender como hacer para que del 100% de altura, se ponga a 5% desde "top".
Muchas gracias al que me pueda responder.

guncamp · #2 (**permalink**) 20/06/2013, 19:47

La segunda tabla que ven ustedes en mi código tiene 8 celdas, pero si se preguntan qué es, es simplemente la tabla que voy a usar como barra de navegacion

root32 · #3 (**permalink**) 21/06/2013, 12:30

Te recomiendo que ya no uses tablas, y que pruebes a maquetar con HTML5 y CSS únicamente y te funcionara de mejor manera.

pzin · #4 (**permalink**) 22/06/2013, 09:56

Tal como tienes hecha la web, sólo podrías hacerlo usando JavaScript.

Y como ya te han dicho, lo de las tablas, que no están hechas para diseñar/estructurar una página, sólo para mostrar datos tabulados.

guncamp · #5 (**permalink**) 24/06/2013, 11:48

wow gracias por sus sabios consejos amigos. tratare de aprender a dejar de diseñar con tablas y mejor con css y html5 pero voy poco a poco :D!
me compre un libro de JavaScript que mide 695 paginas y voy como en la 360, si se algo de JavaScript, no soy novato en JavaScript, les agradecería mucho si alguno de ustedes pudiera decirme como podría hacer para indicarle esto al navegador:
"quiero que esta imagen me la posiciones a 5% de distancia de la parte de arriba del 100% de la altura"

guncamp · #6 (**permalink**) 24/06/2013, 11:49

¿Cómo se haría?

#7 (**permalink**) 25/06/2013, 19:16

Hola! Para serte sincero me costó entender lo que querés.

De todas maneras, he hecho esto: http://jsfiddle.net/WqW2u/1/

¿Es lo que querés?

Utilicé la siguiente estructura (ya que como bien dijeron los chicos más arriba, no es recomendable usar tablas para armar la estructura de una página, sólo sirven para datos tabulados. Si querés, podés conseguir el mismo efecto que las tablas y usar las mismas propiedades utilizando display: table;):

Código HTML:

<figure id="one">
    <span id="text-one">Esta es una imagen abstracta</span>
    <img class="image" src="http://lorempixel.com/200/200/abstract" />
</figure>

Acá está el CSS

Código:

body, figure, span, img {
    margin: 0;
    padding: 0;
}

html, body { height: 100%; }

figure {
    padding: 0 2em 2em;
    border: 1px solid black;
}

figure,
figure > * { float: left; }

img { clear: left; }

span {
    margin-top: 5%;
}

Si querés posicionar el texto 5% más abajo de la parte superior del contenedor, ¿por qué no usar margin-top: 5%? (si es que entendí a lo que querés llegar).

Ahora, si querés el texto abajo usá figcaption:

http://jsfiddle.net/wxtU6/1/

Usar padding-top: 5% en este caso tiene la misma finalidad.

Cualquier cosa que esto no sea lo que querés, no dudés en decirme.

Un saludo,
Leo!

guncamp · #8 (**permalink**) 04/07/2013, 21:04

¡muchas gracias a todos! especialmente a ti Leonardo_Manrique por tomarte la molestia de escribir todo eso :)