Foros del Web » Creando para Internet » CSS »

Varias cajas CSS en web

Estas en el tema de Varias cajas CSS en web en el foro de CSS en Foros del Web. Hola. Estoy montando una web con noticias. Cada noticia irá en una <div> y en cada línea tendré 3 noticias. Las noticias tendrán todas la ...
  #1 (permalink)  
Antiguo 10/05/2011, 07:56
 
Fecha de Ingreso: agosto-2007
Mensajes: 25
Antigüedad: 10 años, 3 meses
Puntos: 0
Varias cajas CSS en web

Hola.

Estoy montando una web con noticias. Cada noticia irá en una <div> y en cada línea tendré 3 noticias.

Las noticias tendrán todas la misma anchura por lo que es sencillo ajuntarlo pero la altura será distinta en cada una.

Lo que quiero es que se ajuste entre capas con la altura. Es decir que si,

FILA1
- Noticia 1: 100px de altura
- Noticia 2: 90px de altura
- Noticia 3: 125px de altura

FILA2
- Noticia 4: 90px de altura
- Noticia 5: 90px de altura
- Noticia 6: 80px de altura


Lo que quiero es que las noticias 4,5,6 se ajusten a las que tienen arriba dejandose separacion de x pixeles pero que las noticias 4,5,6 no se queden alineadas verticalmente entre sí.

Muchas gracias.
  #2 (permalink)  
Antiguo 10/05/2011, 08:34
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Varias cajas CSS en web

para eso tendrás que montar los div mas o menos así

Cita:
<div id="cont">

<div class="alineacion">
<div>Noticia1</div>
<div>Noticia4</div>
</div>

<div class="alineacion"">
<div>Noticia2</div>
<div>Noticia5</div>
</div>

<div class="alineacion">
<div>Noticia3</div>
<div>Noticia6</div>
</div>

</div>


#cont div.alineacion {display: inline-block;}
  #3 (permalink)  
Antiguo 10/05/2011, 09:11
 
Fecha de Ingreso: agosto-2007
Mensajes: 25
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: Varias cajas CSS en web

Pero con este código que adjuntas cada fila de noticias quedaría alineada verticalmente hacia abajo ('bottom').

Lo que yo quiero es que las noticias se ajusten hacia arriba y que no sigan un orden vertical de línea.

Adjunto ejemplo: http://www.imagengratis.org/images/2011051016123.jpg

Esto es lo que tengo ahora mismo, y quiero que esas dos filas suban hacia arriba las noticias y que las 2 primeras noticias de la segunda fila suban aunque sobrepase la línea base de la primera fila.
  #4 (permalink)  
Antiguo 10/05/2011, 09:21
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Varias cajas CSS en web

Según tu imagen, siempre habrá la misma cantidad de cajas por línea?, tienen un alto fijo?, por cierto si ya lo tienes hasta ahí, sería bueno que subas tu code

__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 10/05/2011, 09:38
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Varias cajas CSS en web

fijate si esto te sirve :

http://techtastico.com/post/framework-css-1-linea/
__________________
WFC
codigo82
  #6 (permalink)  
Antiguo 10/05/2011, 09:51
 
Fecha de Ingreso: agosto-2007
Mensajes: 25
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: Varias cajas CSS en web

Las noticias no tienen un alto fijo, solo un ancho, por eso es mi problema.

La primera línea contendrá dos noticias (la primera más grande será como dos pequeñas) y el resto de líneas van a tener 3.

Adjunto código:

Código:
<div id="col_izquierda">	
	<!-- FILA 1 // Noticias -->
		<div class="noticia_g">
			NOTICIA 1
		</div>

		<div class="noticia_p2">
			NOTICIA 2
		</div>	
	
	<!-- FILA 2 // Noticias -->
		<div class="noticia_p">
			NOTICIA 3
		</div>
		
		<div class="noticia_p2">
			NOTICIA 4
		</div>
	
		<div class="noticia_p2">
			NOTICIA 5
		</div>	
</div>
Código:
#col_izquierda{
	background-color:#F0F0F2; 
	width: 690px;
	float:left;	
	margin: 2px;
        height: 100%;
	border: 0px;
}
.noticia_p{
	width:200px;
	height:100%;
	margin:5px 5px 5px 5px;
        padding: 5px;
	background-color:#E6E6E6;
	border: 1px solid #5D6588;
	float:left;
	display: inline-block;
	
}
.noticia_p2{
	width:200px;
	margin:5px 5px 5px 5px;
        padding: 5px;
	background-color:#E6E6E6;
	border: 1px solid #5D6588;
	display: inline-block;
	
}
.noticia_g{
	width:438px;
	height:100%;
	margin:5px 5px 5px 5px;
        padding: 5px;
	background-color:#E6E6E6; 
	border: 1px solid #5D6588;
	float: left;
	display: inline-block;
}
Actualmente sale:


Lo que realmente quiero es:


Es decir que se adapten todas las noticias hacia arriba.
  #7 (permalink)  
Antiguo 10/05/2011, 12:58
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Varias cajas CSS en web

yo me basé en tu primero (2 filas con 3 noticias cada una). por si a alguien le puede interesar, se trata de esto
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#cont {width: 440px; border: 1px solid green;}
#cont div.alineacion {display: inline-block; width: 100px; vertical-align: top; margin: 0 20px;}
.alineacion div {width:100px; border: 1px solid red; margin: 20px 0;}
</style>
</head>
<body>
<div id="cont">

<div class="alineacion">
<div><b>Noticia1</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
<div><b>Noticia4</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit.</div>
</div>

<div class="alineacion"">
<div><b>Noticia2</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien.</div>
<div><b>Noticia5</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
</div>

<div class="alineacion">
<div><b>Noticia3</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
<div><b>Noticia6</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien.</div>
</div>

</div>

</body>
</html>

Etiquetas: cajas
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 22:41.