Div avec contour

jiojioforever · 17 Janvier 2007

Bonjour, j'essaie de fare un cadre avec les bouts haut droit et bas droit arrondi. Pour ça pa de probleme. Je voudrais que ma div soit entouré d'une bordure de couleur. J'ai bien vu border-color mais cela ne me correspond pas vu qu'il entoure le cadre et que j'ai des bords arrondis.

j'obtiens ce résultat (pour les bords arrondi, je dois les retoucher moi même chose que je n'ai pas encore fait)

Code:

#cadre { /* taille du cadre, à titre d'exemple */
width: 240px;
background-color: #DFDFDF;
}
/* propriétés communes à l'ensemble des 4 coins */
#hautdroit, #basdroit {
height: 19px; width: 19px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}
#hautgauche, #basgauche {
height: 19px; width: 221px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}
/* propriétés spécifiques à chaque coin */
#hautgauche {
background: url(image/haut_gauche.gif);
}
#hautdroit {
float: right;
background: url(image/haut_droit.gif);
}
#basgauche {
background: url(image/bas_gauche.gif);
}
#basdroit {
float: right;
background: url(image/bas_droit.gif);
}
#contenu p {
color: white;
margin: 0.5em; /*gestion des espaces interparagraphes */
}

merci d'avance

Lebleu · 17 Janvier 2007

Hello,

Sorry mais c'est quoi ta question ? :lol: :lol: :lol:

jiojioforever · 17 Janvier 2007

en gros je voudrais que mon rectangle avec les arrondis gris soit entourer d'un trait orange.

Szarah · 17 Janvier 2007

Les éléments ayant des coins carrés, c'est mission impossible.
Vista permettra des fenêtres à coins arrondis mais ce ne sera pas standardisé avant ... longtemps, je le crains.

e-kiwi · 17 Janvier 2007

Code:

<style>
.xsnazzy h1, .zsnazzy h1 {
margin:0; 
font-size:1.2em; 
padding:0 10px 5px 10px; 
border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
margin:0; 
padding:5px 10px; 
font-size:10px;
}
.xsnazzy {
background: transparent; 
width:240px; 
float:left; 
margin:0 3px;
}

.xtop, .xbottom {
display:block; 
background:transparent; 
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff; 
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px; 
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
display:block; 
border:0 solid #444; 
border-width:0 1px; 
height:auto;
}
* html .xboxcontent {
height:1px;
}

.color_a {
background:#c9ba65;
color:#fff;
}
.color_b {
background:#d4d8bd; 
color:#000;
}
.color_c {
background:#758279; 
color:#fff;
}
.color_d {
background:#b2ab9b; 
color:#000;
}

</style>

<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a">Blah Blah Title</h1>
<p>You are not currently logged in.</p>
<p>If you don't have a login you can 
<a href="#nogo">register here</a>.</p>
<p>If you have one, then LOGIN <a href="#nogo">here</a>.</p>
<p>If you don't know if you should have one - and need convincing 
that free, confidential, fast and useful is not enough then click 
<a href="#nogo">here for a demo</a>.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

jiojioforever · 17 Janvier 2007

je pense que je vais le dessiné sous paint ça ira plu svite ^^

Lebleu · 17 Janvier 2007

Ben je crois qu'il n'existe pas de propriété css qui permette de faire ça.

Peut-être une spécifique implémentée dans firefox ou opéra mais à vrai dire j'en sais rien ...

A la place de déterminer la couleur de ton div dans ta css, tu peux employer une image et faire la bordure toi même dans ton logiciel graphique. Ensuite tu mets en forme avec un css du genre :

Code:

.navcontainer {  /*Containers central sans arrondis*/
			  height:auto;
			  background:url(img/menu.png) repeat-y 0 0;
			  }
			  
.navcontainer_h, .navcontainer_b {  /*Containers haut et bas arrondis*/
			                          height:15px;										                  background:no-repeat 0 0;
		                                  }
.navcontainer_h {
                        background:url(img/menu_h.png) no-repeat 0 0;
			}	
							 
.navcontainer_b {
			 background:url(img/menu_b.png) no-repeat 0 0;
		         }

Ca supporte les redimensionnements et c'est assez facile à mettre en place.

@micalement

Lebleu · 17 Janvier 2007

@ e-Kiwi

<style>
.xsnazzy h1, .zsnazzy h1 {
margin:0;
font-size:1.2em;
padding:0 10px 5px 10px;
border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
margin:0;
padding:5px 10px;
font-size:10px;
}
.xsnazzy {
background: transparent;
width:240px;
float:left;
margin:0 3px;
}

.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff;
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px;
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}

.xboxcontent {
display:block;
border:0 solid #444;
border-width:0 1px;
height:auto;
}
* html .xboxcontent {
height:1px;
}

.color_a {
background:#c9ba65;
color:#fff;
}
.color_b {
background:#d4d8bd;
color:#000;
}
.color_c {
background:#758279;
color:#fff;
}
.color_d {
background:#b2ab9b;
color:#000;
}

</style>

<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a">Blah Blah Title</h1>
<p>You are not currently logged in.</p>
<p>If you don't have a login you can
<a href="#nogo">register here</a>.</p>
<p>If you have one, then LOGIN <a href="#nogo">here</a>.</p>
<p>If you don't know if you should have one - and need convincing
that free, confidential, fast and useful is not enough then click
<a href="#nogo">here for a demo</a>.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

P... c'est de la masturbation intellectuelle :lol: :lol:

@+

HawkEye · 17 Janvier 2007

sous firefox c'est

Code:

element { -moz-border-radius: 0px 10px 10px 0px; }

Lebleu · 17 Janvier 2007

HawkEye a dit:
sous firefox c'est

Code:

element { -moz-border-radius: 0px 10px 10px 0px; }

Thanks

e-kiwi · 17 Janvier 2007

en tout cas mon exemple fait un bord arrondi, de couleur differente, avec un contour de 1px, et le tout sans la moindre image

il suffit de tester / adapter

maniT4c · 17 Janvier 2007

si ça peut aider

Coin arrondis sans javascript
Coins arrondis avec javascript

Audiofeeline · 17 Janvier 2007

jiojioforever a dit:
je pense que je vais le dessiné sous paint ça ira plu svite ^^

+1...