Una cosa sencilla: ¿opiniones?

[coke_135]

Hola:

Estaba hoy haciendo un diseño y me encontré como muchas otras veces, con una situación que no resulta difícil de resolver, pero que no tengo una forma sistemática de hacerlo. Depende de como me haya levantado ese día xD.

Me refiero a una cosa parecida a esta:

......<img>.............<img>.............<img>
....<Titulo>...........<Titulo>..........<Titulo>
<Descripcion> <Descripcion> <Descripcion>

¿Cómo soléis resolverlo, ajustandoos a los estándares al máximo y usando XHTML+CSS?

¿3 listas flotantes con 3 elementos? ¿div con margenes entre elementos <img> en la primera linea y spans o similares en las otras?

Claro está, no vale poner &nbsp; y <br> ;).

¡Un saludo!

[aloqui]

Pues para eso, aunque se que no está de moda, yo suelo usar una simple tabla de una fila y tres columnas. Y una clase CSS para los atributos del elemento TD: Centrado, padding, etc.

[hades87]

podrías hacer 3 columnas con css, con float right lef y la del medio con nada, y dentro de cada una de esas hacer 3 divisiones mas para poner imagen, titulo y descripción.

[Eourus]

Vamos algo asi:

<div style="float:left; width:100px; margin-right:10px; text-align:center;">
imagen
<br>
titulo
<br>
descripción
</div>

PD: Logicamente cambia las medidas.

[juaniquillo]

yo no usaría una tabla ya que la organización de la información no es tabular en este caso, osea, que la información esta organizada en columnas no en lineas. Yo lo que hago en estos caso es usa un <ul> con divs dentro de los <li> y luego le doy un float:left a los <li>

[coke_135]

Gracias por vuestras opiniones.

Eorus, los <br> no deben usarse, menos aún en XHTML, así que aunque válida, tu opción no sería correcta ;).

aloqui, como bien dice juaniquillo el uso de una tabla no es apropiado en este caso. Gracias igualmente :).

La opción de juaniquillo de las listas es la que he usado alguna vez y creo que es la más correcta.

¡Un saludo!

[aloqui]

Iniciado por juaniquillo

yo no usaría una tabla ya que la organización de la información no es tabular en este caso, osea, que la información esta organizada en columnas no en lineas. Yo lo que hago en estos caso es usa un <ul> con divs dentro de los <li> y luego le doy un float:left a los <li>

Pues no estoy de acuerdo, para mí la información si que es tabular.
Como dije en mi anterior post, no una tabla de 9 celdas, sino una tabla de una fila y 3 columnas (es decir 3 celdas) en las que poner 3 elementos en cada una.
En cada celda el contenido si se puede tratar con listas.

Si he entendido bien, la solución que propones es de tres <li>, con tres <div> en cada <li>
Pero imagínate que quieres poner lo siguiente:

....<Titulo>...........<Titulo>..........<Titulo>
.....<img>.............<img>.............<img>
<Descripcion> <Descripcion> <Descripcion>

Si las tres imágenes tuvieran distinta altura, digamos por ejemplo 50px, 100px y 200px. En mi opinión con el método de las listas el resultado sería bastante feo ya que o bien el titulo, o bien la descripción (o bien ambos) de las imágenes menores quedarían lejos de la imagen que describen.

[Eourus]

Coke, ¿donde has leido que no deben usar "<br>"?. Vamos que yo sepa es parte del estándar y se usan para meter un salto de línea.

Obviamente si los quiero meter en xhtml pondría "<br />".

¿Tienes algún enlace de algún sitio oficial que me confirme lo que tu dices?.

[juaniquillo]

Iniciado por aloqui

Pues no estoy de acuerdo, para mí la información si que es tabular.
Como dije en mi anterior post, no una tabla de 9 celdas, sino una tabla de una fila y 3 columnas (es decir 3 celdas) en las que poner 3 elementos en cada una.
En cada celda el contenido si se puede tratar con listas.

Si he entendido bien, la solución que propones es de tres <li>, con tres <div> en cada <li>
Pero imagínate que quieres poner lo siguiente:

....<Titulo>...........<Titulo>..........<Titulo>
.....<img>.............<img>.............<img>
<Descripcion> <Descripcion> <Descripcion>

Si las tres imágenes tuvieran distinta altura, digamos por ejemplo 50px, 100px y 200px. En mi opinión con el método de las listas el resultado sería bastante feo ya que o bien el titulo, o bien la descripción (o bien ambos) de las imágenes menores quedarían lejos de la imagen que describen.

Pues ahora veo que tú eres el que no me has entendido. Entiendo lo que dices decir sobre información tabular, pero lamentablemente, que yo sepa, en XHTML sólo se puede organizar la informacion en lineas, no en columnas, por ejemplo:

Código HTML:

<tbody>
   <tr>
      <th id="t1">Name</th>
      <th id="t2">Cups</th>
      <th id="t3" abbr="Type">Type of Coffee</th>
      <th id="t4">Sugar?</th>
   </tr>
   <tr>
      <td headers="t1">T. Sexton</td>
      <td headers="t2">10</td>
      <td headers="t3">Espresso</td>
      <td headers="t4">No</td>
   </tr>
   <tr>
      <td headers="t1">J. Dinnen</td>
      <td headers="t2">5</td>
      <td headers="t3">Decaf</td>
      <td headers="t4">Yes</td>
   </tr>
</tbody> 

(Este es un ejemplo que saco del website página de la W3C:
http://www.w3.org/TR/2004/WD-xhtml2-...od-tables.html)

Osea, que la información debe estar oganizada así:

<Titulo header>.....<img header>.....<Descripcion header>
<Titulo 1>............<img 1>.............<Descripcion1>

Yo no digo que la opción que yo ofrezco es la única opción de hacer lo que coke_135 quiere hacer, ni siquiera que es la mejor forma de hacerlo, pero yo creo que es una buena opción, valida perfectamente y, si dominas CSS, puedes logar los resultados que quieres.

[coke_135]

Eorus, no tengo mucho tiempo de buscar ahora, pero por ejemplo puedes leer en este enlace que la etiqueta <br> será excluida de XHTML 2.0 (por algo será, ¿no? ;D). La cuestión es que los saltos de linea solo deben usarse para romper el flujo de texto de un párrafo por ejemplo, y no para separar contenidos diferentes como en este caso, ya que una cosa sería el título, y otra la descripción.

No obstante, busca por Google que seguro que algo te sale. Yo lo he leído más de una vez en sitios ingleses y españoles.

aloqui, sigo pensando que el uso de una tabla en este caso no es adecuado. Estamos usando la tabla con el fin de conseguir un diseño determinado, y no con la idea de mostrar datos de forma ordenada y relacionada. Yo en esos casos siempre me hago la misma pregunta: ¿podría mostrar un borde de 1px en la tabla? Si pienso que si, que el borde podría mostrarse, la tabla es adecuada. Si creo que el borde "sobra", significa que estoy usando la tabla por cuestiones estéticas y no tabulares.

¡Un saludo!

[kahlito]

Hola, ¿y algo así?

http://www.desarrolloweb.com/articulos/2343.php
http://www.desarrolloweb.com/articul...as/index2.html

[coke_135]

Gracias kahlito. Es la opción de juaniquillo elaborada y que pienso sería la más adecuada en este caso.

Un saludo

[ricardohs]

Que tal amigos, saludos...

Yo no estoy muy de acuerdo con usar tablas a estas alturas. Las tablas son pesadas y hacen que las páginas se carguen mucho más lento que si lo hacemos con divs. Las tablas son única y exclusivamente para mostrar datos tabulados, como estadísticas y chorizotes largos. Para eso están los divs con sus respectivos floats..

Yo propongo que para ese diseño:

HTML:

Código:

<html>
<head>
<title>Tres columnas </title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
	<div id="header">
		<h1>Cabecera</h1>
	</div>
	<div id="left">
		<div id="col_1">
			<h1>Título</h1>
			<img src="imagen.jpg" alt="imagen" />
			<p>Descripcion</p>
		</div>
		<div id="col_2">
			<h1>Título</h1>
			<img src="imagen.jpg" alt="imagen" />
			<p>Descripcion</p>
		</div>
	</div>
	<div id="right">
		<h1>Título</h1>
		<img src="imagen.jpg" alt="imagen" />
		<p>Descripcion</p>
	</div>
	<div id="footer">
		<h1>Pie</h1>
	</div>
</div>
</body>
</html>

CSS:

Código:

* {
	margin:0;
	padding:0;
	}
body {
	text-align:center; /*Para que el div #container se centre en IE*/
	}
div#container {
	width:756px;
	margin:0 auto;
	}
	div#header {
		border:1px solid #000;
		}
	div#left {
		float:left;
		}
		div#col_1 {
			float:left;
			width:250px;
			border:1px solid #000;
			}
		div#col_2 {
			float:left;
			width:250px;
			border:1px solid #000;
			}
	div#right {
		float:right;
		width:250px;
		border:1px solid #000;
		}
	div#footer {
		border:1px solid #000;
		}

Yo te recomiendo algo así, eso de usar tablas es de años pasados, es mejor que te vayas acostumbrando a los estándares más nuevos, saludos y espero que te sirva...