Angles coupés ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Angles coupés ?

Message par Siiicreete le Jeu 28 Mar 2013 - 21:16

Bonsoir,

J'aurai voulu savoir s'il était possible -comme les angles arrondis avec le radius- d'avoir des angles coupés.
Comme ceci :
Spoiler:

Cordialement,


Dernière édition par Siiicreete le Sam 6 Avr 2013 - 14:19, édité 2 fois

Siiicreete
**

Masculin
Messages : 67
Inscrit(e) le : 17/03/2011

http://bewitchingrpg.forumgratuit.org/
Siiicreete a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par Tech le Sam 30 Mar 2013 - 13:48

Bonjour,

Il n'existe pas de façon "propre" de le faire mais j'ai trouvé ce lien : http://www.journaldunet.com/developpeur/tutoriel/css/051206-css-boite-bordure-arrondi.shtml
A vous de voir.

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 20880
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par Siiicreete le Sam 30 Mar 2013 - 15:20

Bonjour,

Merci de votre réponse. J'aurai une question : si j'ajoute cela à mon CSS, tous les angles seront de cette façon ? Ou je peux les mettre que pour certains cadre ?

Siiicreete
**

Masculin
Messages : 67
Inscrit(e) le : 17/03/2011

http://bewitchingrpg.forumgratuit.org/
Siiicreete a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par Tech le Sam 30 Mar 2013 - 15:27

Il suffit de faire une class spécifique aux angles dont vous désirez qu'ils soient coupés.

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 20880
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par Siiicreete le Sam 30 Mar 2013 - 15:32

Je devrais simplement remolacer les .angle par autre chose ?

Siiicreete
**

Masculin
Messages : 67
Inscrit(e) le : 17/03/2011

http://bewitchingrpg.forumgratuit.org/
Siiicreete a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par Tech le Sam 30 Mar 2013 - 15:48

Oui.

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 20880
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par Siiicreete le Sam 30 Mar 2013 - 17:22

Très bien merci.

Cordialement,

Siiicreete
**

Masculin
Messages : 67
Inscrit(e) le : 17/03/2011

http://bewitchingrpg.forumgratuit.org/
Siiicreete a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par Tech le Sam 30 Mar 2013 - 17:46

Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 20880
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par Siiicreete le Jeu 4 Avr 2013 - 18:38

Bonjour !

J'ai essayé ce que vous m'aviez proposé mais je n'ai pas réussi. Je ne sais pas quelle balise faire avec le CSS j'ai essayé <div class="angle"> / <div class="angle .b1"> / <div class="angle"><span class="b1"> mais rien ne marche.
Auriez-vous une réponse ?

Cordialement,

Siiicreete
**

Masculin
Messages : 67
Inscrit(e) le : 17/03/2011

http://bewitchingrpg.forumgratuit.org/
Siiicreete a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par angelsjenifer le Jeu 4 Avr 2013 - 19:35

Bonjour, je vous invite à essayer comme ceci Smile

DIV :
Code:
<div class="angle">... TEXTE ...</div>

CSS :
Code:
.angle{
-moz-border-radius: 28px;
-khtml-border-radius: 28px;
-webkit-border-radius: 28px;
border-radius: 28px;
}

angelsjenifer
***

Féminin
Messages : 118
Inscrit(e) le : 03/10/2007

http://davidcharvet.1fr1.net
angelsjenifer a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par Siiicreete le Jeu 4 Avr 2013 - 20:01

Bonjour,

Malheureusement ça ne marche pas. Auriez-vous autre chose à me proposer ?

Siiicreete
**

Masculin
Messages : 67
Inscrit(e) le : 17/03/2011

http://bewitchingrpg.forumgratuit.org/
Siiicreete a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par angelsjenifer le Jeu 4 Avr 2013 - 20:37

Qu'est ce qui ne fonctionne pas ??

Car le code est correct et fonctionne. Puis-je voir vos codes ? Smile

angelsjenifer
***

Féminin
Messages : 118
Inscrit(e) le : 03/10/2007

http://davidcharvet.1fr1.net
angelsjenifer a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par Siiicreete le Jeu 4 Avr 2013 - 21:47

En réalité, j'ai mis la balise dans le template overall_header :

Code:
<table style="margin-left: 15%; margin-righ: 15%; margin-top: -10px"><tr><td><div class="angle"><div class="navig" align="center">{GENERATED_NAV_BAR}</div></div></td></tr></table>

et dans le CSS :

Code:
a.mainmenu {
 text-shadow: 0px 0px 1px #CB3030;
font-family: 'Graduate', cursive;
letter-spacing: 0px;
color: #CB3030;
  text-align:center;
padding-right: 10px;
font-size: 12px;
  text-transform: lowercase;
}

a.mainmenu:hover {
text-align: center;
font-color: #F3CEB2;
text-transform:uppercase;
letter-spacing: 0.7px;

}
 .navig {
        position: fixed;
        width: 70%;
background-color:#F0EDED;
border: 3px solid #741414;}

.angle .b1, .angle .b2, .angle .b3, .angle .b4, .angle .b5 {
  display:block;
  overflow:hidden;
  height:1px;
  background:#741414;
  border-left:1px solid #000;
  border-right:1px solid #000;
  }

.angle .b1 {margin:0 5px; background:#000;}
.angle .b2 {margin:0 4px;}
.angle .b3 {margin:0 3px;}
.angle .b4 {margin:0 2px;}
.angle .b5 {margin:0 1px;}

        .angle{
        -moz-border-radius: 28px;
        -khtml-border-radius: 28px;
        -webkit-border-radius: 28px;
        border-radius: 28px;
        }

Siiicreete
**

Masculin
Messages : 67
Inscrit(e) le : 17/03/2011

http://bewitchingrpg.forumgratuit.org/
Siiicreete a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par angelsjenifer le Jeu 4 Avr 2013 - 22:21

ah ok, alors il faut enlever tout les " angle " indiqué s'ils ne te servaient que pour ça et ne garder que ça :

Code:
<table style="margin-left: 15%; margin-righ: 15%; margin-top: -10px"><tr><td><div class="navig" align="center">{GENERATED_NAV_BAR}</div></td></tr></table>

Code:
a.mainmenu {
text-shadow: 0px 0px 1px #CB3030;
font-family: 'Graduate', cursive;
letter-spacing: 0px;
color: #CB3030;
text-align:center;
padding-right: 10px;
font-size: 12px;
text-transform: lowercase;
}
       
a.mainmenu:hover {
text-align: center;
font-color: #F3CEB2;
text-transform:uppercase;
letter-spacing: 0.7px;
}

.navig {
position: fixed;
width: 70%;
background-color:#F0EDED;
border: 3px solid #741414;
}

Si ça ne fonctionne toujours pas, essayez de déplacer ce code dans le a.mainmenu :
Code:
-moz-border-radius: 28px;
-khtml-border-radius: 28px;
-webkit-border-radius: 28px;
border-radius: 28px;


angelsjenifer
***

Féminin
Messages : 118
Inscrit(e) le : 03/10/2007

http://davidcharvet.1fr1.net
angelsjenifer a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par Siiicreete le Jeu 4 Avr 2013 - 22:24

Mais si je rajoute cela, les angles ne seront pas arrondis ?

Siiicreete
**

Masculin
Messages : 67
Inscrit(e) le : 17/03/2011

http://bewitchingrpg.forumgratuit.org/
Siiicreete a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Angles coupés ?

Message par Scoubifitz le Ven 5 Avr 2013 - 0:19

bonsoir,

c'est pour entourer la barre de navigation ?

pour le template :

Code:
<table style="width: 80%;margin:0 auto;">
  <tr>
    <td>
      <div class="angle">
        <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
        <div class="boxcontent">
          <div class="navig" align="center">
            {GENERATED_NAV_BAR}
          </div>
        </div>
        <b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
      </div>
    </td>
  </tr>
</table>

le CSS qui l'accompagne :

Code:
a.mainmenu {
  text-shadow: 0px 0px 1px #CB3030;
  font-family: 'Graduate', cursive;
  letter-spacing: 0px;
  color: #CB3030;
  text-align:center;
  padding-right: 10px;
  font-size: 12px;
  text-transform: lowercase;
}

a.mainmenu:hover {
  text-align: center;
  color: #F3CEB2;
  text-transform:uppercase;
  letter-spacing: 0.7px;
}

/* angle Borders*/
.angle {
  background: transparent;
  width:80%;
  margin:0 auto;
}
.angle .top, .angle .bottom {
  display:block;
  background:transparent;
  font-size:1px;
}
.angle .b1, .angle .b2, .angle .b3, .angle .b4, .angle .b5 {
  display:block;
  overflow:hidden;
  height:1px;
  background:#eca;
  border-left:1px solid #000;
  border-right:1px solid #000;
}
.angle .b1 {margin:0 5px; background:#000;}
.angle .b2 {margin:0 4px;}
.angle .b3 {margin:0 3px;}
.angle .b4 {margin:0 2px;}
.angle .b5 {margin:0 1px;}
.angle .boxcontent {
  display:block;
  background:#eca;
  border-left:1px solid #000;
  border-right:1px solid #000;
}

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Angles coupés ?

Message par Siiicreete le Sam 6 Avr 2013 - 14:19

Bonjour à vous,

J'ai essayé les différentes méthodes. La dernière proposée a été la plus concluante et pourtant elle ne me satisfait pas.
Cela ne correspond pas à l'idée que je m'étais fait. Donc j'abandonne ça.

Merci à tous.

Siiicreete
**

Masculin
Messages : 67
Inscrit(e) le : 17/03/2011

http://bewitchingrpg.forumgratuit.org/
Siiicreete a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum