Div avec contour

[jiojioforever]

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: Tout sélectionner

#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]

Hello,

Sorry mais c'est quoi ta question ?

[jiojioforever]

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

[Szarah]

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]

Code: Tout sélectionner

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

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

[Lebleu]

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: Tout sélectionner

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

@ 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

@+

[HawkEye]

sous firefox c'est

Code: Tout sélectionner

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


[Lebleu]

sous firefox c'est

Code: Tout sélectionner

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


Thanks

[e-kiwi]

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]

si ça peut aider:)

Coin arrondis sans javascript
Coins arrondis avec javascript

[Audiofeeline]

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

+1...