Conteneur en coins arrondis...

par **clb56** » 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.

par **artotal** » 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.

par **artotal** » 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 ?¿?¿?¿?¿

par **zeus** » 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

par **artotal** » 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...

Conteneur en coins arrondis...

Répondre

Étendre la vue Revue du sujet : Conteneur en coins arrondis...

Conteneur en coins arrondis...