Como crear 3 columnas en un post, insertar imagenes en cada 1 y debajo añadir texto

JOSEG · 17 Sep 2011

Quisiera saber los codigos que debo usar en html para poder crear una especia de tabla invisible con 3 columnas para un post que quiero hacer en mi blog de blogger, añadir una imagen en cada columna y debajo de la imagen ingresar un texto, y cuando pinches en la imagen o texto te envie a una direccion url.

Aqui les dejo un ejemplo de lo que quiero:

pedro salinas · 17 Sep 2011

si no logra repuesta consultalo en vagabundia es muy fijo que en ese sitio web te puedan orientar.

Vagabundia es muy amable siempre te ayuda, si no vez repuesta aca simplemente es xq no saben, si yo supiera te diria

XYZ · 17 Sep 2011

Hola JOSEG, según lo que veo en la imagen quieres que las entradas se muestren en tres columnas ?
Te dejo un link para poder poner las entradas al estilo de magazine [link]
Saludos espero que eso era lo que buscas

roud:

Beck · 17 Sep 2011

SI no estoy mal seria algo asi
la tabla:

HTML:

<table>
<tr>
<td>
<img ...>
<div>Texto</div>
</td>
<td>
<img ...>
<div>Texto</div>
</td>
</tr>
<tr>
<td>
<img ...>
<div>Texto</div>
</td>
<td>
<img ...>
<div>Texto</div>
</td>
</tr>
<tr>
<td>
<img ...>
<div>Texto</div>
</td>
<td>
<img ...>
<div>Texto</div>
</td>
</tr>
</table>

lo Demás es css

frN13 · 17 Sep 2011

con tablas lo podes hacer facilmente, le podes border="0" para que no sea y listo.

JOSEG · 17 Sep 2011

aver, nose si es que lo hago mal o es otra cosa.

no quiero que mis post se vean asi, sino que 1 POST que quiero crear tenga dentro 3 columnas como os dejé en el primer mensaje...

y lo otro que me decis de crear una tabla el problema que se crea una imagen debajo de la otra, y nunca se ponen una al lado de otra...

kiras70 · 17 Sep 2011

HTML:

<div style="text-align:center;margin:0 auto;width:100%;">
<div style="width: 30%; float: left;margin:0px 15px 0px 15px;text-align:justify;">contenido 1</div><div style="width: 30%; float: left;margin:0px 15px 0px 0px;text-align:justify;">contenido 2</div><div style="width: 30%; float: left;margin:0px 0px 0px 0px;text-align:justify;">Contenido 3</div>
<div style="clear: both;"/>
</div>

Kilogramo · 17 Sep 2011

Lo correcto es hacer una lista, darle un ancho y flotar a la izquierda.

Insertar CODE, HTML o PHP:

<ul>
   <li>...
   <li>...
   <li>...
</ul>

li  {width: 200px; float: left}

sagaro · 18 Sep 2011

efectivo pero simple

xxxxxxxxxx

JOSEG · 18 Sep 2011

muchas gracias @sagaro eso es lo que necesitaba, pero aun tengo un problema añadele a ese codigo otro codigo por ai donde pueda poner texto debajo de cada imagen, para que vaya el texto puesto debajo de su respectiva imagen y poder pinchar en la imagen y en el texto y que te envien a una direccion URL

concurosrolex · 20 Sep 2011

pienso lo mismo