Centrer entièrement mon QEEL Bouton_activeCentrer entièrement mon QEEL Bouton_hoverCentrer entièrement mon QEEL Fb-hoverCentrer entièrement mon QEEL 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
Centrer entièrement mon QEEL EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Centrer entièrement mon QEEL EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Centrer entièrement mon QEEL EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Centrer entièrement mon QEEL EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Centrer entièrement mon QEEL EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Centrer entièrement mon QEEL EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Centrer entièrement mon QEEL EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Centrer entièrement mon QEEL EmptySam 11 Fév 2023, 06:04 par Krager

-20%
Le deal à ne pas rater :
Drone Dji DJI Mini 4K (EU)
239 € 299 €
Voir le deal

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

Centrer entièrement mon QEEL

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://parfumdedelice.over-blog.com/
Ami-mimi
Ami-mimi
{ Membre }
{ Membre }

Féminin Messages : 46



Centrer entièrement mon QEEL Empty
Bonjour Smile ,

Tout d'abord désolé de vous déranger avec mes soucis Embarassed , j'aurais préféré trouver par moi-même mais là je séche...(pourtant...ça doit pas être si compliqué >3<)
J'ai modifié la partie QEEL de mon template index_body sur mon forum d'essaie : http://essais-graph.forumactif.fr/forum

Et il se trouve que seule mon image "Qui est là ?" est centrée...Le reste ne l'est pas, malgré que j'ai mis des align="center", et quand on fait un ctrl - on voit bien qu'il n'est pas centré, voir ci-dessous l'image:

Centrer entièrement mon QEEL Qeel310

Et j'aimerais que ça soit ainsi :

Centrer entièrement mon QEEL Qeel210

Et voici mon code de mon template:

Code:
<!-- BEGIN disable_viewonline -->
<table width=100% border=0 align="center">
<tr>
<td width=100% align="center"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
</tr>
</table>
<table width=100% border=0 align="center">
<tr>
<td width=30% align="center"><div style="margin:auto;text-align:center;width:100%"><div class="defilement"><font color="#413A58"><img src="http://sd-6.archive-host.com/membres/images/bf232948713778e4410e08bbc844a14afec26227/stat.png" />{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
  {NEWEST_USER}<br/>
{TOTAL_USERS_ONLINE}<br />
 
      {RECORD_USERS}<br />
  {LOGGED_IN_USER_LIST}<br/></div></td>
  <td width=70% align="center"><div style="margin:auto;text-align:center;width:100%"><div class="defilement"><font color="#413A58"><table><img src="http://sd-6.archive-host.com/membres/images/bf232948713778e4410e08bbc844a14afec26227/fidele.png" /><br/><table>{L_CONNECTED_MEMBERS}</table></td></div>
</tr>
</table>
<table width=100% border=0 align="center">
<tr>
<td width=100% align="center"><img src="http://sd-6.archive-host.com/membres/images/bf232948713778e4410e08bbc844a14afec26227/Groupes.png" /><div class="systab s_float">
 <div class="selected">
    <span><font color="#27F245">~Les administrateurs~</font></span>
    <img src="http://sd-6.archive-host.com/membres/images/bf232948713778e4410e08bbc844a14afec26227/administrateuronglet.png" class="opac" />
  </div>
  <div>
    <span><font color="#000099">~Les Modérateurs~</font></span>
    <img src="http://sd-6.archive-host.com/membres/images/bf232948713778e4410e08bbc844a14afec26227/modoonglet.png" class="opac" />
  </div>
  <div>
    <span><font color="#197F8C">~Adhérents du club félin~</font></span>
    <div align="center"><img border="0" alt="Accéder au club" src="http://sd-6.archive-host.com/membres/images/bf232948713778e4410e08bbc844a14afec26227/adherentonglet.png" usemap="#example90" class="opac" /><map name="example90">
<area shape="rect" coords="447,36,475,47" alt="Click" href="http://clubfelindusiberien.chatterie.fr/Accueil.html" /></map></div>
    </div>
</div>
<div style="clear:left"></div></td>
</tr>
<!-- END disable_viewonline -->

Je vous remercie d'avance si vous trouvez une solution à mon problème ♥️ <33
MessageSujet: Centrer entièrement mon QEEL   Centrer entièrement mon QEEL EmptyLun 18 Fév 2013, 17:58
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Centrer entièrement mon QEEL Empty
Bonsoir Ami-mimi !

Très simplement, pour centrer un bloc horizontalement, align="center" n'a aucun rôle.
Il faut plutôt te servir de margin: auto; en l'appliquant au bon bloc si possible Smile

Ici, la portion du code intéressante est la suivante :
Code:
<td width=30% align="center">
    <div style="margin:auto;text-align:center;width:100%">
        <div class="defilement">
            <font color="#413A58">
                <img src="http://sd-6.archive-host.com/membres/images/bf232948713778e4410e08bbc844a14afec26227/stat.png" />{TOTAL_POSTS}<br />
                {TOTAL_USERS}<br />
                {NEWEST_USER}<br/>
                {TOTAL_USERS_ONLINE}<br />
                {RECORD_USERS}<br />
                {LOGGED_IN_USER_LIST}<br/>
          </div>
</td>
<td width=70% align="center">
    <div style="margin:auto;text-align:center;width:100%">
        <div class="defilement">
            <font color="#413A58">
            <table>
                <img src="http://sd-6.archive-host.com/membres/images/bf232948713778e4410e08bbc844a14afec26227/fidele.png" /><br/>
            <table>{L_CONNECTED_MEMBERS}</table>
</td>
</div>

Bon... le code est bourré d'erreurs, de balises qui s'entrecroisent et ne se ferment pas, voire de balises inutiles qui viennent polluer ton code (quel est l'intérêt de qui entoure l'image ?).

Outre cela, pour répondre à ton problème il suffit de créer une classe dans ton CSS. Appelons-la .center-block par exemple. Il s'agit de l'appliquer aux deux blocs qui ont une largeur définie. Si j'en crois ton code, ce sont les deux blocs qui portent la classe .defilement.
Modifie ton ton HTML pour ajouter cette nouvelle classe à tes blocs :
Code:
<div class="defilement center-block">...</div>

Quant au CSS ? Et bien je te redirige vers ce petit tutoriel qui t'expliquera comment centrer horizontalement un bloc (en se servant de la même classe que je viens de t'introduire).


Normalement, cela devrait résoudre ton problème Smile
(sinon, il y a aussi un coup de 30% / 70% dans le code que je t'ai cité que tu pourrais passer à 50% / 50% j'imagine).
MessageSujet: Re: Centrer entièrement mon QEEL   Centrer entièrement mon QEEL EmptyLun 18 Fév 2013, 18:11
Revenir en haut Aller en bas
http://parfumdedelice.over-blog.com/
Ami-mimi
Ami-mimi
{ Membre }
{ Membre }

Féminin Messages : 46



Centrer entièrement mon QEEL Empty
Bonsoir,

Merci pour la réponse rapide. Je vais essayée tout ça merci Smile Malheureusement pour le align=center je n'ai fais que suivre les conseils du forum des forumsactifs ^^' Bon, j'essaie tout ça et je voie!

A bientôt!

[Re EDIT]

J'ai essayée...pour les statistiques ça marche, dois-je m'y prendre de la même façon avec mes onglets d'en dessous? Car j'ai essayée de mettre 'center-block' dans la div Comme ceci ->
Code:
<div class="selected center-block">

Mais ça ne doit pas être ainsi...car ça ne fonctionne pas Ange
MessageSujet: Re: Centrer entièrement mon QEEL   Centrer entièrement mon QEEL EmptyLun 18 Fév 2013, 18:30
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Centrer entièrement mon QEEL Empty
En fait, cela dépend de ce dont il s'agit. La classe que tu utilise permet de centrer un bloc verticalement.

S'il s'agit de ce pan de code, comme je le pense, la réponse est très simple :
Code:
<div id="cat-onglets">
  <div class="co-item co-actif">Gérance</div>
  <div class="co-item">Le sibérien</div>
  <div class="co-item">Les pros</div>
  <div class="co-item">Club félin</div>
  <div class="co-item">Expositions</div>
  <div class="co-item">Autres</div>
  <div class="co-item">Flood</div>
  <div class="co-item">Tout le fofo</div>
</div>

En fait, ton bloc #cat-onglets est déjà centré (il a une largeur définie à 775px et la propriété margin: auto;). C'est le contenu de ton bloc qui n'est pas centré.

Or ici, tes éléments .co-items ne sont pas des blocs : ce sont des éléments de type inline (tu as mis un display: inline; dans ton CSS pour ce sélecteur).

Pour centrer un élément de type inline dans son conteneur, il suffit que son conteneur ait la propriété text-align:center;.


Pour résumer, ajoute simplement la propriété text-align: center; à ton sélecteur #cat-onglets dans ton CSS, et le tour sera joué Smile
MessageSujet: Re: Centrer entièrement mon QEEL   Centrer entièrement mon QEEL EmptyJeu 21 Fév 2013, 11:57
Revenir en haut Aller en bas
http://parfumdedelice.over-blog.com/
Ami-mimi
Ami-mimi
{ Membre }
{ Membre }

Féminin Messages : 46



Centrer entièrement mon QEEL Empty
Bonjour, en fait je ne demandais pas pour ces onglets là mais pour ceux des groupes Wink (juste en dessous des statistiques, en bas de page ^^)

cordialement
MessageSujet: Re: Centrer entièrement mon QEEL   Centrer entièrement mon QEEL EmptyJeu 21 Fév 2013, 12:40
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Centrer entièrement mon QEEL Empty
Ah !

En effet, ce sont donc des blocs, donc la technique que je t'ai indiqué fonctionne parfaitement. Il faut appliquer la classe au bloc conteneur (donc un cran au-dessus de ce que tu as essayé) Smile
MessageSujet: Re: Centrer entièrement mon QEEL   Centrer entièrement mon QEEL EmptyJeu 21 Fév 2013, 12:58
Revenir en haut Aller en bas
http://parfumdedelice.over-blog.com/
Ami-mimi
Ami-mimi
{ Membre }
{ Membre }

Féminin Messages : 46



Centrer entièrement mon QEEL Empty
ha donc j'essairai ca ce soir quand je serais sur pc Wink Merci! je tiens au courant ^^

[Re edit:] Alors désolé de mon incompétence (mais bon on est là aussi pour apprendre ^^) en fait j'ai un peu tout essayée...mais sans espoir, je n'arrive pas a savoir où mettre cette classe center-block pour centrer mes onglets...

Le code intéressant ici est :

Code:
<center>
<table width=100% border=0 align="center">
<tr>
<td width=100%><center><img src="http://sd-6.archive-host.com/membres/images/bf232948713778e4410e08bbc844a14afec26227/Groupes.png" /><div class="systab s_float">
 <div class="selected">
    <span><font color="#27F245">~Les administrateurs~</font></span>
  <img src="http://www.archive-host.com/files/1937223/c8e1b2bdee2dc09363bb9b165b8fd40891294c7c/ongletadmin.png" class="opac" />
  </div>
  <div>
    <span><font color="#000099">~Les Modérateurs~</font></span>
    <img src="http://www.archive-host.com/files/1937225/c8e1b2bdee2dc09363bb9b165b8fd40891294c7c/ongletclub1.png" class="opac" />
  </div>
  <div>
    <span><font color="#197F8C">~Adhérents du club félin~</font></span>
    <div align="center"><img border="0" alt="Accéder au club" src="http://www.archive-host.com/files/1937224/c8e1b2bdee2dc09363bb9b165b8fd40891294c7c/ongletmodo1.png" usemap="#example90" class="opac" /><map name="example90">
<area shape="rect" coords="447,36,475,47" alt="Click" href="http://clubfelindusiberien.chatterie.fr/Accueil.html" /></map></div>
    </div>
</div>
  <div style="clear:left"></div></center></td></div>
</tr>

Je ne sais pas quoi ajouter de plus...au pire ce n'est pas bien grave mais ça serait un peu plus jolie de centrer ^^
MessageSujet: Re: Centrer entièrement mon QEEL   Centrer entièrement mon QEEL EmptyJeu 21 Fév 2013, 13:12
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Centrer entièrement mon QEEL Empty
Code:
<center>
  <table width=100% border=0 align="center">
    <tr>
      <td width=100%>
        <center>
          <img src="http://sd-6.archive-host.com/membres/images/bf232948713778e4410e08bbc844a14afec26227/Groupes.png" />
          <div class="systab s_float">
            <div class="selected">
              <span><font color="#27F245">~Les administrateurs~</font></span>
              <img src="http://www.archive-host.com/files/1937223/c8e1b2bdee2dc09363bb9b165b8fd40891294c7c/ongletadmin.png" class="opac" />
            </div>

            <div>
              <span><font color="#000099">~Les Modérateurs~</font></span>
              <img src="http://www.archive-host.com/files/1937225/c8e1b2bdee2dc09363bb9b165b8fd40891294c7c/ongletclub1.png" class="opac" />
            </div>

            <div>
              <span><font color="#197F8C">~Adhérents du club félin~</font></span>
              <div align="center">
                <img border="0" alt="Accéder au club" src="http://www.archive-host.com/files/1937224/c8e1b2bdee2dc09363bb9b165b8fd40891294c7c/ongletmodo1.png" usemap="#example90" class="opac" />
                <map name="example90">
                  <area shape="rect" coords="447,36,475,47" alt="Click" href="http://clubfelindusiberien.chatterie.fr/Accueil.html" />
                </map>
              </div>
            </div>
          </div><!-- /systab -->
          <div style="clear:left"></div>
        </center>
      </td>
    </div>
  </tr>

Voici ce que donne ton code proprement indenté (pratique que je te conseille, ça permet de mieux visualiser l'organisation et la structure de ton code).

Déjà, tu peux supprimer les align="center" et autres balises obsolètes du genre <center>.

Ensuite, la portion de code qui t'intéresse (celle que tu souhaites centrer) c'est celle-ci :
Code:
<div class="systab s_float">
  <div class="selected">
    <span><font color="#27F245">~Les administrateurs~</font></span>
    <img src="http://www.archive-host.com/files/1937223/c8e1b2bdee2dc09363bb9b165b8fd40891294c7c/ongletadmin.png" class="opac" />
  </div>

  <div>
    <span><font color="#000099">~Les Modérateurs~</font></span>
    <img src="http://www.archive-host.com/files/1937225/c8e1b2bdee2dc09363bb9b165b8fd40891294c7c/ongletclub1.png" class="opac" />
  </div>

  <div>
    <span><font color="#197F8C">~Adhérents du club félin~</font></span>
    <div align="center">
      <img border="0" alt="Accéder au club" src="http://www.archive-host.com/files/1937224/c8e1b2bdee2dc09363bb9b165b8fd40891294c7c/ongletmodo1.png" usemap="#example90" class="opac" />
      <map name="example90">
        <area shape="rect" coords="447,36,475,47" alt="Click" href="http://clubfelindusiberien.chatterie.fr/Accueil.html" />
      </map>
    </div>
  </div>
</div><!-- /systab -->

C'est au bloc conteneur qu'il faut rajouter la classe (celui qui contient déjà les classes .systab .s_float) Smile
MessageSujet: Re: Centrer entièrement mon QEEL   Centrer entièrement mon QEEL EmptyLun 25 Fév 2013, 09:49
Revenir en haut Aller en bas
http://parfumdedelice.over-blog.com/
Ami-mimi
Ami-mimi
{ Membre }
{ Membre }

Féminin Messages : 46



Centrer entièrement mon QEEL Empty
Bonjour,

C'est bien ce que j'avais fais à la base mais ça ne marchait pas Wink Bon écoutes c'est pas si grave, j'ai réussie à centrer l'essentiel de mes onglets donc ca va ^^ grâce au CSS.

Donc j'estime mon sujet résolu Smile

Merci à toi de m'avoir aidé en tout cas ^^
MessageSujet: Re: Centrer entièrement mon QEEL   Centrer entièrement mon QEEL EmptyLun 25 Fév 2013, 11:35
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Centrer entièrement mon QEEL Empty
Hello,

Le fait que les blocs ne se centrent pas est dû au fait qu'ils sont positionnés en flottants.

Si tu veux améliorer le rendu, retire le 
<center>
qui encadre ledit bloc et modifie (crée) la classe .systab en centrant le bloc (margin:auto) et en fixant sa largeur à celle de l'espace occupé par le duo onglets + contenu des onglets.
MessageSujet: Re: Centrer entièrement mon QEEL   Centrer entièrement mon QEEL EmptyLun 25 Fév 2013, 12:36
Revenir en haut Aller en bas
http://parfumdedelice.over-blog.com/
Ami-mimi
Ami-mimi
{ Membre }
{ Membre }

Féminin Messages : 46



Centrer entièrement mon QEEL Empty
Ok merci Smile
MessageSujet: Résolu    Centrer entièrement mon QEEL EmptyMar 26 Fév 2013, 18:30
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Centrer entièrement mon QEEL Empty
Bonjour,

Si tu considères ton problème comme résolu, merci de penser à l'indiquer dans le titre de ton sujet Wink
MessageSujet: Re: Centrer entièrement mon QEEL   Centrer entièrement mon QEEL EmptyVen 01 Mar 2013, 18:35
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Centrer entièrement mon QEEL Empty
Hello !
A la lecture des messages je vais considérer ce sujet comme résolu !
S'il y a un souci, n'hésite pas à contacter un modérateur (:
Merci de ta compréhension Centrer entièrement mon QEEL 926145
MessageSujet: Re: Centrer entièrement mon QEEL   Centrer entièrement mon QEEL EmptyMer 06 Mar 2013, 15:42
Revenir en haut Aller en bas
Contenu sponsorisé




Centrer entièrement mon QEEL Empty
MessageSujet: Re: Centrer entièrement mon QEEL   Centrer entièrement mon QEEL Empty
Revenir en haut Aller en bas
 

Centrer entièrement mon QEEL

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

 Sujets similaires

-
» Centrer le QEEL =)
» Problème qeel image, centrer le texte
» Centrer les titres des groupes dans le QEEL {résolu}
» centrer une banniere....
» Centrer les avatars.

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 | Forumactif.com