Hola a todos.
Estoy montando una administración en CSS y tengo un ligero problema.
Tengo un listado de noticias tipo.
FECHA + TITULO + ICONOS EDITAR/BORRAR
Ahora esta dispuesto de la siguiente forma.
/* el HTML */>
<div id="listado">
<p><span class="fecha">31/01/07</span>
<span class="titulo">Título de la noticia breve.</span>
<span class="iconos"><a href="#borrar"><img src="images/ico_borrar.gif"
alt="Borrar" /></a><a href="#editar"><img src="images/ico_editar.gif"
alt="Editar" /></a></span>
</p>
<p><span class="fecha">31/01/07</span>
<span class="titulo">Título de la noticia tan largo que ocupa más de una
línea, imaginad que ocupa 2 ó 3 y entonces no cabe en el contenedor del
título que he creado.</span>
<span class="iconos"><a href="#borrar"><img src="images/ico_borrar.gif"
alt="Borrar" /></a><a href="#editar"><img src="images/ico_editar.gif"
alt="Editar" /></a></span>
</p>
</div>
/* la CSS */
#listado {
float:right;
width:544px;
padding:10px;
margin-bottom:10px;
}
#listado span.fecha {
float:left;
width:60px;
color:#666;
text-align:left;
}
#listado span.titulo {
float:left;
width:400px;
}
#listado span.iconos {
float:right;
width:80px;
}
#listado span.iconos img {
float:right;
padding:0 2px;
}
Como veréis en la hoja CSS, le he puesto un width a los 3 porque quiero que
la noticia si tiene más de una línea se mantenga en su sitio y la fecha y
los iconos a la derecha.
De momento esto funciona y no hay problema.
EL PROBLEMA:
Si aplico un width:80px a los iconos y por programación quiero añadir más
iconos al tener un ancho fijo me los flotaría o saltaría hacia abajo.
Me interesa que si por programación meto más iconos, tipo ampliar,
destacar, etc., ese span se amplíe y el de noticias (que ahora tiene un
width fijo) se contraiga para adecuarse.
Espero haberme explicado correctamente.
Un saludo y muchas gracias por adelantado.
Jose Insausti. Disenia.
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
