[Résolu] Bloc contenu arrondi mais uniquement en contour.

Bonjour à tous.

Voila, je souhaiterai réaliser un bloc contenu avec coins arrondis.
Jusque là pas de soucis, j'ai suivi la méthode expliquée dans
CSS 2 Pratique du design web.

Sauf que je souhaiterai que ce bloc à coins arrondis
soit noir sur fond noir avec uniquement un contour pour le délimiter.
Et là, j'ai beau essayer je trouve pas.
J'ai préparé mes coins arrondis en laissant les extérieurs en fond noir, le contour jaune et l'intérieur en transparent et attribué un contour à mon bloc conteneur.
Mais forcément, les coins passent sous le filet du bloc conteneur.
Et apparemment, je ne peux pas les faire passer par-dessus avec un z-index supérieur. Quelqu'un a-t'il une solution ?

Merci.

Pour illustrer le cas :
http://www.gwendallmavic.fr/cadre_arrondi/
Modifié par Gwendall (29 Sep 2006 - 17:12)

Salut,

dans ton cas il serait plus simple de considérer l'ensemble du liseré jaune comme faisant parti des images de fond. Dit autrement ne pas pensé en terme d'images coins arrondis simples mais image "coins arrondis + bordures"

Toujours très mignon toutes ces div vides.

Question : pourquoi cet ensemble de paragraphes que tu juge bon de présentés visuellement dans un même cadre n'est il pas décrit et structuré au niveau du document html lui même comme une section annoncée par un <hn> ????????

Considération générale :
c'est si difficile que ça que d'appliquer les css à du vrai code et non à un grand vide plein de rien ?
Modifié par clb56 (28 Sep 2006 - 18:58)

clb56 a écrit :
dans ton cas il serait plus simple de considérer l'ensemble du liseré jaune comme faisant parti des images de fond. Dit autrement ne pas pensé en terme d'images coins arrondis simples mais image "coins arrondis + bordures"

+1

clb56 a écrit :
Toujours très mignon toutes ces div vides.

Question : pourquoi cet ensemble de paragraphes que tu juge bon de présentés visuellement dans un même cadre n'est il pas décrit et structuré au niveau du document html lui même comme une section annoncée par un <hn> ????????

Considération générale :
c'est si difficile que ça que d'appliquer les css à du vrai code et non à un grand vide plein de rien ?

Attention clb56, faut pas faire fuir les pauvres forumeurs avec des considérations générales certes importantes (et que je partage), mais amenées un peu sèchement...

Vu que Gwendall a commencé quelque chose de simple, on va l'aider à le finaliser, quitte à lui indiquer une meilleure solution comme alternative.

Avec la solution actuelle, jouer sur les z-index ne servirait à rien. Non seulement ils ne peuvent s'appliquer qu'à des éléments positionnés (et ici aucun ne l'est !), mais en plus les blocs qui définissent ces images ne sont pas en dessous des bordures, ils sont à côté (il n'y a pas de superposition).

Par contre, on peut obtenir la superposition en décalant les quatre petits éléments, via un positionnement relatif.

Voilà ce que mon test à donné :

#hautgauche {
position: relative; left: -1px; top: -1px;
background-image: url(corner_top_left.gif);
}
#hautdroit {
position: relative; right: -1px; top: -1px;
float : right;
background-image: url(corner_top_right.gif);
}
#basgauche {
position: relative; left: -1px; bottom: -1px;
background-image: url(corner_bottom_left.gif);
}
#basdroit {
position: relative; right: -1px; bottom: -1px;
float : right;
background-image: url(corner_bottom_right.gif);
}

Le positionnement relatif permet de décaler un élément par rapport à ce qui serait sa position normale.

Pour finir d'optimiser cette solution, il me semble effectivement peu heureux d'utiliser des conteneurs vides (les quatre div mises dans les coins). On pourrait par exemple utiliser des images (élément img) avec attribut alt vide (<img alt="" src="coin-hautdroit.png" />). Ou alors peut-être des span en display: block (mais bon, intérêt limité...).
Il me semble que Raphaël n'utilisait pas de div vides dans son tutoriel, si ?


Enfin, maintenant que ceci est réglé, on peut préciser que pour une boîte de largeur fixe il existe une solution beaucoup plus simple : faire les coins ET les bordures avec des images de fond.
Un tutoriel simple sur le sujet :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html


Mon conseil personnel : mettre en application la technique déjà commencée, histoire de comprendre son fonctionnement, puis utiliser cette deuxième technique, plus fiable je pense.

Merci pour votre aide à tous les deux.

Pour l'instant, je débute le CSS. Soyez indulgent, svp .
Je vais tester les différentes solutions.
Je souhaite pouvoir obtenir un bloc redimensionnable en hauteur et en largeur.
car ils ne seront pas tous de la même largeur, alors si je dois faire un bandeau haut et bas différent à chaque fois, ça m'arrange pas.

> Il me semble que Raphaël n'utilisait pas de div vides dans son tutoriel, si ?
Si on regarde la page 194, il semblerait que si !!
Je sais, c'est des exemples…

En fait, je reconstruis mon site en CSS.
http://www.gwendallmavic.fr
Ne hurlez pas lorsque vous le verrez (si vous y allez…)
il est fait à l'ancienne. Je suis plus graphiste que webmaster.
Mais, il faut bien débuté.
J'ai donc réussi à faire la bande du haut en CSS
et maintenant j'attaque le contenu.
Donc, j'ai besoin de ces fameux cadres.

A bientôt.

Gwendall
Modifié par mpop (29 Sep 2006 - 13:14)

Gwendall a écrit :
Je souhaite pouvoir obtenir un bloc redimensionnable en hauteur et en largeur.
car ils ne seront pas tous de la même largeur, alors si je dois faire un bandeau haut et bas différent à chaque fois, ça m'arrange pas.

Ça dépend. Si tu n'as que deux ou trois largeurs-type connues à l'avance, ça reste une solution tout à fait envisageable. Pour le style que tu veux obtenir, des images en PNG-8 (avec un logiciel qui les compresse correctement, donc de préférence pas Photoshop) seront super légères.

Mais sinon la solution proposée par Raphael tient la route, hein !
Par contre (je n'ai pas le bouquin), Raphael ne précise pas qu'il faut utiliser le positionnement relatif pour décaler les coins, dans son livre ?

Gwendall a écrit :
> Il me semble que Raphaël n'utilisait pas de div vides dans son tutoriel, si ?
Si on regarde la page 194, il semblerait que si !!

Mouais, de toute façon div vide ou span vide ou image avec alt vide, ça revient globalement au même.

Merci en tout cas pour ces réponses.

a écrit :
Par contre (je n'ai pas le bouquin), Raphael ne précise pas qu'il faut utiliser le positionnement relatif pour décaler les coins, dans son livre ?

Apparemment non.

Pour l'instant, je vais essayer d'avancé avec ça.

A bientôt pour de nouvelles aventures.

Gwendall

Gwendall a écrit :
Par contre (je n'ai pas le bouquin), Raphael ne précise pas qu'il faut utiliser le positionnement relatif pour décaler les coins, dans son livre ?

Apparemment non.
En fait, il n'a pas besoin de le faire si l'exemple qu'il présente concerne des coins arrondis mais sans bordure (on « arrondit » la couleur de fond du bloc). C'est uniquement s'il y a une bordure pour le bloc qu'il faudra alors décaler les coins, la bordure se rajoutant à l'extérieur de la zone de contenu.