Conteneur en coins arrondis...

24 nov. 2006, 18:25

Bonjour,
j'ai envie de faire un design avec un conteneur à coin arrodis, j'ai donc essayer cette tecknique, trouvé sur se post
http://www.phpfrance.com/forums/voir_su ... asc-15.php
Ce qui donne
http://creatif-web.be/assoc/css/coin_arrondis.php
sous IE j'ai un bug avec les coins arrondis.
Mais c'est peut être pas la meilleurs façon d'attaquer le problème :
j'ai repris le code de l'exemple en changeant la largeur de la boite en 100%

Code : Tout sélectionner

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<style>
.relsample { width: 100%; position: relative; background-color: #FF0000; }
.relsample .top_left, .relsample .top_right, .relsample .bottom_left, .relsample .bottom_right
 { height: 19px; width: 19px; background-repeat: no-repeat; position: absolute; background-color: #00FF00; }
.relsample .top_left { top: 0px; left: 0px; background-image: url("corner_top_left.gif"); }
.relsample .top_right { top: 0px; right: 0px; background-image: url("corner_top_right.gif"); }
.relsample .bottom_left { bottom: 0px; left: 0px; background-image: url("corner_bottom_left.gif");  }
.relsample .bottom_right { bottom: 0px; right: 0px; background-image: url("corner_bottom_right.gif");  }
.relsample .content { position: relative; padding: 12px; }
</style>
</head>

<body>
<div class="relsample">
	<div class="top_left"></div>
	<div class="top_right"></div>
	<div class="content">Ceci est un exemple<br />qsdqsdqsdqs</div>
	<p>OOOOOooooooooooo</p>
	<div class="bottom_left"></div>
	<div class="bottom_right"></div>
</div>
</body>

EDIT -> j'ai enlever les z-index qui ne servent à rien...

24 nov. 2006, 18:53

les z-index permettent au texte d'être au dessus des images

Chez moi, sous FF 2.0, le coin bas-droite passe au dessus du texte et le cache

24 nov. 2006, 18:57

oui mais que pour les positions absolutes,, là c'est des float, bon sa décore un beau Z, lol
EDIT ->
dsl, je n'ai pas lu la fin de ta phrase, pour iillustrer mes propos.
FF 2
http://creatif-web.be/assoc/css/prise_ecran.gif
Sa pose un problème serai ce un bug de FF ?¿?¿?¿?¿

24 nov. 2006, 23:15

finalement sa fonctionne pas avec les '%', mais en 'px' sa passe.
Donc un conteneur de cette manière n'est viable.
@Zeus ->
effectivement le placement est en 'absolute', je ne l'avais pas remarquer, il sépare astucieusement les règles fixes et variable.
Sa fonctionne très bien sans.
Rectification avec des 'em' le cadre est extensible en hauteur et largeur.

29 nov. 2006, 10:21

bonjour,

La mise en place de coins arrondis suppose que l'on ait les conteneurs pour appliquer les images background.

Ce qu'il faut comprendre c'est que dans un document html réellement constitué avec un contenu et le balisage pertinent qui le décrit en structurant le document, ces conteneurs sont déjà présents.

Un exemple des plus basiques, un simple menu :

Code : Tout sélectionner

<ul>
<li><a href="">Lien 1</a></li>
<li><a href="">Lien 2</a></li>
<li><a href="">Lien 3</a></li>
<li><a href="">Lien 4</a></li>
</ul>

L'ensemble que représente ce menu constitue une section particulière du flux linéaire du document. Les balises <hn> (h1, h2, h3, etc...) servent justement à la structuration du document en annonçant ces sections.

Donc

Code : Tout sélectionner

<hn>Tel menu</hn>
<ul>
<li><a href="">Lien 1</a></li>
<li><a href="">Lien 2</a></li>
<li><a href="">Lien 3</a></li>
<li><a href="">Lien 4</a></li>
</ul>

On a donc un enchainement dans le flux de deux balises de type block, <hn> et <ul>, qui forment un tout.

La balise qui permet de la manière la plus générale le regroupement de plusieurs balises block est <div>, c'est sa fonction.

Donc

Code : Tout sélectionner

<div>
<hn>Tel menu</hn>
<ul>
<li><a href="">Lien 1</a></li>
<li><a href="">Lien 2</a></li>
<li><a href="">Lien 3</a></li>
<li><a href="">Lien 4</a></li>
</ul>
</div>

On peut je pense considérer qu'il s'agit là d'un fragment de code html tout aussi minimal que banal.

Comme je l'ai dit au début, pour mettre des coins arrondis en css il faut des conteneurs. Et justement :
. <div> est un conteneur
. <hn> est un conteneur
. <ul> est un conteneur
. Chaque <li> est un conteneur
. Chaque <a> est un conteneur
ils sont tous autant de supports pour la mise en oeuvre de css.

Une fois que l'on a compris comment un document html devait être considéré et constitué en lui même, alors la mise en place de 4 coins arrondis est une formalité. Y compris en design fluide.

Conteneur en coins arrondis...

Qui est en ligne