Des angles qui ne veulent pas s'arrondir

2 participants

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

  • 0

Résolu Des angles qui ne veulent pas s'arrondir

Message par Haerith Lun 9 Sep 2013 - 15:56

Bonjour !

Je reviens vers vous avec un autre petit soucis : la PA de notre forum vient d'être codée, seulement nous devons faire face à un problème épineux. En effet, les angles de la PA ainsi que ceux des blocs qui la composent refusent obstinément de s'arrondir, malgré nos innombrables tentatives.

Voici le lien du forum concerné : CLIK

Et voilà le code CSS au complet :

Code:
/*PAGE D'ACCUEIL*/

.messagebienvenue {
  width: 400px;
  padding: 15px;
  background-color: #baa68d;
  text-align: justify;
  font-size: 12px;
}

.titremessage {
  font-size: 14px;
  font-family: georgia;
  margin-bottom: 10px;
  margin-top: -5px;
}

.blocnews {
  width: 430px;
  overflow: auto;
  height: 100px;
  background-color: #baa68d;
}

.news {
  padding-bottom: 5px;
  padding-top: 5px;
  padding-left: 5px;
  background-color: #a28664;  
}

.news2 {
  padding-bottom: 5px;
  padding-top: 5px;
  padding-left: 5px;
  background-color: #705c43;  
}

.titrepa {
  font-size: 18px;
  color: #442928;
  font-family: georgia;
  text-align: center;
  margin-top: 10px;
  margin-bottom: -4px;
}

.crédits{
  width: 260px;
  padding: 5px;
  background-color: #baa68d;
}  

.topsites {
  margin-top: -250px;
  width: 85px;
  text-align: center;
}
  
  
/*SLIDER PAS TOUCHER*/

.sp-slideshow {
    position: relative;
    margin: 10px auto;
    width: 80%;
    max-width: 350px;
    min-width: 350px;
    height: 300px;
    border: 10px solid #fff;
    border: 10px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
 
.sp-content {
    background: #CCBEAC url(../images/grid.png) repeat scroll 0 0;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
 
.sp-parallax-bg {
    background: url(../images/map.png) repeat-x scroll 0 0;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sp-slideshow input {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 9px;
    height: 9px;
    z-index: 999;
    cursor: pointer;
    opacity: 0;
}
 
.sp-slideshow input + label {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 6px;
    height: 6px;
    display: block;
    z-index: 999;
    border: 3px solid #fff;
    border: 3px solid rgba(255,255,255,0.9);
    border-radius: 50%;
    transition: background-color linear 0.1s;
}
.sp-slideshow input:checked + label {
    background-color: #fff;
    background-color: rgba(255,255,255,0.9);
}
 
.sp-selector-1, .button-label-1 {
    margin-left: -36px;
}
 
.sp-selector-2, .button-label-2 {
    margin-left: -18px;
}
 
.sp-selector-4, .button-label-4 {
    margin-left: 18px;
}
 
.sp-selector-5, .button-label-5 {
    margin-left: 36px;
}

.sp-arrow {
    position: absolute;
    top: 50%;
    width: 28px;
    height: 38px;
    margin-top: -19px;
    display: none;
    opacity: 0.8;
    cursor: pointer;
    z-index: 999;
    background: transparent url('http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/images/arrows.png') no-repeat;
    transition: opacity linear 0.3s;
}
.sp-arrow:hover{
    opacity: 1;
}
.sp-arrow:active{
    margin-top: -18px;
}

.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {
    right: 15px;
    display: block;
    background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {
    left: 15px;
    display: block;
    background-position: top left;
}

.sp-slideshow input:checked ~ .sp-content {
    transition: background-position linear 0.6s, background-color linear 0.8s;
}

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
    transition: background-position linear 0.7s;
}

input.sp-selector-1:checked ~ .sp-content {
    background-position: 0 0;
    background-color: #CCBEAC;
}
 
input.sp-selector-2:checked ~ .sp-content {
    background-position: -100px 0;
    background-color: #baa68d;
}
 
input.sp-selector-3:checked ~ .sp-content {
    background-position: -200px 0;
    background-color: #a28664;
}
 
input.sp-selector-4:checked ~ .sp-content {
    background-position: -300px 0;
    background-color: #705c43;
}
 
input.sp-selector-5:checked ~ .sp-content {
    background-position: -400px 0;
    background-color: #705c43;
}

input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
    background-position: 0 0;
}
 
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
    background-position: -200px 0;
}
 
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
    background-position: -400px 0;
}
 
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
    background-position: -600px 0;
}
 
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
    background-position: -800px 0;
}

.sp-slider {
    position: relative;
    left: 0;
    width: 500%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: left ease-in 0.8s;
}

.sp-slider > li {
    color: #fff;
    width: 20%;
    box-sizing: border-box;
    height: 100%;
    padding: 0 60px;
    float: left;
    text-align: center;
    opacity: 0.4;
    transition: opacity ease-in 0.4s 0.8s;
}
.sp-slider > li img{
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    padding: 40px 0 50px 0;
    max-height: 100%;
    max-width: 100%;
}

input.sp-selector-1:checked ~ .sp-content .sp-slider {
    left: 0;
}
 
input.sp-selector-2:checked ~ .sp-content .sp-slider {
    left: -100%;
}
 
input.sp-selector-3:checked ~ .sp-content .sp-slider {
    left: -200%;
}
 
input.sp-selector-4:checked ~ .sp-content .sp-slider {
    left: -300%;
}
 
input.sp-selector-5:checked ~ .sp-content .sp-slider {
    left: -400%;
}

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){
    opacity: 1;
}

/*MENU QEEL*/

*{
 margin: auto;
 padding:0;
}
#menu{
 width:200px;
 margin:20px auto 0 auto;
  background-color: #baa68d;
}
.menu, .sousmenu{
 text-align:center;
}
.menu{
 height:25px;
 width:150px;
 padding:7px 0;
 background:;
 color:#442928;
}
.sousmenu{
 height:25px;
 width:150px;
 padding:5px 0;
 background:#A28664;
 color:#442928;
}
.menu a{
 display:block;
 width:100%;
 height:100%;
 color:#442928;
 font-family: georgia;
 font-size:12px;
 font-weight:bold;
 text-decoration:none;
 background:#A28664;
}
.sousmenu a{
 display:block;
 width:100%;
 height:100%;
 color:#442928;
 font-family: georgia;
 font-size:12px;
 font-weight:bold;
 text-decoration:none;
 background: #A28664;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
 background:#705c43;
}

/*INFOS QEEL*/

.statsfo {
  height: 95px;
  text-align: justify;
  overflow: auto;
  width: 265px;
  font-size: 12px;
  padding: 5px;
}

.fondstats {
  background-color: #baa68d;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  padding: 10px;
 height: 105px;
  width: 275px;
}

.titreqeel {
  font-size: 16px;
  color: #442928;
  font-family: georgia;
  text-align: center;
  margin-top: 10px;
  margin-bottom: -5px;
}

.fondstats2 { /*celui des statistiques avec phrases*/
  background-color: #baa68d;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  padding: 10px;
 height: 100%;
  width: 275px;
}

.statsfo2 {
  height: 260px;
  text-align: justify;
  overflow: auto;
  width: 265px;
  font-size: 12px;
  padding: 5px;
}
  
.titreqeel2 {
  font-size: 16px;
  color: #442928;
  font-family: georgia;
  text-align: center;
  margin-bottom: -5px;
}
  
/*FOND DU QEEL*/

.fondqeel {
  background-color: #CCBEAC;
  width: 850px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  padding: 10px;
}
/*APPARENCE PROFILS*/

.tout_profil { background-color: #c9b78c; padding: 2px; width: 220px;}
.encadre_profil { background-color: #a19372; height: 30px; padding: 2px; border-top: 1px solid #000; border-bottom: 1px solid #000;  }
.rang_profil { font-size: 12px; font-style: italic; color: #000;}
.champ_profil { padding : 2px; border-bottom : 1px solid #000; margin-left : 10px; margin-right: 10px; }
.avatar_profil { height: 350px; border: 0px solid #000; padding: 1px; }
.name1 {
 font-size: 20px;
 font-family: georgia;}

/*APPARENCE PROFILS FIN*/


/*LISTE DES SUJETS*/

/* MISE EN FORME DES LISTES DE SUJETS */

.bloc_sujets
{
  width: 800px;
  margin: auto;
  background: #a28664;
  box-shadow: 0px 0px 3px #868686;
  -o-box-shadow: 0px 0px 3px #868686;
  -moz-box-shadow: 0px 0px 3px #868686;
  -webkit-box-shadow: 0px 0px 3px #868686;
  -htm-box-shadow: 0px 0px 3px #868686;
  padding: 5px;
}
.sujets
{
  background: #705c43;
  padding: 3px;
}
.topictitle
{

  font-size: 12px;
  font-family: georgia;
  text-shadow: 0px 1px 0px #756D54; /*couleur de l'ombre*/
}
.sujets_auteur
{
  display: block;
  width: 100px;
  font-size: 11px;
}
.sujet_last
{
  display: block;
  width: 180px;
  height: 40px;
  background: #CCBEAC;
  padding-top: 10px;
  font-size: 11px;
}
.sujets_stats
{
  width: 800px;
  text-align: right;
  margin-bottom: 5px;
}
.sujets_stats_contenu
{
  font-size: 10px;
  color: #442928;
}

/*HEADER*/

body {
margin : 0px;
}

/*CATÉGORIES*/

.bodylinewidth {
  width: 700px;
}

.cathead
{
  background: url('http://img11.hostingpics.net/pics/837284Ttecatgories.png') top center no-repeat;
  width: 800px;
  height: 140px;
  margin: auto; /*Permet de centrer la partie du corps*/
}

.catbody
{
  width: 800px;
  background-color: #a28664;
}

.catfoot
{
  background: url('http://img11.hostingpics.net/pics/402786fessecatgories.png') bottom center no-repeat;
  width: 800px;
  height: 45px;
  margin: auto;
}

/*FORUMS*/

.boutons {
  margin-top: -33px;
  margin-right: -1px;
}

.derniermessage {
  background-color: #baa68d;
  text-align: center;
  color: #442928;
  padding: 5px;
  height: 85px;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  margin-top: 5px;
}

.description {
  text-align: justify;
  height: 90px;
  overflow: auto;
  padding: 5px;
  color: #905c43;
}

.statistiques {
  font-size: 12px;
  color: #442928;
  padding-left: 15px;
  font-family: georgia;
}
  
.sousforums {
  text-align: right;
  font-family: georgia;
}

td.row1{
background-color: #CCBEAC;
}
td.row2{
background-color: #CCBEAC;
}
td.row3{
background-color: #CCBEAC;
}
td.row3Right {
background-color: #CCBEAC;
}

/*TITRES*/

.titre {
text-align: center;
text-shadow: #000000 2px 1px 1px;
color: #80766D;
font-family: Gentium Book Basic ;
text-transform: uppercase;
font-size: 35px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 20px;  
border-bottom: 2px solid #735E54;  
background-color: #FFFFFF;
filter:alpha(opacity=50); /*opacité*/
-moz-opacity:0.5;
opacity: 0.5;  
}

.titre:before {
content: "“";
padding-right: 5px;
font-size: 35px;
color: #494563;
}

.titre:after {
content: "”";
padding-right: 5px;
font-size: 35px;
color: #494563;
}

.titre2 {
padding-left: 5px;
font-size: 13px;
text-transform: uppercase;
text-align: left;  
font-weight: lighter;
border-bottom: 1px dotted black;
width: 50%;
color: #735E54;
margin-left: 10px;  
}

.titre2:before {
content: "•";
padding-right: 5px;
font-size: 18px;
color: #735E54;
}

.titre3 {
text-align: left;
color: #80766D;
font-family: Gentium Book Basic ;
text-transform: uppercase;
font-size: 30px;
padding-left: 10px;
padding-bottom: 5px;  
border-bottom: 2px solid #000000;    
}

.titre4 {
text-align: left;
color: #80766D;
font-family: Gentium Book Basic ;
text-transform: uppercase;
font-size: 20px;
padding-left: 10px;
padding-bottom: 0px;  
}

/*TITRES FIN*/

/*BOITE*/

.box {
background-color: #80766D;
border-radius: 11px;  
text-align:center;  
padding: 10px;
width: 94%;
font-size: 12px;
line-height: 125%;

}
/*BOITE FIN*/

/*Justifier automatiquement et padding dans les messages*/

.postbody {
text-align:justify;
padding: 15px;  

}
    
/*fin*/

/*couleur italique*/

i {
color: #735E54;
}
/*fin*/

/*Enlever soulignements des liens*/
 
a:hover{
  text-decoration: none !important;
  font-size: 12px;
  
}
a {
  text-decoration: none !important;
  font-size: 12px;
}
a:link {
  text-decoration: none !important;
  font-size: 12px;
}
a:visited {
  text-decoration: none !important;
  font-size: 12px;
  
}    
/*fin*/
    
/*FICHE BESTIAIRE/PLANTES*/

.nom_creature {
  font-variant: small-caps;
  font-size: 25px;
  text-align: center;
  font-family: georgia;
}

.fiche_creature {
  width: 85%;
  padding: 15px;
  text-align: center;
  background-color: #9E948E;
}

.fiche_contenu {
  width: 90%;
  padding: 10px;
  text-align: justify;
  background-color: #D9CCC5;
  overflow: auto;
  height: 400px;
  color: black;
}

.fiche_titre {
  font-variant: small-caps;
  font-size: 25px;
  text-align: center;
  font-family: georgia;
  border-bottom: 1px solid white;
  width: 100%;
  padding-bottom: 10px;
}

.petits_titres {
  font-family: georgia;
  font-size: 20px;
  border-bottom: 1px solid black;
  width: 100%;
  padding-bottom: 5px;
}
/*Fin bestiaire/plantes*/    

/*FICHE PREDEFINIS*/

.CadrePredef
{
  display: block;
  width: 430px;
  height: auto;
  margin: auto;
  }

.Cadreava
{ display: block;
  width: 200px;
  height: 350px;
  overflow:auto;
  text-align: center;

  }
.Cadreid
{ display: block;
  width: 230px;
  height: 350px;
  overflow:auto;
  color: #000000;
  text-shadow: 0px 0px 0px black;
  }

.Cadreinfo
{
  display: block;
  width: 500px;
  height: 200px;
  margin: auto;
  padding: 10px;
  color: #000000;
  text-shadow: 0px 0px 0px black;
  overflow:auto;
}

/*fin fiche prédéfinis*
Merci d'avance à celles/ceux qui sauront m'aider ! ^^


Dernière édition par Haerith le Sam 14 Sep 2013 - 7:17, édité 1 fois
Haerith

Haerith
Nouveau membre

Messages : 24
Inscrit(e) le : 08/02/2012

http://re-evolution.forumgratuit.org/
Haerith a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des angles qui ne veulent pas s'arrondir

Message par Haerith Sam 14 Sep 2013 - 4:25

Bonjour,

Cette demande d'aide est toujours d'actualité !
Haerith

Haerith
Nouveau membre

Messages : 24
Inscrit(e) le : 08/02/2012

http://re-evolution.forumgratuit.org/
Haerith a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des angles qui ne veulent pas s'arrondir

Message par Tech Sam 14 Sep 2013 - 6:50

Bonjour,

Il faut rajouter des border-radius à toutes ces class :
.crédits
.messagebienvenue
.blocnews
.sp-slideshow

ou mettre un code du genre :
Code:
.crédits, .messagebienvenue, .blocnews, .sp-slideshow {
  border-radius: 15px;
}

Pour arrondir la PA, ce n'est pas dur non plus mais il y a un effet redondant donc on va ajouter une class à votre template index_body.
Trouvez ce code :
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
et modifiez le par :
Code:
<table class="forumline pageaccueil" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>

et puis rajoutez dans votre CSS ceci :
Code:
.pageaccueil td.row1 {
  border-radius: 15px;
}

Cordialement.
Tech

Tech
Membre actif

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

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

Résolu Re: Des angles qui ne veulent pas s'arrondir

Message par Haerith Sam 14 Sep 2013 - 7:17

Bonjour !
Je vous remercie, cela fonctionne parfaitement !
Vous pouvez donc archiver ce sujet =)
Haerith

Haerith
Nouveau membre

Messages : 24
Inscrit(e) le : 08/02/2012

http://re-evolution.forumgratuit.org/
Haerith a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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