Foros del Web » Creando para Internet » CSS »

Una cosa sencilla: ¿opiniones?

Estas en el tema de Una cosa sencilla: ¿opiniones? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/02/2008, 16:10
 
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 3 meses
Puntos: 0
Una cosa sencilla: ¿opiniones?

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!
  #2 (permalink)  
Antiguo 09/02/2008, 16:57
Avatar de aloqui  
Fecha de Ingreso: diciembre-2007
Mensajes: 973
Antigüedad: 10 años
Puntos: 24
Re: Una cosa sencilla: ¿opiniones?

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.
__________________
Grupos de Música
Pop Music Stars
  #3 (permalink)  
Antiguo 09/02/2008, 17:10
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Una cosa sencilla: ¿opiniones?

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.
__________________
No diseñes usando tablas.
  #4 (permalink)  
Antiguo 09/02/2008, 18:47
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Una cosa sencilla: ¿opiniones?

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.
  #5 (permalink)  
Antiguo 09/02/2008, 18:49
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Una cosa sencilla: ¿opiniones?

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>
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #6 (permalink)  
Antiguo 09/02/2008, 21:08
 
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 3 meses
Puntos: 0
Re: Una cosa sencilla: ¿opiniones?

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!
  #7 (permalink)  
Antiguo 10/02/2008, 02:18
Avatar de aloqui  
Fecha de Ingreso: diciembre-2007
Mensajes: 973
Antigüedad: 10 años
Puntos: 24
Re: Una cosa sencilla: ¿opiniones?

Cita:
Iniciado por juaniquillo Ver Mensaje
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.
__________________
Grupos de Música
Pop Music Stars
  #8 (permalink)  
Antiguo 10/02/2008, 06:58
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Una cosa sencilla: ¿opiniones?

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?.
  #9 (permalink)  
Antiguo 10/02/2008, 10:11
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Una cosa sencilla: ¿opiniones?

Cita:
Iniciado por aloqui Ver Mensaje
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.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #10 (permalink)  
Antiguo 10/02/2008, 10:19
 
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 3 meses
Puntos: 0
Re: Una cosa sencilla: ¿opiniones?

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!
  #11 (permalink)  
Antiguo 10/02/2008, 10:22
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Una cosa sencilla: ¿opiniones?

Hola, ¿y algo así?

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

  #12 (permalink)  
Antiguo 10/02/2008, 10:30
 
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 3 meses
Puntos: 0
Re: Una cosa sencilla: ¿opiniones?

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

Un saludo
  #13 (permalink)  
Antiguo 11/02/2008, 00:46
 
Fecha de Ingreso: diciembre-2007
Mensajes: 17
Antigüedad: 10 años
Puntos: 0
Re: Una cosa sencilla: ¿opiniones?

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...

Última edición por ricardohs; 11/02/2008 a las 01:05 Razón: Por un error al postearlo, aún no terminaba
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

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 04:58.