Est-ce si dur de faire un beau cadre arrondi??

Bonjour à tous,

J'essaie, depuis quelques heures, de faire un beau cadre arrondi compatible avec IE et FF. J'ai deja lu les tutos de Alsacreations et d'autres sites, mais hélas, je n'ai pas trouvé de solution qui m'aille. Je m'explique:

Mon but est de faire un cadre graphique arrondi (càd un cadre avec un fond bleu, et une bordure grise avec un petit effet de 3d dessus pour qu'elle paraisse bombée, par exemple), qui puisse être customisable via la feuille de style CSS en hauteur, la largeur étant dynamique, en fonction du contenu de mon cadre.

A première vue, ça me paraissait pas super compliqué: avec un tableau (je sais, c'est pas bien ), c'est super facile: 9 cases, quelques images de fond, et le tour est joué...

A chaque méthode trouvée, il y a toujours un problème. Soit il y a un défaut sur IE, ou sur FF, ou je suis obligé de fixer la hauteur... Quelqu'un a-t'il une solution viable?

Ah, dernier détail: j'aimerais avoir par exemple 8 images (pour le tour), qui soit réutilisable pour tous mes cadres (car si je dois créer une image par largeur de cadre, et que chaque cadre a une largeur différente, je veux pas voir le nombre d'images que je vais avoir à modifier, je veux changer mon style de cadre)

Merci d'avance pour vos conseils

Un petit exemple du résultat attendu? ici. Les menus de doite et de gauche sont ce que j'aimerais pouvoir reproduire, mais sans les <table>... Il y a, en tout, sur le FTP, que 8 images (haut-gauche, haut, haut-droit, gauche, droite, bas-gauche, bas, et bas-droit), pour l'ensemble des menus de la page (ceux à fond bleu).

Aidez-moi à ne pas tomber dans le vice, et à faire la même chose!!!
Modifié par Helldream (28 May 2006 - 15:44)

Hop, avec une largeur fixe et une hauteur dynamique :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
(Super tuto bien expliqué et tout… vi vi, j'aime bien me lancer des fleurs)
Deux images en tout.

Et Hop, plus compliqué, tout fluide (hauteur et largeur) :
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html
Six images en tout, mais on peut faire avec 4 seulement, si on doit gérer des boîtes plus petites.

Merci pour la réponse si rapide

Bon, je test ça d'ici ce soir, et je te donne mes conclusions...

Bonjour,

Une autre solution le script nifty corners

Par contre inutile si javascript est désactivé, et aucune idée si cela apporte des désagréments autres, mais cela fonctionne bien.

Après cela dépends aussi de ce que l'on veux faire comme coin arrondis (effet ou pas ) car je ne crois pas que le script le permette enfin bon vu mon niveau en javascript.
Modifié par knarf (28 May 2006 - 17:33)

Pour le 1er lien (http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html), le défaut est que tu dois avoir 2 gifs par largeur de tableau. En effet, si le gif est déformé sur la largeur, tu vas avoir des problèmes (par exemple si tu veux un bord de 1cm, le fait de l'étirer fera que le bord droit et gauche seront plus épais que celui du haut et du bas).

Pour le 3e, j'avais oublié de préciser que je cherchais une solution en HTML/CSS, sans Javascript désolé, je suis difficile

Pour le 2e, c'est un peu plus corsé, car il n'y a pas d'information, donc je suis entrain d'étudier le code pour dire ce qu'il en est

Voila, c'est fait. Petit défaut du 3e (et du 1er, quoi qu'il y aie un alternative), c'est que tu as de très grandes images (toute la largeur de l'écran), qui ne sont affichées qu'en partie pour faire les bords. Ce qui fait que tu charges un grand truc pour n'en utiliser qu'une partie, et donc la page est un peu plus lourde pour rien. Et imaginons qu'une personne aie un plus grand écran que toi, si tu dépasses la largeur du GIF, bah tu as un trou dans ton cadre

Je sais que je suis pointilleux, hein... Mais j'essaie de trouver une solution remplaçant vraiment les <table>, et les avantages que cela procure (car les petits problèmes que je cite n'existent pas avec les tables...)

Pour le bien, il faudrait quelque chose comme pour les tables, avec 9 zones... Comme ça, tu as 4 images pour les 4 coins, 4 autres (d'un pixel de largeur) pour les bords, et une image pour le centre (le fond)... Mais là, le problème est que pour faire des <div> de même taille... j'ai vu des tutos pour feinter CSS, mais pour ce cas là, ça ne marche pas

En tous cas, merci quand même de votre aide, c'est déjà gentil de m'avoir proposé des solutions

D'autres idées?

Salut,

le fait que les images soit larges n'entraine pas un poids si conséqent que ça (loin de là en fait).
pour l'histoire de la largeur c'est moins fatal que l'on croit.

Un exemple limite que j'ai construit avec un seul div :
http://clb56.freezee.org/tests_css/div1_border4/

de plus les exemples de mpop tout comme les miens (il y en a plusieur dans mon site) sont des illustration d'un travail sans div vides et pas seulement en remplacement de tableaux. Comprendre comment ces exemples fonctionnent c'est aussi apprendre comment fonctionnent les css.

Helldream a écrit :
Voila, c'est fait. Petit défaut du 3e (et du 1er, quoi qu'il y aie un alternative), c'est que tu as de très grandes images (toute la largeur de l'écran), qui ne sont affichées qu'en partie pour faire les bords. Ce qui fait que tu charges un grand truc pour n'en utiliser qu'une partie, et donc la page est un peu plus lourde pour rien.

Regarde le poids des images, tu verras. Eh oui, c'est la magie du PNG bien conçu et bien compressé.

Helldream a écrit :
Et imaginons qu'une personne aie un plus grand écran que toi, si tu dépasses la largeur du GIF, bah tu as un trou dans ton cadre

Bon, c'est pas un gif c'est un PNG. Pour la largeur, il suffit de fixer une largeur maximale (ça ne peut s'étendre que jusqu'à un certain point)… ou de savoir à l'avance l'éventail de largeurs des blocs.
D'ailleurs, si tu veux bidouiller la même image pour avoir 3000px de large plutôt que 1200px, ça n'alourdira qu'à peine le fichier.

Helldream a écrit :
Je sais que je suis pointilleux, hein... Mais j'essaie de trouver une solution remplaçant vraiment les <table>, et les avantages que cela procure (car les petits problèmes que je cite n'existent pas avec les tables...)

Hélas, avec les tableaux, il y en a d'autres…

Helldream a écrit :
il faudrait quelque chose comme pour les tables, avec 9 zones...

J'en ai fait 6 pour économiser, et pour ne pas rajouter des éléments vides dans mon code. Mais bon, on peut en faire 9, pourquoi pas… Mais dans ce cas, je sais pas si c'est vraiment mieux qu'un tableau à neuf cellules. Si, peut-être, car une partie de ces éléments ne seront pas vides, contre un seul avec un tableau.

Bon, finalement vous m'avez convaincu, j'ai utilisé les PNG en partie caché Merci de votre aide.

Je peux abuser un peu de votre gentillesse? J'ai simplifié le code au maximum, afin d'en comprendre le sens, et voila ce que j'obtiens :
CSS:

*
{
	margin: 0;
	padding: 0;
}

#conteneur
{
	width:300px;
	background: url(border_left.png) no-repeat left top; /*on peux changer la couleur du fond ici*/
	padding-left: 41px;
	padding-top: 41px;
}

#sub_conteneur
{
	background:url(border_right.png) no-repeat right bottom;
}

#sub_conteneur .first_element
{
	background:url(border_top.png) no-repeat right top;
	position:relative;
	top: -41px;
	margin: 0;
	padding: 56px 56px 0px 15px; /* le 56 correspond à 15px de marge, + les 41px de la bordure*/
}

#sub_conteneur .last_element
{
	background:url(border_bottom.png) no-repeat left bottom;
	margin-right: 41px;
	margin-left: -41px;
	margin-bottom: 0;
	padding: 0px 15px 56px 56px;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="content-language" content="fr" />
		<title></title>
		<link rel="stylesheet" media="screen" type="text/css" href="style4.css" />
	</head>

    <body id="body">
        <div id="conteneur">
            <div id="sub_conteneur">
		<div class="first_element">test
                </div>
                <div class="last_element"> </div>
            </div>
        </div>
    </body>
</html>

Voici le lien de mon site de test: http://www.les-heritiers-de-ma-duk.info/helldream/index4.php

Comme vous pouvez le voir, il me reste un grand vide, en bas du cadre, que je n'arrive pas à enlever. Quelqu'un pourrait-il m'expliquer quoi faire?

je te donnerai dans la journée une methode tres simple pour faire des cadres arrondis .

Helldream a écrit :

Comme vous pouvez le voir, il me reste un grand vide, en bas du cadre, que je n'arrive pas à enlever. Quelqu'un pourrait-il m'expliquer quoi faire?

Salut,

Sur la méthode, je t'invite vraiment à raisonner au minimum sur un document factice comprenant un balisage réel (h1, h2, p, ul, etc...). en ne le faisant pas tu es déjà en phase pré-divite .

sinon en repartant très pragmatiquement du document que tu as mis en lien, si je modifie la css comme suit :

*
{
	margin: 0;
	padding: 0;
}

#conteneur
{
	width:300px;
	background: url(border_left.png) no-repeat left top; /*on peux changer la couleur du fond ici*/
	padding-left: 41px;
	/*padding-top: 41px;*/
}

#sub_conteneur
{
	background:url(border_right.png) no-repeat right bottom;
}

#sub_conteneur .first_element
{
	background:url(border_top.png) no-repeat right top;
	/*position:relative;
	top: -41px;*/
/*margin-top:-41px;*/
	padding: 41px 56px 0px 15px; /* le 56 correspond � 15px de marge, + les 41px de la bordure*/
}

#sub_conteneur .last_element
{
	background:url(border_bottom.png) no-repeat left bottom;
	margin-right: 41px;
	margin-left: -41px;
	padding: 0px 15px 25px 56px;
}

Alors ça roule, mais c'est plutôt à toi de faire tes propres expérimentations pour comprendre quelle propiété entraine quel effet et finalement quel est le meilleur choix.
Mon exemple dont tu es parti ne servait qu'à prouver qu'à tout le moins c'était possible.

si tu veux un exposé plus rationnel tu peux lire :
http://clb56.freezee.org/test_roundcorner/
Cela part de simple coins mais la logique est la même dans le cas de bordures.

Mais il s'agit là aussi de partir d'un code html concret. au passage un des problèmes annexes que pose l'emploi des div, c'est qu'en tant que balises neutres elles n'ont pas (peu) de propriétés par défaut. or il est nécessaire d'intégrer ces propriétés dans l'élaboration d'une css. en l'état la feuille de style ci dessus n'irait sans doute pas si le .first_element était un h1 ou un p.

Tu as raison, c'est à moi de chercher, et c'est d'ailleur ce que je fais

La preuve, tu as sûrement vu 2 ou 3 commentaires dans le css, et j'ai modifié quelques choses pour que cela se rapproche de ce que je connais. Il faut dire, je me casse les dents sur les cadres depuis une bonne dizaine d'heure, c'est pour ça que j'ai demandé un petit coup de pousse

Comme je débute en css (j'en avais déjà utilisé, mais juste pour définir des polices, des couleurs de fonds etc).

Je vais regarder les liens que tu m'as filé (d'ailleur si tu en as d'autres concernant les défauts que tu as vu dans mon bout de code, n'hésites pas, je suis preneur ). Je cherche avant tout à apprendre

Merci en tous cas de votre bonne humeur, et de vos conseils

Pourquoi tant d'acharnement contre le "div"?
N'est-ce pas une balise html au meme titre que "p" ou "hn" ou "ul"?
Si dans un code on emploie <p id="">aa</p> ,
semantiquement quelle valeur de plus que <div id=""><p>aa</p></div> ?
on peut construire un cadre graphique en n'utilisant que des p ou ul et personne ne trouvera a redire pourtant la construction sera la meme.
il y autra des p float:left ou right ul background url() etc...
Modifié par jp94 (29 May 2006 - 13:45)

Disons que pour moi, les <Hx>, par exemple, sont des balises qui définissent les titres (leur taille, leur police, leurs marges, ...). Ainsi, que le h1 se trouve dans un cadre, dans une liste, ou n'importe où sur la page, il sera le même.

Par contre, j'utilise les <div> pour placer les éléments de "décoration" (comme les cadres). Ainsi, si quelqu'un a envie de faire un cadre, et de ne pas mettre de balise <p> ou <h1>, bah le cadre sera toujours là. Alors que si le cadre dépend des autres balises, et que la personne ne veux pas mettre de titre, ou ne met pas de <p class="last_element">, il est embêté.

Je ne dis pas que mes justifications sont bonnes, mais elles ont le mérite d'exister (je ne fais pas ça sans raisons)... Mais c'est vrai que le défaut, c'est un nombre de balises plus important, et pas forcément nécessaire...

jp94 a écrit :
Pourquoi tant d'acharnement contre le "div"?
N'est-ce pas une balise html au meme titre que "p" ou "hn" ou "ul"?
Si dans un code on emploie <p id="">aa</p> ,
semantiquement quelle valeur de plus que <div id=""><p>aa</p></div> ?
on peut construire un cadre graphique en n'utilisant que des p ou ul et personne ne trouvera a redire pourtant la construction sera la meme.
il y autra des p float:left ou right ul background url() etc...

Ne pas comprendre que les css sont faites pour s'appliquer à un document html réel, organisé, structuré, hiérarchisé grâce à un balisage de description pertinent c'est ne rien comprendre aux css. Qu'après il faille des div c'est évident et non problématique (et il peut même y en avoir beaucoup si besoin est) mais justement c'est après.

Une chose devrait être fermement établie. On peut parfaitement faire un document html et même tout un site sans envisager le moindre traitement par les css media="screen", ce site sera parfaitement consultable et sans le moindre problème. Par contre on ne peut pas élaborer une css en elle même parce que cela n'a tout simplement aucun sens.
La divite n'est sans doute rien d'autre que le symptôme de cette logique insensée.

Ceci doit d'autant plus être fixé que ce que l'on écrit s'adresse ou peut être lu par des débutants sur le sujet.


maintenant une devinette :
Comment centrer tout le contenu d'un site sur une largeur de 500px sans un seul div ?

clb56 a écrit :
maintenant une devinette :
Comment centrer tout le contenu d'un site sur une largeur de 500px sans un seul div ?

Avec un span en display: block ?

Nan, sans déconner :

body {width: 500px; margin: 0 auto;}

mpop a écrit :

Avec un span en display: block ?

Nan, sans déconner :

body {width: 500px; margin: 0 auto;}

Compatible less than IE6 (je fais les vérifs en faisant basculer IE6 en mode quirck)

clb56, mon argument pour l'utilisation de <div> est-il justifié?

Pour moi une div est un conteneur. Faire un div vide, j'aime pas trop ça. J'utilise plutôt les div pour grouper certains éléments qui logiquement vont ensemble (comme un menu composé de plusieurs listes de liens, ou une zone principale de contenu dans laquelle viendra se loger un article), et que je veux représenter graphiquement comme étant groupés. Au niveau de l'information sémantique, les div n'apporte pas grand chose. Ils sont ignorés par Lynx, et sans doute (à confirmer) par les lecteurs d'écran.

Les div imbriqués sont à éviter, mais leur impact est moins fort que celui des tableaux imbriqués, car un tableau transmettant une information sémantique propre, il ne peut être ignoré de la même manière qu'une succession de divs.

Si vraiment j'ai besoin de faire un bloc vide pour une mise en page, j'utiliserais plutôt un élément de plus "faible" importance, par exemple un span en affichage de type bloc (display: block) si nécessaire.

Et vaut-il mieux utiliser un <span> vide, ou un <p> vide?

En fait, avec ce que tu m'as dit, je verrais bien un truc de ce genre :

<div class="cadre"> /*affiche la partie gauche du cadre*/
    <h1 class="titre">titre</h1> /*affiche la partie haute+le titre*/
    <p class="contenu">contenu</p> /*affiche la partie droite, + le contenu*/
    <je-sais-pas-quoi class="fin"></je-sais-pas-quoi> /*affiche le bas */
</div>

Donc la dernière balise serait vide...
Ce principe tient-il plus la route que mon code plus haut dans les posts? Et que mettre, dans ce cas, comme dernière balise?