Foros del Web » Creando para Internet » CSS »

duda el maquetar con css

Estas en el tema de duda el maquetar con css en el foro de CSS en Foros del Web. He empezado a maquetar con css y me surge alguna duda. Antes de nada decir que estoy maquetando con posiciones absolutas ya que los doc ...
  #1 (permalink)  
Antiguo 30/05/2006, 07:50
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 20 años, 8 meses
Puntos: 0
duda el maquetar con css

He empezado a maquetar con css y me surge alguna duda.

Antes de nada decir que estoy maquetando con posiciones absolutas ya que los doc html que estoy creando van a ser el frame central de un site hecho con frames (las páginas del contenido vamos).


La duda fundamental que tengo es que si tengo un elemento que se repite en la página, utilizo clases pero si este elemento cambia en la posición no puedo repetir esa clase aunque la clase copiada tenga la otra posición.

Me explico.

SI quero insertan otra linea para separar el contenido de una página, no puedo duplicar en el doc css ".lineafina" cambiandole la propiedad "left" tengo que crear otra por ejemplo: ".lineafina2" y asi cuantas veces la tenga que insertar en el documento. Hay alguna solución para esto?

los que quiero repetir son:

.linearoja

.carrito


Otra duda.

Tengo instalado el plugin fireburn y me dice que:
el valor para la propiedad 'font'. Declaración rechazada. y me lo dice por poner: font-size:0.88em; en ".txtpre_eiffel"

como puedo solucionar eso?

codigo html

Código:
<body>
	<div class="contenedor">
		<div class="texttitle">PAQUETES DE MUEBLES - La Torre</div>
		<div class="linearoja">
		</div>
		<div class="salon">
		<img src="img/interface/salones_up.gif" alt="enlace salones" />
		</div>
		<div class="comedor">
		<img src="img/interface/comedores_up.gif" alt="enlace comedores" />
		</div>
		<div class="dormitorios">
		<img src="img/interface/dormitorios_up.gif" alt="enlace dormitorios" />
		</div>		
		<div class="exterior">
		<img src="img/interface/exterior_up.gif" alt="enlace exterior" />
		</div>
		<div class="menaje">
		<img src="img/interface/menaje_up.gif" alt="enlace menaje" />
		</div>
		<div class="electrodomesticos">
		<img src="img/interface/electrodomesticos_up.gif" alt="enlace electrodomesticos" />		
		</div>
		<div class="cortinas">
		<img src="img/interface/cortinas_up.gif" alt="enlace cortinas" />
		</div>				
		<div class="lineafina">
		</div>
		<div class="flecha_verde">
		>
		</div>	
		<div class="txtpre_eiffel">
		 <b>Torre Eiffel</b>
		</div>
		<div class="precio_eiffel">
		Precio: <b>4.049 €</b>
		</div>
		<div class="carrito">
		<img src="img/interface/carrito.gif" alt="carrito de la compra"  />
		</div>
		<div class="img_eiffel_p">
		<img src="img/salones/eiffel/eiffel_p.jpg" alt="torre eiffel" />
		</div>
		<div class="linea_gris">
		</div>
	</div>	
</body>
estilos css

Código:
body {
	background: White;
	margin-top: 80px;
	text-align: left;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;	
}

.contenedor {
	position: relative;
	margin: 0 auto;
	width: 673px;
}

.texttitle {
	position: absolute;
	font-weight: bold;	
	top:	0px;
	left:	0px;
	width:285px;	
}

.linearoja{
	position: absolute;
	top: 20px;
	left: 0px;
	width: 673px;
	height: 7px;	
	background-color: #ff6c19;	
	overflow: hidden;
}

.salon	{
	position: absolute;
	top: 50px;
	left:0px;
	width:72px;
}

.comedor	{
	position: absolute;
	top: 50px;
	left:73px;
	width:92px;
}

.dormitorios	{
	position: absolute;
	top: 50px;
	left:166px;
	width:98px;	
}

.exterior	{
	position: absolute;
	top: 50px;
	left:265px;
	width:72px;	
}

.menaje	{
	position: absolute;
	top: 50px;
	left:338px;
	width:66px;	
}

.electrodomesticos	{
	position: absolute;
	top: 50px;
	left:405px;
	width:139px;	
}

.cortinas {
	position: absolute;
	top: 50px;
	left:	544px;
	width:77px;	
}

.lineafina	{
	position: absolute;
	top: 70px;
	left: 0px;
	width: 673px;
	height: 1px;	
	background-color: #ff6c19;	
	overflow: hidden;
}

.lineafina2	{
	position: absolute;
	top: 105px;
	left: 0px;
	width: 673px;
	height: 1px;	
	background-color: #ff6c19;	
	overflow: hidden;
}

.flecha_verde	{
	position: absolute;
	top:	135px;
	left: 0;
	color: #87d300;
}

.txtpre_eiffel {
	position:absolute;
	top: 135px;
	left:15px;
	font: bold;
	font-size:	0.88em;
}

.precio_eiffel {
	position:absolute;
	top: 185px;
	left:0px;
	width: 135px;
	background-color: #87d300;
	font-size: 0.77em;
	color: White;
	padding: 0 0 0 5px;
}

.carrito	{
	position:absolute;
	top: 182px;
	left:155px;
	/*display: none; para ocultar el carrito*/
}

.img_eiffel_p	{
	position: absolute;
	top: 135px;
	left: 515px;
}

.linea_gris	{
	position: absolute;
	top: 210px;
	left: 0px;
	width: 673px;
	height: 1px;	
	background-color: #AEAEAE;	
	overflow: hidden;
}
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..
  #2 (permalink)  
Antiguo 30/05/2006, 08:35
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Hola capagris

Te contesto a parte de tus dudas: puedes poner todas las clases que quieras a un elemento, separadas por un espacio. Mira este ejemplo a ver si te sirve.
Código:
.lineafina {
  width:150px;
  height:5px;
  background:green;
  border:1px solid red;
  position:absolute }
.posi1 {top:50px}
.posi2 {top:150px}
[/code]
Código:
<div class="lineafina posi1"></div>
<div class="lineafina posi2"></div>
Saludos,
  #3 (permalink)  
Antiguo 30/05/2006, 08:55
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 20 años, 8 meses
Puntos: 0
Muchas gracias, esto me va a venir muy bien para reducir bastante el código css.

saludos
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..
  #4 (permalink)  
Antiguo 30/05/2006, 09:12
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 20 años, 8 meses
Puntos: 0
Cita:
Iniciado por capagris



Otra duda.

Tengo instalado el plugin fireburn y me dice que:
el valor para la propiedad 'font'. Declaración rechazada. y me lo dice por poner: font-size:0.88em; en ".txtpre_eiffel"

como puedo solucionar eso?

sobre esto alguien me puede decir algo?

gracias de antemano
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..
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 09:27.