Cadre arrondi

bonjour,

En m'inspirant de ce qui se trouve ici :
http://articles.e-t172.net/round/

J'ai réussi à faire ca :
http://img349.imageshack.us/img349/710/capturexb0.jpg






voici le code css

.relsample {top: 20px; left: 50px;  width: 240px; position: relative;}
.relsample .top_left, .relsample .top_right, .relsample .bottom_left, .relsample .bottom_right
{ height: 30px; width: 30px; background-repeat: no-repeat; position: absolute;  }

.relsample .top_left 
{ top: 0px; left: 0px; background-image: url("hautGauche.png"); z-index: 0;}

.relsample .top_right
{ top: 0px; right: 0px; background-image: url("corner_top_right.gif"); z-index: 

5;background-color:e6e6ff;
border-top:2px solid #000099;border-right:2px solid #000099;}

.relsample .bottom_left
{ bottom: 0px; left: 0px; background-image: url("corner_bottom_left.gif"); z-index: 6; 

background-color: e6e6ff;
border-left:2px solid #000099;  border-bottom:2px solid #000099;}



.relsample .bottom_right
{ bottom: 0px; right: 0px; background-image: url("basDroit.png"); z-index: 7; 
}

.relsample .content { top: 0px; left: 0px;  position: relative; padding: 10px; z-index: 8; }/*ne 

surtout pas mettre de background car ca recouvre tout*/


.relsample .fondVertical {  padding: 10px; z-index: 0; 
margin: 0px 30px 0px 30px;
border-top:2px solid #000099;  border-bottom:2px solid #000099; background:green;}

.relsample .fondHorizontal {  padding: 10px; z-index: 0; 
margin: 30px 0px 30px 0px;
border-left:2px solid #000099;  border-right:2px solid #000099; background:red;}

et le code html

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

Ce que je voudrais obtenir est ca :
http://img408.imageshack.us/img408/7749/jeveuxke4.jpg

Merci d'avance pour vos conseils
Modifié par Mense (01 Dec 2006 - 17:46)

Bonjour...

D'après ce que j'ai pu constaté, tu as oublié le backouground sur les différents éléments qui font que justement le cadre sera plein. Cependant, au contraire de l'exemple, tu as une bordure à rajouter en plus.

Je commencerais donc déjà par ajouter le background pour voir ce que cela donne :

.relsample .top_left, .relsample .top_right, .relsample .bottom_left, .relsample .bottom_right { 
height: 30px; 
width: 30px; 
background-repeat: no-repeat; 
position: absolute;
[#darkblue]background-color: #e6e6fe;[/#]
}

Ensuite pour les bordures c'est une autre paire de manche ...
Je vais essayer de voir ça ...
Mais le problème réside à mon avis dans les bordures, as-tu réellement besoin d'un cadre fluide en hauteur et en largeur ?!?

Salut,

Déjà commences par remplacer ton bazard de html

<div class="relsample">

			<div class="top_left"></div>

			<div class="top_right"></div>

			<div class="content">Ceci est <br>un exemple </div>

			<div class="bottom_left"></div>

			<div class="bottom_right"></div>

</div>

Par

<div class="content">
<p class="first-element">
Ceci est
</p>
<p class="last_element">
un exemple
</p> 
</div>		

Déjà ça te donneras la satisfaction d'avoir un code html qui ressemble à queque chose

En plus en regardant d'un peu plus près tu verras que miraculeusement trois de tes bordures sur quatres viennent d'être placées (à peu de chose près).

Pour la quatrième ben faut voir un code réel un peu plus étoffé. avant de décider.

à partir de du code que tu donne le plus simple et le plus intuitif serait un doublage pur et simple du div

<div class="content">
<div class="sub_content">
<p class="first-element">
Ceci est
</p>
<p class="last_element">
un exemple
</p>
</div><!-- fin .sub_content --> 
</div><!-- fin .content --> 		

Mais il y a assez peu de raisons finalement que dans un document réel on en arrive à une situation ainsi non raccordée à une structuration justifiée du document.
Modifié par clb56 (01 Dec 2006 - 19:14)

Cygnus a écrit :
Bonjour...

Je commencerais donc déjà par ajouter le background pour voir ce que cela donne :

J'ai déjà testé mais il ne faut pas le mettre sur les coins.
Le seul endroit ou on peut le mettre c'est pour

.relsample {top: 20px; left: 50px;  width: 240px; position: relative;}

mais de toute façon c'est pas compatible avec mes bordures ...

Cygnus a écrit :

as-tu réellement besoin d'un cadre fluide en hauteur et en largeur ?!?

non ... ptet pas en largeur.
En fait c'est pour faire des sous-menus (mais qui n'auront peut-ête pas la même largeur auquel cas je devrais créer plusieurs images de largeur ... ca m'embète un peu) par contre faut que ce soit ajustable (au moins en hauteur) pour qu'en augmentant la taille de la police, il n'y ai pas de problème de mise en page.

Et il pourrait également servir pour le contenu de ma page.
(car en fait pour le menu je voulais même un peu plus compliqué à la base ... et j'aimerais toujours ... si j'y arrive...)

Je vais vous mettre une image de ce que je voudrais réeellement pour le menu

clb56 a écrit :
Salut,

Déjà commences par remplacer ton bazard de html

Heu ... je veux bien .... mais je ne vois pas du tout à quoi doit ressembler mon css pour

pouvoir mettre le html que tu proposes

clb56 a écrit :

Pour la quatrième ben faut voir un code réel un peu plus étoffé. avant de décider.

En fait pour l'instant je n'ai pas le code complet de la page.
Je compte utiliser les div ainsi créer, pour me créer un sous-menu.


Merci
Modifié par Mense (04 Dec 2006 - 09:20)

Voila à peu près ce que je voudrais.

http://img222.imageshack.us/img222/629/menujeveuxkt9.png

En résumé, je voudrais pouvoir créer (facilement) "mon design" avec des agencements de ces 2 couleurs parfois remplies, parfois en contour, parfois pour un menu parfois pour le contenu ou même pour le fond ...

C'est trop dur ?

Vous pensez que je dois mettre des largeurs fixes ?
Je prends note de tous les conseils !

Mense a écrit :
Voila à peu près ce que je voudrais.

http://img222.imageshack.us/img222/629/menujeveuxkt9.png

En résumé, je voudrais pouvoir créer (facilement) "mon design" avec des agencements de ces 2 couleurs parfois remplies, parfois en contour, parfois pour un menu parfois pour le contenu ou même pour le fond ...

C'est trop dur ?

Vous pensez que je dois mettre des largeurs fixes ?
Je prends note de tous les conseils !

Ah ben voilà... Un peu de contenu, même factice, et tout s'éclairci

a écrit :

C'est trop dur ?

Non c'est simplissime.

pour le html tu mets comme il se doit.

<div id="conteneur_menu">
<hn>Mon titre</hn>
<ul>
<li><a href="">Lien 1</a></li>
<li><a href="">Lien 2</a></li>
...
<li class="last_element"><a href="">Lien n</a></li>
</ul>
</div>

Pour le reste ben je t'invite à lire mon petit topo là dessus :
http://www.clb56.fr/test_css/test_roundcorner/

Il y a trois pages, les deux premières concernent les coins arrondis stricto sensu. La troisième aborde la question des quatres bordures graphiques.
Le tout bien sur en fluide.

Il y a un exemple de mise en oeuvre (4 bordures) dont la css est visible dans le code source.
c'est ici :
http://www.clb56.fr/test_css/test_4bordures/exemple_2/

En t'en inspirant tu devrais facilement pouvoir régler ton problème.
Modifié par clb56 (04 Dec 2006 - 17:53)

Un truc que tu peux essayer, c'est un peu accrobatique, mais ça marche c'est ça:

</div class="menu">
<h3 class="tl">Titre</h3>
<ul class="br">
<li>Liens 1</li>
<li>Liens 2</li>
</ul>
</div>

<style>
.menu{border:2px solid #codecouleurblue;position:relative}
.tl{background: #codecouleurblue url(ton_image_coin_top_left} no-repeat top left;
position: absolute; top: -2px; left:-2px;}
.br{background: url(ton_image_coin_bottom_right} no-repeat top left;
position: absolute; bottom: -2px; right:-2px;}
</style>

Modifié par matmat (04 Dec 2006 - 17:31)

et bien ca me fait de la lecture ...
Merci.

Je reviendrais dire ce qu'il en ait quand j'aurais fait mes tests.

matmat, j'ai essayé ton code.
mais comme il y a des erreurs, je ne suis pas sur de tous avoir corrigé correctement ... bref ca ressemble pas du tout à ce que je veux ...


clb56 : merci pour tes tutos, ils sont supers.
Cela m'a permi de mieux comprendre comment bien utiliser les css.

Par contre !! je crois que mon gros problème est que "le fond de mes images d'arrondi" est transparent !! et je ne vois pas comment le garder transparent et que ca fonctionne bien pour autant...

(je ne sais pas si mon fond de page sera uni ou non ... et je préferais pas en fait ... donc j'aimerais bien garder ce fond d'image transparent)
mais j'ai essayé de jouer sur la marge ... ca ne va pas.

En fait faudrait ptet que j'arrive à superposer mes calques... mais j'ai vraiment du mal ... je vais chercher un tuto la dessus ...