Cadre avec bords arrondis extensibles html+css

Version imprimable

Salut,
Je souhaite créé un cadre avec des bords en couleur (pas des images si possible).
j'ai un problème avec les bordures verticales que je voudrais utiliser.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?xml version="1.0" encoding="UTF-8"?> 
<!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>
                <title>Cadres arrondis</title>
                <style type="text/css">
.cadre { width: 500px; position: relative; }
.top_left,  .top_right, .bottom_left, .bottom_right { height: 50px; width: 50px; background-repeat: no-repeat; position: absolute; }
.top, .bottom {height: 50px; background-color: red; background-repeat:repeat-x}
.left, .right {width: 50px; background-color: blue; background-repeat:repeat-y}
.top { top: 0px; z-index: 1; }
.left { left: 0px; z-index: 8; }
.bottom { bottom: 0px; z-index: 2; }
.right { right: 0px; z-index: 7; }
.top_left { top: 0px; left: 0px; background-image: url("haut_gauche.png"); z-index: 4; }
.top_right { top: 0px; right: 0px; background-image: url("haut_droite.png"); z-index: 5; }
.bottom_left { bottom: 0px; left: 0px; background-image: url("bas_gauche.png"); z-index: 6; }
.bottom_right { bottom: 0px; right: 0px; background-image: url("bas_droite.png"); z-index: 3; }
.content {background-color: green; padding: 60px; z-index: 0; }
                </style>
        </head>
 
        <body>
<div class="cadre">
	<div class="top_left"></div>
	<div class="top"></div>
	<div class="top_right"></div>
	<div class="left"></div>
	<div class="content">Ceci est un exemple<br><br></div>
	<div class="right"></div>
	<div class="bottom_left"></div>
	<div class="bottom"></div>
	<div class="bottom_right"></div>
</div>
        </body>
</html>

quelqu'un pourrait m'aider je cherche depuis 2h sur le web et les solutions que je test ne donnent pas ce que je veux.
Vous avez peut-etre d'autres solutions. Je cherche a avoir un cadre extensible forcé uniquement par le contenu (pour l'aspect vertical) et de la largeur du cadre (pour l'horizontal)
Merci

Citation:

Envoyé par Sololupa

Salut,
Je souhaite créé un cadre avec des bords en couleur (pas des images si possible).
j'ai un problème avec les bordures verticales que je voudrais utiliser.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?xml version="1.0" encoding="UTF-8"?> 
<!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>
                <title>Cadres arrondis</title>
                <style type="text/css">
.cadre { width: 500px; position: relative; }
.top_left,  .top_right, .bottom_left, .bottom_right { height: 50px; width: 50px; background-repeat: no-repeat; position: absolute; }
.top, .bottom {height: 50px; background-color: red; background-repeat:repeat-x}
.left, .right {width: 50px; background-color: blue; background-repeat:repeat-y}
.top { top: 0px; z-index: 1; }
.left { left: 0px; z-index: 8; }
.bottom { bottom: 0px; z-index: 2; }
.right { right: 0px; z-index: 7; }
.top_left { top: 0px; left: 0px; background-image: url("haut_gauche.png"); z-index: 4; }
.top_right { top: 0px; right: 0px; background-image: url("haut_droite.png"); z-index: 5; }
.bottom_left { bottom: 0px; left: 0px; background-image: url("bas_gauche.png"); z-index: 6; }
.bottom_right { bottom: 0px; right: 0px; background-image: url("bas_droite.png"); z-index: 3; }
.content {background-color: green; padding: 60px; z-index: 0; }
                </style>
        </head>
 
        <body>
<div class="cadre">
	<div class="top_left"></div>
	<div class="top"></div>
	<div class="top_right"></div>
	<div class="left"></div>
	<div class="content">Ceci est un exemple<br><br></div>
	<div class="right"></div>
	<div class="bottom_left"></div>
	<div class="bottom"></div>
	<div class="bottom_right"></div>
</div>
        </body>
</html>

Bonjour

Que de div, que de div... Et vides par dessus le marché :roll:

Lien habituel:

Coins et bordures arrondis en design fluide

Div vide... Pas vraiment si on regarde le css. Ils possèdent chacun des images de fond.

J'utilisais un header sans image avec coins arrondis:
Code:

1 2 3 4 5 6 7 .header { background-color: #E5E5E5; -moz-border-radius: 1em 1em 0 0; -webkit-border-top-left-radius: 1em; -webkit-border-top-right-radius: 1em; color: #000000; }
@++

11/05/2008, 02h54
clb56

Citation:

Envoyé par Sofalkin

Div vide... Pas vraiment

LOL :mouarf:
11/05/2008, 23h18
Sofalkin

Les div vides ne posent aucuns problèmes... En tout cas pas à ma connaissance.
Etique de structuration... Ce n'est que ça... Un div vide fait en général référence à des règles spécifiées dans le css. Rien de mal à ça... Donc pour moi, ce n'est pas "vide".

Après chacun ses trips de chercher la petite bête là ou il n'y a pas lieu... :roll:
12/05/2008, 23h54
clb56
Citation:

Envoyé par Sofalkin

Etique de structuration... Ce n'est que ça... Un div vide fait en général référence à des règles spécifiées dans le css. Rien de mal à ça... Donc pour moi, ce n'est pas "vide".

Et laissez nous nos petits <table> que l'on puisse dream-weaveriser en paix.

Ethique, Ethique... Quel grand mot !!!

Juste ne pas coder idiot, juste ça...

Et tiens au fait pourquoi des <div> et pas des <span> ??????? Ah ben oui tiens ???

Parce qu'en terme de signification html <span> ce serait juste un peu mieux compris dans ce cas... Juste un peu moins idiot.

Coté rendu à l'écran, aucun problème les css sont faites pour ça:
Code:

1 2 3 4 span .this_span { display:block; }
Et basta on n'en parle plus et au moins on sait ce que l'on fait, mais ça bien sur, c'est beaucoup trop en demander.

Alors maintenant au lieu de la jouer "so free rider" répondre aux 5 questions suivantes:

. 1 - c'est quoi <p> ?

. 2 - c'est quoi <div> ?

. 3 - Pourquoi (devinette 1) div n'a pas de marges dans le rendu par défaut css media="screen" des navigateurs ?

. 4 - Pourquoi (devinette 2)
Code:

1 2 3 4 5 6 7 8 9 <div> <div> Blablabli </div> <div> Blablabla </div> </div>
Est valide ?

Alors que:
Code:

1 2 3 4 5 6 7 8 9 <p> <p> Blablabli </p> <p> Blablabla </p> </p>
Ne l'est pas ?

Et oui... Le bréviaire ne suffit pas, je ne demande pas si c'est valide, ou pas... Mais pourquoi, ou pas.

. 5 - Pourquoi (devinette 3) <div> peut il contenir du texte anonyme alors que <p> remplit déjà cette fonction ? ...

... Bon, en fait, c'est pour que <li> puisse contenir du texte anonyme, tout bêtement, et puisse donc, parfois, être considérer comme un <p> qui est élément de liste alors que, de manière conceptuelle (générique), ce doit être un <div> qui est un élément de liste, comme en atteste d'ailleurs les valeurs pas défaut des css UA --> margin:0; ou auto ;) ...

Elle est où la petite bête ? ... Mais il n'y en a pas bien sur, tout cela est merveilleusement et très intelligemment pensé... Et nous serions tous bien avisés d'en tenir compte