Foros del Web » Creando para Internet » CSS »

dudas con css

Estas en el tema de dudas con css en el foro de CSS en Foros del Web. Yo tengo una web que estoy haciendo en mi trabajo ... http://www.iuean.edu.ar/libreria/index.html mi duda es con las listas en la parte de informacion central en ...
  #1 (permalink)  
Antiguo 23/09/2008, 09:39
Avatar de sergio87  
Fecha de Ingreso: octubre-2007
Ubicación: Buenos Aires
Mensajes: 323
Antigüedad: 10 años, 1 mes
Puntos: 8
dudas con css

Yo tengo una web que estoy haciendo en mi trabajo ... http://www.iuean.edu.ar/libreria/index.html

mi duda es con las listas en la parte de informacion central en la columna del medio..
tengo mis libros y mi texto con su respectivo carrito de compras y un mas información..

si yo agrego mas informacion de cada libro se me desarma toda la estructura, no se porque .. yo quiero que se respete "la columna" libro - texto al lado..

se entiende .. no es complejo de explicar, para mi si de hacerlo ..

CODIGO HTML

Código HTML:
<div id="info">
				<h1>NOVEDADES</h1>
				<ul>
					<li>
						<img src="images/libro_1.jpg" alt="libro1" />
						<h2>70 JUEGOS PARA DINÁMICA DE GRUPOS</h2>
						<p><strong>Autor:</strong> FRITZEN SILVINO JOSE</p>
						<p><strong>Editorial:</strong> LUMEN S.R.L.</p>
						<p><strong>ISBN:</strong> 9789507249099</p>
						<p class="precio">Precio: $22,00</p>
						<div class="carrito">
							<a href="#"><img src="images/carrito.jpg" alt="Click para comprar..." title="Comprar este libro!" /></a>
						</div>
						<div class="masinfo">
							<p>Mas Información</p>
						</div>
						<p class="linea_pie">Pie</p>
					</li>
				</ul>
</div> 

CÓDIGO CSS

Código:
/* -----------------------------------------------------------/* INFO */
#info p{
font-family: arial;
font-size: 0.8em;
padding: 0 50px 0 0;
}

#info ul{
list-style: none;
}

	#info ul li{
	width: 400px;
	height: 150px;
	}

		#info ul li img{
		float: left;
		padding: 0 10px 5px 10px;
		}
		
		#info ul li p.precio{
		float: left;
		font-size: 0.8em;
		font-weight: bold;
		color: #3e6c9f;
		padding: 10px 5px 0 0;
		}
		#info ul li p.precio2{
		float: left;
		font-size: 0.8em;
		font-weight: bold;
		color: #3e6c9f;
		padding: 10px 0 0 30px;
		}
		#info ul li div.masinfo{
		width: 120px;
		height: 22px;
		border: none;
		margin: 7px 0 0 230px;
		background: url("images/btn_masinfo.jpg") no-repeat;
		}
		#info ul li div.masinfo p{
		display: block;
		width: 95px;
		margin: 0 0 0 20px;
		padding: 4px 0 0 0;
		font-size: 0.7em;
		}
		#info ul li div.masinfo p:hover{
		color: red;
		cursor: pointer;
		}
		#info ul li div.carrito{
		float: right;
		}
		#info ul li div.carrito a img{
		border: none;
		margin: 0 0 30px 0;
		}
		#info ul li div.carrito2 a img{
		border: none;
		margin: 0 30px 30px 0;
		}			
		#info ul li p.linea_pie{
		margin: 30px 0 0 10px;
		background: url("images/linea_top.jpg") repeat-x;		
		text-indent: -99999px;
		}		
		#info .paginas{
		padding: 0 0 10px 20px;
		}
		
		#info ul li h2{
		font-family: arial;
		font-size: 0.8em;
		color: #e1323d;
		}
		
		#info ul li p{	
		display: block;
		text-align: left;
		}
		
h1{
font-family: arial;
font-size: 0.9em;
background: url("images/h1_bg.jpg");
border: 1px solid black;
width: 390px;
color: #fff;
height: 20px;
margin: 0 0 10px 10px;
padding: 0 0 0 10px;
}


GRACIAS A QUIEN ME AYUDE A RESOLVER MI PROBLEMA..
SALUDOS!
  #2 (permalink)  
Antiguo 23/09/2008, 10:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: dudas con css

No estoy seguro de entenderte, pero si añades más cosas o texto se te descuadra, e imagino que es porque tus elementos "li" tienen una altura determinada que no varía:

#info ul li{
width: 400px;
height: 150px;
}

Por tanto, si añades contenido no pueden crecer.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 24/09/2008, 09:15
Avatar de sergio87  
Fecha de Ingreso: octubre-2007
Ubicación: Buenos Aires
Mensajes: 323
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: dudas con css

eso no me ayuda, pero gracias por responder.
  #4 (permalink)  
Antiguo 24/09/2008, 10:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: dudas con css

¿Eso no te ayuda? ¿No te da una idea de dónde está el problema?
Pues vaya.

Elimina el height de los "li"

Ahora envuelve todo lo que no es la imagen de cada "li" en una caja:

Cita:
<li>
<img alt="libro1" src="images/libro_1.jpg"/>
<div id="caja">
<h2>70 JUEGOS PARA DINÁMICA DE GRUPOS</h2>
<p><strong>Autor:</strong> FRITZEN SILVINO JOSE</p>
<p><strong>Editorial:</strong> LUMEN S.R.L.</p><p><strong>Editorial:</strong> LUMEN S.R.L.</p><p><strong>Editorial:</strong> LUMEN S.R.L.</p><p><strong>Editorial:</strong> LUMEN S.R.L.</p>
<p><strong>ISBN:</strong> 9789507249099</p>
<p class="precio">Precio: $22,00</p>
<div class="carrito">
<a href="#"><img title="Comprar este libro!" alt="Click para comprar..." src="images/carrito.jpg"/></a>
</div>
<div class="masinfo">
<p>Mas Información</p>
</div>
<p class="linea_pie">Pie</p>
</div></li>
Y ahora añade en la css el selector:

.caja {margin-left:108px;}

Por último, en el selector #info ul li div.masinfo, cambia tus márgenes por estos:

margin:7px 0pt 0pt 110px;
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 24/09/2008 a las 10:55
  #5 (permalink)  
Antiguo 24/09/2008, 13:58
Avatar de sergio87  
Fecha de Ingreso: octubre-2007
Ubicación: Buenos Aires
Mensajes: 323
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: dudas con css

ahora si, y me salió!
gracias por tu colaboración ...

saludos,
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 13:35.