[résolu] Qeel pas centré Bouton_active[résolu] Qeel pas centré Bouton_hover[résolu] Qeel pas centré Fb-hover[résolu] Qeel pas centré Fb-active
AccueilForumÉquipe 
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
[résolu] Qeel pas centré EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
[résolu] Qeel pas centré EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
[résolu] Qeel pas centré EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
[résolu] Qeel pas centré EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
[résolu] Qeel pas centré EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
[résolu] Qeel pas centré EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
[résolu] Qeel pas centré EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
[résolu] Qeel pas centré EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment :
Smartphone Xiaomi 14 – 512 Go- 6,36″ 5G ...
Voir le deal
599 €

CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

[résolu] Qeel pas centré

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://falonasynae.forumactif.com
Lyo
{ Membre }
{ Membre }

Féminin Messages : 65



[résolu] Qeel pas centré Empty
Me revoilà ! Merci à ceux qui me donneront du temps ♥
Alors, je voudrais centrer mon qeel, parce que sur certains écrans, ça donne ce truc moche : https://i.servimg.com/u/f56/17/98/40/93/captur10.jpg

J'ai essayé pas mal de choses, mais je n'y arrive pas...
Voici mon CSS :
Code:
a { /*Enlève le soulignement des liens*/
text-decoration: none !important;
}
a:hover {
text-decoration: none !important;
}

/*ENCADREMENT FORUM*/

.bodyline {
border: 5px #3D4045 solid;
border-top: none !important;
border-bottom: none !important;
}

/*BARRE DE NAVIGATION*/

a.mainmenu {
color: #E1F3F7;
text-transform : uppercase;
font-size: 9px;
text-align: center;
padding-left:2px;
padding-right:2px;
}

a.mainmenu img {
display:none;
}

/*POUR LES MESSAGES*/

.box {
  background-image: url('http://img4.hostingpics.net/pics/831148Alejiafond1.png');
  -webkit-box-shadow: 0px 0px 5px 0px #3A4254;
  box-shadow: 0px 0px 5px 0px #3A4254;
  background-color: #3A4254;
  border-radius: 7px;
  margin: 15px 15px 15px 15px;
  padding: 10px 10px 10px 10px;
}

.box2 {
  -webkit-box-shadow: 0px 0px 5px 0px #475166;
  box-shadow: 0px 0px 5px 0px #475166;
  background-color: #475166;
  padding-right: 30px;
  padding-left: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: justify;
  border-radius: 2px;
  line-height:11px;
  margin: -6px 0px;
}

.box3 { /*présentation*/
  -webkit-box-shadow: 0px 0px 5px 0px #475166;
  box-shadow: 0px 0px 5px 0px #475166;
  background-color: #475166;
  padding-right: 30px;
  padding-left: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: justify;
  border-radius: 2px;
  line-height:11px;
  margin: -6px 0px;
  height: 300px;
  overflow: auto;
}

.grandtitre {
  color: #E1F3F7;
  font-size: 20px;
  font-family: Perpetueta;
  text-transform: uppercase;
  -webkit-box-shadow: 0px 0px 5px 0px #475166;
  box-shadow: 0px 0px 5px 0px #475166;
  background-color: #475166;
  padding: 3px 3px 3px 3px;
  border-radius: 4px;
  text-align: center;
  letter-spacing: 3px;
}

.titre {
  color: #1D222B;
  text-shadow: 0px 0px 2px #1D222B;
  font-size: 11px;
  text-transform: uppercase;
  -webkit-box-shadow: 0px 0px 5px 0px #475166;
  box-shadow: 0px 0px 5px 0px #475166;
  background-color: #475166;
  padding: 3px 3px 3px 3px;
  border-radius: 4px;
  text-align: center;
  letter-spacing: 3px;
}

.texte {
  color: #E1F3F7;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.infobulle{position: relative;z-index: 0;}
        
.infobulle:hover{background-color: transparent;z-index: 50;}
        
.infobulle span{
  position: absolute;
  background-color: #000000;
  padding: 5px;
  left: -1000px;
  visibility: hidden;
  color: #FFFFFF;}
        
.infobulle span img{
  border: 1px;
  padding: 5px;}
        
.infobulle:hover span{
  visibility: visible;
  top: -50px;
  left: -125px;
  width: 150px ;
  color:#FFFFFF;
  font-size: 9px;
  border: 1px solid #000;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;}

/*CATEGORIES*/

.boxcat1 {
  color: #E1F3F7;
  background-color: #3A4254;
  -webkit-box-shadow: 0px 0px 1px 0px #3A4254;
  box-shadow: 0px 0px 1px 0px #3A4254;
  padding: 3px 3px 3px 3px;
  border-radius: 1px;
  text-align: center;
  letter-spacing: 2px;
  width: 99.5%;
  overflow: auto;
}

a.forumlink {
  color: #E1F3F7 !important;
  font-size: 13px;
  text-transform: uppercase;
  font-family: Perpetueta;
}

a.forumlink:hover {
  color: #E1F3F7;
}

a.forumlink:visited {
  color #E1F3F7;
}

.description {
  color: #ffffff;
  background-color: #3A4254;
  -webkit-box-shadow: 0px 0px 1px 0px #3A4254;
  box-shadow: 0px 0px 1px 0px #3A4254;
  padding-right: 50px;
  padding-left: 50px;
  padding-bottom:3px;
  border-radius: 1px;
  text-align: justify;
  overflow: auto;
  margin-left: 3px;
  text-transform: lowercase;
}

.sousforum {
  color: #3D4045;
  background-color: #000000;
  border-radius: 1px;
  text-align: justify;
  overflow: auto;
  padding-left: 3px;
  margin-left:3px;
  font-variant: small-caps;
  font-size:0px; /*pour les virgules*/
}

.sousforum a {
  font-size: 10px;
}

.stats {
  background-color: #3A4254;
  -webkit-box-shadow: 0px 0px 1px 0px #3A4254;
  box-shadow: 0px 1px 0px #3A4254;
  padding: 3px 3px 3px 3px;
  margin-left: -4px;
  margin-top: 5px;
  border-radius: 1px;
  text-align: center;
  width: 100%;
  overflow: auto;
  text-transform: lowercase;
  font-size: 8px;
}

.lastpost {
  color: #ffffff;
  background-color: #3A4254;
  -webkit-box-shadow: 0px 0px 1px 0px #3A4254;
  box-shadow: 0px 0px 1px 0px #3A4254;
  padding: 3px 3px 3px 3px;
  margin-left: -4px;
  border-radius: 1px;
  text-align: center;
  width: 100%;
  overflow: auto;
  text-transform: lowercase;
}

/*QUI EST EN LIGNE*/

.groupes {
  text-align: center;
  font-size: 15px;
  text-transform: uppercase;
  font-family: Perpetueta;
}


/* Ne pas toucher */
.ligne:after {
    clear: both;
    display: block;
    content: "";
  margin-left :auto;
  margin-right: auto
 }
 
.ligne > div.cellule {
    float: left; /* Ne pas toucher */
    margin: 0 25px;
    width: 200px;
    height: 300px;
    background: #3A4254;
  padding: 2px;
  text-align: justify;
  -webkit-box-shadow: 0px 0px 1px 0px #3A4254;
  box-shadow: 0px 0px 1px 0px #3A4254;
  border-radius: 1px;
        overflow: auto;
 }

/*PAGE D'ACCUEIL*/
.cellule1 {
  -webkit-box-shadow: 0px 0px 5px 0px #475166;
  box-shadow: 0px 0px 5px 0px #475166;
  background-color: #475166;
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: justify;
  border-radius: 1px;
  line-height:11px;
  width: 51%;
  height: 132px;
}
.cellule2 {
  -webkit-box-shadow: 0px 0px 5px 0px #475166;
  box-shadow: 0px 0px 5px 0px #475166;
  background-color: #475166;
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: justify;
  border-radius: 1px;
  line-height:11px;
  width: 49%;
  height: 132px;
}

/*CADRES SUR LES COTES DU FORUM*/
/* IMAGE (icône) */
.Xplo1 img{
width: 260px;
height: 180px;

padding: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/* IMAGE (icône) AU SURVOL */
.Xplo1:hover img {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

/* IMAGE (icône) */
.Xplo2 img{
width: 200px;
height: 120px;

padding: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/* IMAGE (icône) AU SURVOL */
.Xplo2:hover img {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

/* IMAGE (icône) */
.Xplo3 img{
width: 160px;
height: 80px;

padding: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/* IMAGE (icône) AU SURVOL */
.Xplo3:hover img {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

Le template Index_body :
Code:
{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<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>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <!-- BEGIN switch_fb_connect_no -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td class="row1" align="center">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span> 
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect_no -->

 <!-- BEGIN switch_fb_connect -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td valign="top" width="100%" class="row1" align="center">
 <table width="100%">
 <tr>
 <td width="55%" valign="middle" align="right">
 <table class="right">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span> 
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 <td width="10%" align="center" valign="middle">
 <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
 </td>
 <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->
{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="50%" valign="top">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
 <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
 <!-- END switch_delete_cookies -->
 </td>
 <td width="50%" align="right">
 <span class="gensmall">
 <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
 <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
 <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
 <!-- BEGIN switch_on_index -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 <!-- END switch_delete_cookies -->
 <!-- END switch_on_index -->
 </span>
 </td>
 </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <!-- BEGIN switch_fb_connect_no -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td class="row1" align="center">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span> 
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect_no -->

 <!-- BEGIN switch_fb_connect -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td valign="top" width="100%" class="row1" align="center">
 <table width="100%">
 <tr>
 <td width="55%" valign="middle">
 <table class="right">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span> 
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 <td width="10%" align="center" valign="middle">
 <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
 </td>
 <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<div style="margin-right: auto; margin-left :auto;"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /><br/>
<div id="qeel" class="ligne">
   <div class="cellule"><span class="gensmall"><br/>
     {TOTAL_POSTS}. {TOTAL_USERS}. {NEWEST_USER}.<br/><br/>Le forum est l'entière propriété de sa fondatrice Lyo. Le concept et le contexte sont librement inspirés de Robot Unicorn Attack 2 et de Worlds of Warcraft. Codage et design par Lyo. En remerciant tous les artistes qui ont inconsciemment participé à l'élaboration de ce forum. Toute reproduction partielle ou totale est proscrite.</span></div>
  <div class="cellule"><span class="gensmall">{LOGGED_IN_USER_LIST}<br/><table class="DeBug">{L_CONNECTED_MEMBERS}</table></span></div>
   <div class="cellule">
     <div class="groupes"><a href="http://alejia.forum-canada.net/g1-pnjs"><span style="color: #90DBB1;">Non-joueurs</span></a><br/>
     <a href="http://alejia.forum-canada.net/g2-porte-couleurs"><span style="color: #6981E0;">Porte-Lumière</span></a><br/>
     <a href="http://alejia.forum-canada.net/g3-porte-cendres"><span style="color: #ED8F47;">Porte-Cendres</span></a><br/>
       <a href="http://alejia.forum-canada.net/g4-mercenaires"><span style="color: #B59555;">Mercenaires</span></a></div><br/>
     <span class="gensmall">L'univers d'Alëjia est entièrement imaginaire et créé par Lyo. En remerciant nos membres, partenaires et visiteurs.<br/><center><img src="http://img15.hostingpics.net/pics/525369alejiaboutonqeel.png"/><br/>
       <br/><iframe width="175" height="35" src="//www.youtube.com/embed/9p4j7CyjG-M?rel=0" frameborder="0" allowfullscreen></iframe></center></span>
  </div>
</div></div>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />


{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
 appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
 status: true,
 cookie: true,
 xfbml: true,
 oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->


Dernière édition par Lyo le Sam 15 Fév 2014, 09:20, édité 1 fois
MessageSujet: [résolu] Qeel pas centré   [résolu] Qeel pas centré EmptyJeu 13 Fév 2014, 13:50
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



[résolu] Qeel pas centré Empty
Pour centrer un bloc en CSS, il existe une méthode simple : lui donner une largeur (width) et lui mettre des marges latérales en 'auto'.

Dans ton CSS, rajoute ceci :
Code:
#qeel {
    margin: auto; /* pour centrer */
    width: 765px; /* la largeur de ton QEEL */
}

Dans ton CSS à cet endroit là :
Code:
   /* Ne pas toucher */
    .ligne:after {
        clear: both;
        display: block;
        content: "";
      margin-left :auto;
      margin-right: auto
     }

Tu peux enlever les margin latéraux, ils ne servent à rien ^^
Code:
     margin-left :auto;
      margin-right: auto

Normalement cela devrait résoudre ton problème Smile
La prochaine fois, n'hésite pas à rajouter en plus le lien vers un forum où l'on peut constater le problème Smile (cela peut aider à aller plus vite)
MessageSujet: Re: [résolu] Qeel pas centré   [résolu] Qeel pas centré EmptySam 15 Fév 2014, 07:38
Revenir en haut Aller en bas
http://falonasynae.forumactif.com
Lyo
{ Membre }
{ Membre }

Féminin Messages : 65



[résolu] Qeel pas centré Empty
*s'agenouille* Merci beaucoup ! Problème résoluuuuu ♥
MessageSujet: Re: [résolu] Qeel pas centré   [résolu] Qeel pas centré EmptySam 15 Fév 2014, 09:20
Revenir en haut Aller en bas
Contenu sponsorisé




[résolu] Qeel pas centré Empty
MessageSujet: Re: [résolu] Qeel pas centré   [résolu] Qeel pas centré Empty
Revenir en haut Aller en bas
 

[résolu] Qeel pas centré

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» QEEL pas centré
» [RESOLU]QEEL -ouicettefoisjerépondrairapidement-
» QEEL a modifier [Résolu]
» SOS mon QEEL à disparu -- [RESOLU]
» [RESOLU] Elements QEEL

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

Partenaires Or

← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit