Besoin d'un coup de main en CSS [image inside] >>

[Arroway]

Je cherche à faire en CSS un rectangle de menu avec une bordure blanche elle-même entourée d'une bordure d'une autre couleur. Voici un exemple :



C'est possible en CSS ou je cherche pour rien ? Merci !

[Kmacleod]

C'est possible !
ce sont deux div
une div blanche avec une bordure et une marge
une div bleue

[Arroway]

Tu veux dire faire 2 span superposés en fait ? Pas moyen de jouer avec une bordure de style double ou autre et un sule div ou un seul span ?

[Grantome]

Tu veux dire faire 2 span superposés en fait ? Pas moyen de jouer avec une bordure de style double ou autre et un sule div ou un seul span ?

Il a dit 2 div, pas 2 span

[milkiway]

tu veux mettre quoi dedans du texte ?
Dans ce cas c'est juste un <p></p>
avec un style qui détermine sa taille et sa forme et sa couleur (le carré bleu)
pour la bordure il faut un deuxieme élément, un div
donc

Code: Tout sélectionner

<div>
<p>Ton texte</p>
</div>

Code: Tout sélectionner

div{border:1px solid blue;padding:1px}
p{background:lightblue;margin:1px}

[Arroway]

Merci à vous et nickel Milkiway, ça marche au poil !

Je débute en CSS et si je vois bien l'intérêt, c'est carrément différent des tableaux classiques...

Si tu as un moyen efficace de centrer du texte verticalement à l'intérieur, je suis preneur... Vertical-align:middle n'a pas l'air de fonctionner. Je peux centrer verticalement de façon artificielle avec padding, mais je pense qu'il doit y avoir une fonction spécifique (?)

[MarvinLeRouge]

@Kmacleod : le div blanc a un padding, pas une marge (oui je sais en français on parle parfois de marge intérieure, mais ici ca porte à confusion donc remplissage c'est mieux je trouve)..

@arroway : Je te conseille un oeil là (et mets le en bookmark : http://www.yoyodesign.org/doc/w3c/css2/propidx.html. Sinon, centrer dans un bloc, c'est juste avoir les padding haut et bas égaux, non ?

[Arroway]

Oui, on peut centrer artificiellement avec padding mais si les div augmente en hauteur, le centrage ne suit pas en fait.

Merci pour le lien, c'est très pratique