Bords arrondis CSS

[Siddartha]

Bonjour,

Je suis en train de réaliser une nouvelle maquette d'un site.

Comme vous pourrez le voir ici, je cherche à faire des calques/tableaux avec bords arrondis.

Je veux néanmoins tenter de faire ca uniquement via les CSS.

Pour ce faire, les calques de ma page sont architecturés de la sorte :

H E A D E R

contenu | menu

F O O T E R

Contenu, menu et footer sont des calques à bords arrondis. Sauf qu'au lieu de faire comme le fameux tutoriel de Laurent Jouanneau, ou d'autres trouvés sur le Net, je souhaite mettre une image en haut et une bas qui font les arrondis (/img/corner/top.gif et bottom.gif)

Tout vas bien jusqu'a ce que j'essaye de placer le calque #contbas pour fermer le tableau contenu en bas qui ne veut pas malgré des padding ou margin se coller à la fin de mon tableau de catégories.

Bref, j'ai tourné ca dans tous les sens, impossible d'arriver à la solution.

On ne peux malheureusement pas apparemment avoir une image en top et bottom sur un seul et même calque

Si quelqu'un avait des pistes, je suis preneur

[Compte supprimé]

Tu va trouver ton bonheur là : Cadre en css

[Siddartha]

Hello Jeroen,

J'ai vu ce tuto, mais ca fait un peu trop bricolage je trouve ..

Je voudrais mettre en place un système de calques et de css plus carré, clean en somme

[Loupilo]

Ça ne marchera que sous Mozilla, mais la solution la plus propre actuelle, c'est :

-moz-border-radius:15px;

Mozilla qui implante des spécifications CSS3 avant la sortie définitive des recommandations.

Je ne sais pas si Opera à un équivalent... Pas la peine de demander pour IE.

Sinon, la solution que j'applique pour une compabilité inter-navigateurs, c'est que je structure mon div comme ça :

<div><h2>DIV</h2>
Texte
Texte</div>

Et je dis en CSS que le h2 a une image de fond arrondi-haut.png et que le div a une image de fond arrondi-bas.png, en spécifiant bien sur l'emplacement 'bottom' :

div {
width:150px; //Taille du div et donc largeur de l'image arrondi-bas
padding-bottom:20px; //Hauteur de l'image arrondi-bas
background: url(arrondi-bas.png) no-repeat center bottom;
}
div h2 {
width:150px; //Taille du h2 et donc largeur de l'image arrondi-haut
padding-top:20px; //Hauteur de l'image arrondi-haut
background: url(arrondi-haut.png) no-repeat center top;
}

Mais avec cette technique, tes div se doivent d'être en taille fixe.

Ça marche relativement bien, même sous IE, c'est dire

A+

Loupilo.

[Raphael]

Hello Jeroen,

J'ai vu ce tuto, mais ca fait un peu trop bricolage je trouve ..

Je voudrais mettre en place un système de calques et de css plus carré, clean en somme

<{POST_SNAPBACK}>

Je ne suis pas sûr de comprendre ce que tu veux :/

Si tu veux une solution entièrement en CSS, il y'a la méthode before/after : http://www.nanoum.net/blog/5_before_et_after.html

Sinon, toutes les autres méthodes relèvent du bidouillage si tu veux un code compatible partout : http://css-discuss.incutio.com/?page=RoundedCorners

[Siddartha]

Ah ben voila !

La solution proposée par Loupilo ou encore celle que tu viens de me donner 'Before Et After' correspond à ce que je recherche, un code clair, simple qui évite de multiplier les div imbriqués.

Ca m'ennuie en fait de coder deux divs imbriquées pour faire ca, alors qu'effectivement je n'y avait pas pensé, le coup du h2 +du div avec leur background-url me parait mieux.

J'essaye de me dire le plus souvent qu'un calque doit rester un calque, sinon autant faire ca à l'ancienne avec le vieux table 3x3

Merci à tous pour vos réponses, je vais repartir dans mon code