Cadre avec bords arrondis extensibles html+css

**Sololupa** · 09/05/2008, 21h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**clb56** · 10/05/2008, 13h05

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Bonjour

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

Lien habituel:

Coins et bordures arrondis en design fluide

**Sofalkin** · 10/05/2008, 21h24

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

@++

**clb56** · 11/05/2008, 03h54

Envoyé par Sofalkin

Div vide... Pas vraiment

LOL

**Sofalkin** · 12/05/2008, 00h18

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...

**clb56** · 13/05/2008, 00h54

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Est valide ?

Alors que:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Cadre avec bords arrondis extensibles html+css

CSS

Discussions similaires

Partager

Partager