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;
}