28220 sujets

CSS et mise en forme, CSS3

[Résolu] Boite aux coins arrondis


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

<style type="text/css">
.arrondis {
	position:absolute;
	width:100%; 
	background-color:#FD3917; 
	color:#000; 
	border:0px;margin:0px;padding:0px;}

.chg, .cbg, .chd, .cbd {
	position:absolute; 
	width:20px; 
	height:20px; 
	color:#89a; 
	background:#fff;
	overflow:hidden;border-style:none;border:0px;margin:0px;padding:0px;}

.chg {top:0px; left:0px;}

.cbg {bottom:0px; left:0px;}

.chd {top:0px; right:0px;}

.cbd {bottom:0px; right:0px;}

.quadtl, .quadtr, .quadbl, .quadbr {
	position:absolute; 
	font-size:150px; 
	font-family:arial; 
	color:#89a;
	line-height:40px;border:0;margin:0;padding:0;}

.quadtl {left:-8px;}

.quadtr {left:-25px;}

.quadbl {left:-8px; top:-17px;}

.quadbr {left:-25px; top:-17px;}

.txt {padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; }

</style>

</head>

<body>

<div class="conteneur">

<div class="arrondis">

<div class="chg"><div class="quadtl">&bull;</div></div>
<div class="cbg"><div class="quadbl">&bull;</div></div>
<div class="chd"><div class="quadtr">&bull;</div></div>
<div class="cbd"><div class="quadbr">&bull;</div></div>

<div class="txt">
le texte de la boite ...
</div> 

</div>

</body>
</html>


Je suis en train de reecrire un bout de code original trouve sur le net pour faire des boites arrondies sans images ... ca marche super bien mais sous IE il y a un leger defaut ... si qq voit une solution ...
Modifié par touriste (27 Mar 2005 - 14:36)
Ah j'oubliais le probleme vient de width:100%

Avec width:350px ca marche parfaitement bien

je soupconne un bug IE
Quelque-chose m'échappe, là : le code ci-dessus repose sur 4 caractères boulet (&bull;) placés dans le code XHTML, puis agrandis et tronqués via CSS... Quel intérêt par rapport à 4 images de coins arrondis placés dans le même code XHTML ? Smiley lol

En revanche, je vois mieux les inconvénients :
- Les images, elles, au moins, pourront disparaître dans un media oral grâce à leur alt="", alors que les boulets seront lus.
- Résultats... imprévisibles en cas d'application d'une police différente par l'utilisateur (où le caractère ne sera pas forcément dimensionné de la même manière). Au fait, contrairement à ce que l'on pense souvent, Arial n'est pas une police universelle.
- résultats également imprévisibles si les tailles de polices spécifiées par l'auteur sont ignorées par l'utilisateur (option d'accessibilité IE, par exemple)
- résultat très laid si on agrandit les caractères dans Firefox
- Bibouille de présentation qui, sur le fond, n'a rien à faire en XHTML1.1
- etc

Rien n'est plus imprévisible qu'une police de caractère. Rien n'est plus prévisible qu'une image. Pour un effet de ce type, mieux vaut savoir où on va.

Et quitte à faire un code comprenant des éléments de présentation (ce qui est tout à fait légitime), autant le faire proprement...
Modifié par Laurent Denis (27 Mar 2005 - 05:51)
Administrateur
http://forum-images.hardware.fr/icones/smilies/hello.gif
touriste a écrit :

Je suis en train de reecrire un bout de code original trouve sur le net pour faire des boites arrondies sans images ... ca marche super bien mais sous IE il y a un leger defaut ... si qq voit une solution ...

Quel dommage en effet que ça ne marche pas sous IE!

Au revoir, touriste
Modifié par Felipe (27 Mar 2005 - 08:01)
Je refuse energiquement de meler des bouts d'images (4 en plus) dans du bon code css/html !

La solution legale c'est l'instruction css qui arrondit les angles mais aucun navigateur ne la supporte ...

La j'ai ete seduit par le fait que l'image est juste un caractere dont on peut regler la couleur dans le css ce qui est plus souple

Ca marche bien sous Firefox ... il reste un minuscule defaut sous IE mais j'y travaille Smiley smile

Sinon l'idee n'est pas de moi: http://www.stunicholls.myby.co.uk/
Moi j'airais plutot vu un truc dans ce genre:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

<style type="text/css">
.arrondis {
position:absolute;
width:100%; 
background-color:#FD3917; 
color:#000; 
border:0px;
margin:0px;
padding:0px;}

.entete{
background-color:#666666;
height:25px;

}

.footer{
background-color:#666666;
height:25px;
}

.hg{
float:left;
background-image:url(coin.gif);
background-position:top left;
height:25px;
width:25px;
}

.hd{
float:right;
background-image:url(coin.gif);
background-position:top right;
height:25px;
width:25px;

}

.bg{
float:left;
background-image:url(coin.gif);
background-position:bottom left;
height:25px;
width:25px;

}

.bd{
float:right;
background-image:url(coin.gif);
background-position:bottom right;
height:25px;
width:25px;

}
.txt {padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; background-color:#666666; }

</style>

</head>

<body>

<div class="conteneur">

	<div class="arrondis">
		<div class="entete">
			<div class="hg"></div>
			<div class="hd"></div>Texte à placer ici pour un titre par exemple: 
		</div>
		
		<div class="txt">
		le texte de la boite ...
		</div>
		 
		<div class="footer">
			<div class="bg"></div>
			<div class="bd"></div>Texte à placer ici pour un enonce de footer par exemple [decu]Attention le depassement deforme la cellue)
		</div>
	</div>
</div>
</body>
</html>
Il est à noter que l'image est un cercle gris de 50px de diamètre sur fond blanc.
Tu n'utilise pas d'image dans le HTML,vu que c'est un background et en plus tu ne charge qu'une image et pas 4. Smiley smile
Deuxième solution compatible uniquement mozilla Smiley decu mais hyper efficace. Elle allège considérablement le code HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.boite_arrondie{
height:100px;
width:100px;
background-color:red;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

}
-->
</style>
</head>

<body>
<div class="boite_arrondie">
allo
</div>
</body>
</html>
touriste a écrit :
Je refuse energiquement de meler des bouts d'images (4 en plus) dans du bon code css/html !


C'est tout à fait ton droit. Mais c'est une erreur. Dont le résultat es t un très mauvais code HTML/CSS, qui fait ce que tu sembles vouloir éviter (mêler structure et présentation), et qui le fait avec un résultat pitoyable dans de nombreuses conditions de rendu.

touriste a écrit :

La solution legale


Légale ? légale ??

Ahhh... bah... S'il y a du "légal", maintenant, moi, je retourne faire du conforme, du valide, voire de la qualité Web, même. ça, je sais faire. Mais du "légal", désolé, je n'ai pas vu passer l'article de loi.

Donc, il y a:
- ce qui est valide, c'est à dire respectant des règles syntaxiques et quelques règles sur le contenu.
- ce qui est conforme, c'est à dire respectant à la fois DTD et contraintes hors DTD de la spécification

Une image de présentation respecte l'un et l'autre. Les diverses solutions à base d'images d'arrière-plan CSS également. Celle consistant à réserver les coins arrondis à Mozilla en utilisant son extension CSS -moz-radius... également. Il respectent en outre nettement mieux ce que ce bidule enfreint, c'est à dire le qualitatif.

Au dela du valide, en effet, ce truc de boulet ( Smiley cligne ) enfreint une demi-douzaines de recommandation (sur l'accessibilité, sur l'interopérabilité et l'indépendance envers le dispositif de rendu, sur l'utilisation des caractères (IETF), etc).

Donc, en sus d'être quantitativement valide, les images de présentation vont être ici qualitativement nettement préférables.

touriste a écrit :

c'est l'instruction css qui arrondit les angles mais aucun navigateur ne la supporte ...


Eh ben non, justement. Il ne s'agit pas d'une propriété légal au sens où tu l'entends. C'est une extension propriétaire Mozilla (parfaitement valide en CSS2.1) d'une part, et un projet de propriété en CSS3 (non implémentable car encore au stade de Working Draft, et non de Candidate Recommandation), d'autre part.

Donc, oui, à l'avenir, le moment venu, ce sera la solution recommandable de préférence à toute autre. Mais pour l'instant, c'est un gadget expérimental, dénué de toute valeur "impérative".

touriste a écrit :

La j'ai ete seduit par le fait que l'image est juste un caractere dont on peut regler la couleur dans le css ce qui est plus souple


C'est surtout beaucoup plus inefficace comme rendu selon les conditions utilisateur, comme j'ai essayé de te l'expliquer. On ne contrôle pas le rendu d'un caractère comme celui d'une image !

touriste a écrit :

Ca marche bien sous Firefox ... il reste un minuscule defaut sous IE mais j'y travaille Smiley smile


Eh ben... Après IE, tu vas pouvoir travailler à beaucoup d'autres problèmes de rendu, à commencer par le fait que je ne VEUX PAS entendre "boulet boulet boulet boulet" dans mon lecteur d'écran, ce qui sera le rendu de base de ce caractère répété. Saloper un rendu vocal pour bidouiller un rendu visuel, cela n'a donc rien de gênant ? C'est à peu près du niveau de l'ASCII-ART. D'ailleurs, c'est du ASCII ART déguisé, façon branché, avec CSS.

touriste a écrit :

Sinon l'idee n'est pas de moi: http://www.stunicholls.myby.co.uk/


<censuré>(Je le lui dirai directement)</censuré>
Modifié par Laurent Denis (27 Mar 2005 - 14:17)
Vero a écrit :
Compliqué d'arrondir les angles pour tout le monde !
Smiley dehors


Parfois, devant certaines choses, j'avoue que j'apprécie la simplicité des angles bien carrés Smiley lol
a écrit :
<censuré>(Je le lui dirai directement)</censuré>


OK. J'avais bien compris que je ne devais pas compter sur toi pour debogguer mon code Smiley smile

Mais l'argumentation technique est convaincante. J'adhere !

Je n'avais pas pense a cette histoire de vocal ... en fait j'ignorais que ca existais ...

Il va donc falloir que je prenne des images mais j'en ai tellement horreur que je crois que mon site sera en coins carres !
Modifié par touriste (27 Mar 2005 - 14:38)
touriste a écrit :
Je n'avais pas pense a cette histoire de vocal ... en fait j'ignorais que ca existais ...


Si tu veux t'épargner le téléchargement d'un lecteur d'écran (IBM HPR utilisable un mois, Jaws utilisable 40mn après démarrage de la machine), tu peux te faire une idée très approximative du rendu vocal avec Opera 8.0 bêta (attention, il ne lit que l'anglais, et après sélection du texte à lire : ce n'est pas un lecteur d'écran).

touriste a écrit :
Il va donc falloir que je prenne des images mais j'en ai tellement horreur que je crois que mon site sera en coins carres !


Pourquoi ne pas utiliser les extensions CSS Mozilla, qui te donneront au moins la satisfaction des arrondis dans Firefox ?
Oui en effet j'ai teste la solution proposee ici par oc2b et ca rend parfaitement dans Firefox tout en restant en coins carres acceptables dans IE6.

Je vais voir si je me sens de rajouter un peu de code en sachant que les IE ne me verront pas ... la on est plus dans la technique mais dans le ... feeling Smiley smile

Merci quand meme.
Sujet clos
Aller à