Foros del Web » Creando para Internet » CSS »

Ayuda - Float y cambio de altura

Estas en el tema de Ayuda - Float y cambio de altura en el foro de CSS en Foros del Web. Saludos, Estoy intentando crear una tabla para mostar los temas de mi foro utilizando CSS, en lugar de tablas html. Mi problema es que tengo ...
  #1 (permalink)  
Antiguo 19/03/2010, 12:32
 
Fecha de Ingreso: octubre-2007
Mensajes: 9
Antigüedad: 10 años, 1 mes
Puntos: 0
Ayuda - Float y cambio de altura

Saludos,

Estoy intentando crear una tabla para mostar los temas de mi foro utilizando CSS, en lugar de tablas html.

Mi problema es que tengo que fijarle una altura fija al div para que se muestre correctamente, de lo contrario se desordena el contenido. No me es práctico tener una altura fija ya que el contenido puede variar y no se va a mostar como se debe.

Ejemplo de cómo de ve

Utilizando un HEIGHT de 60px


Sin utilizar HEIGHT fijo


Utilizando HEIGHT 30px


Código que utilizo
CSS:

Código:
#foro-temasContenedor {
	font-family: Arial;
	font-size: 12px;
	margin: 0px auto 10px auto;
	text-align: left;
	width: 780px;
}

/****************************************************************************************/
/* Cabecera de los temas */
#foro-temasCabecera {
	text-align: center;
	background-color:#666;
	color:#FFF;
	height:15px;
}

#foro-temasIcono {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 30px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaTema {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 290px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaRespuestas {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 80px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaVistas {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 60px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaCreado {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 150px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaUltimaRespuesta {
	float:left;
	width: 150px;
}

/* Temas */
#foro-temasLista {
	padding: 3px 0px 3px 0px;
	text-align:center;
	color:#000;
	height: 30px;
}

#foro-temasLista p{
	padding-bottom: 20px;
	padding-top: 0px;
	margin: 2px 0px 2px 0px;
}

#foro-temasLista a {
	font-weight: bold;
	text-decoration: none;
	color: #369;
}

.claro {
	background-color:#E5E5E5;
}

.oscuro {
	background-color:#CDCDCD;
}

.izquierda {
	text-align: left;
}

.pequeño {
	font-size: 10px;
}
HTML

Código HTML:
<div id="foro-temasContenedor">
  <div id="foro-temasCabecera">
  	<div id="foro-temasIcono">&nbsp;</div>
    <div id="foro-temaTema">Tema</div>
    <div id="foro-temaRespuestas">Respuestas</div>
    <div id="foro-temaVistas">Vistas</div>
    <div id="foro-temaCreado">Creado</div>
    <div id="foro-temaUltimaRespuesta">Ultima respuesta</div>
  </div>
 
  <div id="foro-temasLista" class="oscuro" >
  	<div id="foro-temasIcono"><p>[X]</p></div>
    <div id="foro-temaTema" class="izquierda"><p><a href="a">El primero tema de la categoria 2, con texto para llenar la segunda línea</a></p></div>
    <div id="foro-temaRespuestas"><p>0</p></div>
    <div id="foro-temaVistas"><p>0</p></div>
    <div id="foro-temaCreado" class="pequeno"><p>17/03/2010, 06:35:57 PM</p></div>
    <div id="foro-temaUltimaRespuesta" class="pequeno"><p>17/03/2010, 06:35:57 PM</p></div>
  </div>
 
  <div id="foro-temasLista" class="claro" >
  	<div id="foro-temasIcono"><p>[X]</p></div>
    <div id="foro-temaTema" class="izquierda"><p><a href="a">Otro para la 2</a></p></div>
    <div id="foro-temaRespuestas"><p>0</p></div>
    <div id="foro-temaVistas"><p>0</p></div>
    <div id="foro-temaCreado" class="pequeno"><p>17/03/2010, 06:36:03 PM</p></div>
    <div id="foro-temaUltimaRespuesta" class="pequeno"><p>17/03/2010, 06:36:03 PM</p></div>
  </div>
 
</div> 
He intentado de varias maneras pero no logro que la "columna" se expanda hacia abajo con el texto.

Agradecería cualquier ayuda, tengo poca experiencia con CSS y me gustaría aprender a resolver este tipo de problemas.

Gracias de antemano
  #2 (permalink)  
Antiguo 19/03/2010, 12:55
 
Fecha de Ingreso: marzo-2009
Ubicación: Santo André - São Paulo - Brasil
Mensajes: 91
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Ayuda - Float y cambio de altura

Lso datos son datos en tablas. Segun la web semantica nos es error crear una pagina con tablas desde que los datos sean datos tablados.
entonces haga com tablas esto.
  #3 (permalink)  
Antiguo 19/03/2010, 12:57
 
Fecha de Ingreso: octubre-2007
Mensajes: 9
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Ayuda - Float y cambio de altura

Gracias flpms,

Estoy considerando hacerlo con tablas, pero de todas maneras me gustaría saber cual es mi error con el css o cúal sería la manera adecuada de hacerlo.

  #4 (permalink)  
Antiguo 19/03/2010, 13:23
 
Fecha de Ingreso: febrero-2008
Mensajes: 38
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Ayuda - Float y cambio de altura

Las tablas se usan para mostar datos en forma de tablas y un foro casi por definicion tiene forma de tabla, asi que es lo que debes usar.

Puedes probar un min-height o incluso clear ( que me perdone alguien que igual con lo de clear la estoy metiendo hasta el fondo, es solo una idea )
  #5 (permalink)  
Antiguo 19/03/2010, 14:50
 
Fecha de Ingreso: octubre-2007
Mensajes: 9
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Ayuda - Float y cambio de altura

Trypat,

El min-height me da el mismo resultado.
El clear si me ayudó a que no se vea desordenado el texto, pero de todas maneras el fondo de las filas no se ve bien.


Así se ve en FireFox

Vi la guía de migración a XHTML+CSS en este foro y me llamó la atención de la idea de poder hacerlo sin tener que usar tablas. Entiendo que por el tipo de información está bien mostrarlo como una tabla, pero quisiera aprender más.

Saludos y gracias
  #6 (permalink)  
Antiguo 19/03/2010, 16:36
 
Fecha de Ingreso: marzo-2009
Ubicación: Santo André - São Paulo - Brasil
Mensajes: 91
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Ayuda - Float y cambio de altura

Para que vos pueda conocer mejor intentas lo sitio zen-garden.
Y tambien lo sitio arudi.net para que puedas tener las sugestiones del CSS
  #7 (permalink)  
Antiguo 19/03/2010, 16:47
Avatar de CraToS  
Fecha de Ingreso: diciembre-2008
Ubicación: Alajuela, CR
Mensajes: 24
Antigüedad: 9 años
Puntos: 0
Respuesta: Ayuda - Float y cambio de altura

Ojo esto aviacioncr, te puede servir:

http://extensions.joomla.org/extensions/external-contents/news-a-feeds/rss-readers
  #8 (permalink)  
Antiguo 19/03/2010, 18:59
 
Fecha de Ingreso: octubre-2007
Mensajes: 9
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Ayuda - Float y cambio de altura

CraToS no entendí cual ejemplo querías que viera.

Saludos
  #9 (permalink)  
Antiguo 19/03/2010, 20:54
 
Fecha de Ingreso: marzo-2009
Ubicación: Santo André - São Paulo - Brasil
Mensajes: 91
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Ayuda - Float y cambio de altura

Bien para que sea solucionado tuyo problema haga una tabla con los datos no es vas cometer uno error.

Para que vos pueda conocer lo xhtml y tambien lo CSS utilza-se de lo sitio

http://w3schools.com

Si vos estudiar bien muy pronto lograr hacier bine lo que desea.
  #10 (permalink)  
Antiguo 20/03/2010, 11:21
 
Fecha de Ingreso: octubre-2007
Mensajes: 9
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Ayuda - Float y cambio de altura

Gracias por la ayuda, he logrado solucionar el problema.

Como dijo Trypat, usando el clear funciona cómo debería.

Agregué un div al final de lo que serían las columnas, con la propiedad clear:both.
Con eso ya no es necesario ni tener un min-height.

Si a alguien le interesa el código completo con gusto lo comparto.

Saludos

Etiquetas: altura, float, cambios
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




La zona horaria es GMT -6. Ahora son las 05:31.