[CSS] Fusionner les bordures de deux boites

[Selection A]

Bonjour,

Je voudrais savoir si il existe un moyen de fusionner les bordures de deux boites qui se touchent. Je sais qu'il existe le paramètre border-collapse mais il ne s'applique qu'au tableau.

Merci d'avance

[rikew]

Sur une des 2 boites tu ne met pas de bordure sur la face en contact avec l'autre

[Selection A]

Bien sur mais cette solution ne me satisfait pas

En fait j'ai une liste verticale comme ceci :

une boite titre avec les bordures
une boite description sans bordures
une boite titre avec les bordures
une boite description sans bordures
...

Il y a un lien dans les boites titres qui permet d'afficher la boite description ou de cacher la boite description. C'est dans ce 2ème cas que les deux boites avec bordures se touchent. Sinon quand la boite description est afficheé, elles ne se touchent pas et il me faut une bordure tout autours.

[Xou]

alors gestion dynamique du css : pas le choix !

[Didier_S]

tu peux faire 2 classes (une avec et une sans bordures), et la changer en JavaScript (DOM) du genre document.getElementById('description2').className = 'noBorders';

(en appelant ta classe noBorder, et en visant l'élément dont l'id est description2)

[obi]

Sinon, tu as le sélecteur CSS +, qui détecte deux éléments côte à côte.
Ca donnerait:

Code: Tout sélectionner

.titre{
border:1px solid black;
}
.titre + .titre {
border-left:none;
}


Qui vire la bordure droite lorsqu'une balise .titre suit une autre .titre.
Petit bémol, cela ne fonctionne pas avec IE 6, mais je crois que ça passe en 7.

[Selection A]

Merci pour vos idées !

Je m'en vais tester tout ça