Solución con dl, dd y dt: hay un problema para poder ubicar realmente
los objetos por capas por lo que la solución requiere, como bien apunta
Martín, una "chapucilla" de meter cada dd y dt en contenedores:
Chapuza por chapuza, ¿lo dejamos en párrafo con span? Y para redondear,
¿lo escribimos al revés?
Entonces tienes que generar contenido para el elemento del precio (pvp
en el código que te incluyo), que viene a ser otra chapuza más, pero al
menos no es un borde...
En este código tienes para empezar a probar (los colores y las medidas
eran para las pruebas)
<style>
#etiqueta {
background: yellow;
width: 400px;
}
.pvp:before {
content: " . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
.pvp {
z-index: 100;
background: red;
text-align: right;
right: 10px;
}
.def {
z-index: 10;
background: white;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<p>Vamos a probar</p>
<div id="etiqueta">
<p class="pvp">Precio 1<span class="def">Objeto 1</span></p>
<p class="pvp">Precio 2<span class="def">Objeto con nombre más
largo</span></p>
</div>
</body>
</html>
Sí, es algo chapuzas también, pero al menos permite hacerlo de un modo
más o menos "elegante" teniendo en cuenta que lo único que nos va a
ocurrir si vemos la página con CSS desactivado (o para lectores de
pantalla) es que "veremos" el precio antes que la descripción, pero casi
lo veo como un mal menor a la posibilidad de tener tablas con celdas
llenas de puntitos.
Espero te sirva
Un saludo
Victoria
El dom, 09-12-2007 a las 19:47 -0300, Martin Szyszlican escribió:
> Se me ocurre esto:
> A cada dd/dt los ponés dentro de un contenedor, aunque no creo que eso
> valide.
> A este contenedor le pones un border-bottom dashed que es lo que vos querés.
> Esto te va a generar un borde de todo el ancho, vos solo querés que aparezca
> entre los elementos, no debajo de ellos.
> Para eso les das un fondo blanco al dd y al dt, y los hacés un pixel más
> altos que su contenedor, como para que el fondo blanco tape la línea
> punteada.
> Se entiende?
> Es medio desastroso, pero puede funcionar. Seguro hay una solución más
> elegante...
>
> Martin.
>
> El día 9/12/07, Angel Martin Alganza <[EMAIL PROTECTED]> escribió:
> >
> > Hola a todos,
> >
> > Pregunta corta: ¿Cómo puedo rellenar un espacio horizontal entre dos
> > entidades con una línea de puntos?
> >
> > Pregunta larga: Estoy intentando dar estilo a un listado de precios en
> > el que, en dos columnas, se muestra cada objeto/servicio a la
> > izquierda y su precio a la derecha. Me parece que el marcado más
> > correcto es una lista de definición (aunque una tabla también sería
> > correcto):
> >
> > <dl>
> > <dt>Objeto 1</dt>
> > <dd>Precio 1</dd>
> > <dt>Objeto con nombre más largo 2</dt>
> > <dd>Precio 2</dd>
> > </dl>
> >
> > Quiero que el listado aparezca así:
> >
> > Objeto 1........................................... Precio 1
> > Objeto con nombre más largo 2...................... Precio 2
> >
> > ¿Cómo debería dar el estilo a dt para que se rellenase de puntos el
> > espacio vacío hasta el dd?
> >
> > En su defecto, ¿cómo podría rellenar de puntos el espacio en blanco en
> > la celda correspondiente si utilizara una tabla? (No vale una columna
> > extra rellena de puntos, dado que el ancho utilizado por la columna de
> > «objetos» es muy variable.
> >
> > Gracias y saludos,
> > Ángel
> >
> >
> > --
> > Angel Martin Alganza Tel +34 958 248 926
> > Departamento de Genetica Fax +34 958 244 073
> > Universidad de Granada mailto:[EMAIL PROTECTED]
> > C/ Fuentenueva s/n http://www.ugr.es/~ama/
> > E-18071 Granada, Spain JabberID [EMAIL PROTECTED]
> > PGP Public key: http://www.ugr.es/~ama/ama-pgp-key
> > 3EB2 967A 9404 6585 7086 8811 2CEC 2F81 9341 E591
> > ------------------------------------------------------
> > () ASCII Ribbon Campaign - http://www.asciiribbon.org/
> > /\ Against all HTML e-mail and proprietary attachments
> > Please avoid sending me Word or PowerPoint attachments
> > http://linux.sgms-centre.com/advocacy/no-ms-office.php
> > _______________________________________________
> > 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
> >
> _______________________________________________
> 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
_______________________________________________
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
