centrer mon contenu (html)

3 participants

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

Résolu centrer mon contenu (html)

Message par carousse Lun 19 Nov 2012 - 19:38

Je n'arrive plus à centrée le contenue de mes onglets. J'ai essayer avec center et en bbcode aussi mais pas moyen

Voici mon code

Code:
<div class="systab">
  <div>
    <span>Acceuil</span>
    <div style="width:900px;background-color:none; text-align: center; 10px lightgrey solid;"><br><table><tr><td><span style="margin-left:70px;text-align:left;white-space: nowrap;font-size:50px;color:#365F7D;font-family: georgia;">Bienvenue sur le RPG Harry Potter</span><br><span style="font-size:40px;color:#365F7D;font-family: georgia;">{USER&amp;#8288;NAME}</span>
</td></tr></table><div style="margin:auto;text-align:center;width:100%"><table><tr><td><blockquote style="margin-left:10px;width:260px;height:325px;background-image:url('http://i35.servimg.com/u/f35/12/75/86/48/fond10.png');border: 3px solid lightgrey;border-radius: 15px 0px 15px 0px;"><span style="text-align:center;white-space: nowrap;font-size:25px;color:#d2edff;font-family: georgia;letter-spacing:5px;"><br>NEWS</span><br><br><marquee scrolldelay="130" onmouseover="this.stop();" onmouseout="this.start();" direction="up" height="210px;" width="230px;"><div align="justify";><font color="#d2edff">♦ Bienvenue au nouveau administrateur qui est Chester ♦<br><br>

♦ N'oubliez pas d'assister à vos cours ♦</font><br><br>


<br><br>

</div></marquee></blockquote></td>
<td><blockquote style="margin-left:-470px;width:415px;height:325px;background-image:url('http://i35.servimg.com/u/f35/12/75/86/48/fond10.png');border: 3px solid lightgrey;border-radius: 15px 0px 15px 0px;"><span style="text-align:center;white-space: nowrap;font-size:25px;color:#d2edff;font-family: georgia;letter-spacing:5px;"><br>CONTEXTE</span><blockquote style="width:370px;height:230px;overflow:auto;"><div align="justify"><font color="#d2edff">" Harry viens de fêter ses 30 printemps. Le temps est passé depuis que celui-ci a battu "celui dont on ne doit pas prononcer le nom". Poudlard a trouvé un nouveau directeur et continue donc d'avoir de nouveaux élève qui sont près à apprendre la magie.

<br><br>Harry est reconnu partout grâce à ce qu'il a fait et tout le monde le remercie, sauf ceux qui ne croient pas que le maître des forces du mal est mort."</div>
</div></blockquote></blockquote></td></tr></font>

<tr><td><blockquote style="margin-left:20px;width:750px;height:70px;background-image:url('http://i35.servimg.com/u/f35/12/75/86/48/fond10.png');border: 3px solid lightgrey;border-radius: 15px 0px 15px 0px;"><span style="text-align:center;white-space: nowrap;font-size:15px;color:#d2edff;font-family: georgia;letter-spacing:5px;"><br><font color="#d2edff">CREDITS</span><br>
<marquee scrolldelay="130" onmouseover="this.stop();" onmouseout="this.start();" direction="left" height="50px;" width="720px;"> <i>Forum réalisé par</i> Carousse, Seb & Liinky;  <i>Graphisme réalisé par</i> Carousse;  <i>Codage réalisé par</i> Carousse;  <i>Page d’accueil réalisé par</i> <a href="http://epicode.bbactif.com/u52">UMI</a> sur <a href="http://epicode.bbactif.com/">Epicode</a>; <i>Contexte réalisé par</i>Carousse & Seb et <yuuki Kuran; <i>Réglement réalisé par</i> Carousse  <span style="font-size: 9px; line-height: normal">NE PAS RETIRER</span>.</blockquote></td></tr></table>
</blockquote></div></font></div></div>

  <div>
    <span>La coupe</span>
    <div style="width:900px;background-color:none; text-align: center; 10px lightgrey solid;"><br><table><tr><td><span style="margin-left:70px;text-align:left;white-space: nowrap;font-size:50px;color:#365F7D;font-family: georgia;"><center>La Coupe Des 4 Maisons<ce,ter></span><br><span style="font-size:40px;color:#365F7D;font-family: georgia;"><br><br></span></table>

<a href="http://www.servimg.com/image_preview.php?i=1528&u=12758648" target="_blank" ><img src="http://i35.servimg.com/u/f35/12/75/86/48/gryffo10.png" border="0" alt="Image hébergée par servimg.com" /></a>    <a href="http://www.servimg.com/image_preview.php?i=1529&u=12758648" target="_blank" ><img src="http://i35.servimg.com/u/f35/12/75/86/48/pouffs10.png" border="0" alt="Image hébergée par servimg.com" /></a>    <a href="http://www.servimg.com/image_preview.php?i=1530&u=12758648" target="_blank" ><img src="http://i35.servimg.com/u/f35/12/75/86/48/serdai10.png" border="0" alt="Image hébergée par servimg.com" /></a>    <a href="http://www.servimg.com/image_preview.php?i=1531&u=12758648" target="_blank" ><img src="http://i35.servimg.com/u/f35/12/75/86/48/serpen10.png" border="0" alt="Image hébergée par servimg.com" /></a><br><br>

 <span style="font-size: 24px; line-height: normal"><font color="red">00</font>          <font color="yellow">00 </font>          <font color="#00529A">00 </font>          <font color="#01FE6F">00</font></span>
  </div></div>
  <div>

<span>Le Staff</span>
    <div style="width:900px;background-color:none; text-align: center; 10px lightgrey solid;"><br><table><tr><td><span style="margin-left:70px;text-align:left;white-space: nowrap;font-size:50px;color:#365F7D;font-family: georgia;"><div style="margin:auto;text-align:center;width:100%">Le Staff</div></span><br><span style="font-size:40px;color:#365F7D;font-family: georgia;"><br><br></span></table>
  </div>
<center>
<table>
<!-- première ligne -->
  <tr align="center">
      <td>
 
  <div style="padding: 2px; border: #FFFFFF 3px solid;border-radius: 10px; background-colo:none);">
        <strong>Nom :</strong> GRANGER / WEASLEY<br>
        <strong>Prénom :</strong> Hermione<br>
<strong>Son Rôle :</strong> Fondatrice du forum<br>
        <strong>Sa fiche :</strong> <a href="http://hominum-revelio.lebonforum.com/t10-hermione-granger-weasley" class="lien_titre">Ma belle fiche</a><br>
        <strong>Lui écrire un MP :</strong> <a href="http://hominum-revelio.lebonforum.com/privmsg?mode=post&u=3" class="lien_titre">M'écrire un petit MP</a><br>
        <strong>Lui écrire un e-mail :</strong><a href="http://hominum-revelio.lebonforum.com/profile?mode=email&u=3" class="lien_titre">M'écrire un petit mail</a><br>
 </div>
 
  </td>
  <td>
 
<img style="margin: 20px; border: 3px solid #FFFFFF; border-radius: 10px" src="http://i35.servimg.com/u/f35/12/75/86/48/emma13.jpg">
 
  </td>
</tr>
 
<!-- deuxième ligne -->
<tr align="center">
  <td>
 
<img style="margin: 20px; border: 3px solid #FFFFFF;border-radius: 10px" src="http://i35.servimg.com/u/f35/12/75/86/48/linky12.jpg">
 
  </td>
  <td>
 
 <div style="padding: 2px; border: #FFFFFF 3px solid;border-radius: 10px; background-colo:none);">
        <strong>Nom :</strong> ASHEN<br>
        <strong>Prénom :</strong> Liinky<br>
<strong>Son Rôle :</strong> Administratrice du forum<br>
        <strong>Sa fiche :</strong> <a href="http://hominum-revelio.lebonforum.com/t11-liinky-aschen" class="lien_titre">Ma belle fiche</a><br>
        <strong>Lui écrire un MP :</strong> <a href="http://hominum-revelio.lebonforum.com/privmsg?mode=post&u=4" class="lien_titre">M'écrire un petit MP</a><br>
        <strong>Lui écrire un e-mail :</strong> <a href="http://hominum-revelio.lebonforum.com/profile?mode=email&u=4" class="lien_titre">M'écrire un petit mail</a><br>
 </div>
 
  </td>
</tr>
 
<!-- troisième ligne -->
<tr align="center">
  <td>
 
 <div style="padding: 2px; border: #FFFFFF 3px solid;border-radius: 10px; background-colo:none);">
        <strong>Nom :</strong> L. WINTER<br>
        <strong>Prénom :</strong> Duncan<br>
<strong>Son Rôle :</strong> Administrateur du forum<br>
        <strong>Sa fiche :</strong> <a href="http://hominum-revelio.lebonforum.com/t7-duncan-l-winter-professeur-de-potions" class="lien_titre">Ma belle fiche</a><br>
        <strong>Lui écrire un MP :</strong> <a href="http://hominum-revelio.lebonforum.com/privmsg?mode=post&u=2" class="lien_titre">M'écrire un petit MP</a><br>
        <strong>Lui écrire un e-mail :</strong> <a href="http://hominum-revelio.lebonforum.com/profile?mode=email&u=2" class="lien_titre">M'écrire un petit mail</a><br>
 </div>
 
  </td>
  <td>
 
<img style="margin: 20px; border: 3px solid #FFFFFF;border-radius: 10px" src="http://i35.servimg.com/u/f35/12/75/86/48/duncan10.jpg">
 
    </td>
  </tr>

<!-- 4eligne -->
<tr align="center">
  <td>
 
<img style="margin: 20px; border: 3px solid #FFFFFF;border-radius: 10px" src="http://i45.servimg.com/u/f45/12/75/86/48/1010.jpg">
 
  </td>
  <td>
 
 <div style="padding: 2px; border: #FFFFFF 3px solid;border-radius: 10px; background-colo:none);">
        <strong>Nom :</strong> KRUGER<br>
        <strong>Prénom :</strong> Chester<br>
<strong>Son Rôle :</strong> Administrateur<br>
        <strong>Sa fiche :</strong> <a href="http://hominum-revelio.lebonforum.com/t66-chester-kruger" class="lien_titre">Ma belle fiche</a><br>
        <strong>Lui écrire un MP :</strong> <a href="http://hominum-revelio.lebonforum.com/privmsg?mode=post&u=16" class="lien_titre">M'écrire un petit MP</a><br>
        <strong>Lui écrire un e-mail :</strong> <a href="http://hominum-revelio.lebonforum.com/profile?mode=email&u=16" class="lien_titre">M'écrire un petit mail</a><br>
 </div>
 
  </td>
</tr>
</table>
</center></div><div>

    <span>Ressource</span>
    <div style="width:900px;background-color:none; text-align: center; 10px lightgrey solid;"><br><table><tr><td><span style="margin-left:70px;text-align:left;white-space: nowrap;font-size:50px;color:#365F7D;font-family: georgia;">Les Sites D'aide</span><br><span style="font-size:40px;color:#365F7D;font-family: georgia;"><br><br>
<a href="http://www.servimg.com/image_preview.php?i=1535&u=12758648" target="_blank" ><a href=http://www.pottermore.com/fr/"><a href="http://www.servimg.com/image_preview.php?i=1538&u=12758648" target="_blank" ><img src="http://i35.servimg.com/u/f35/12/75/86/48/potter11.jpg" border="0" alt="Image hébergée par servimg.com" /></a></a></a><br><a href="http://www.pottermore.com/fr/">Pottermore</a><br><br>

<a href="http://www.servimg.com/image_preview.php?i=1535&u=12758648" target="_blank" ><a href=http://www.pottermore.com/fr/"><a href="http://www.servimg.com/image_preview.php?i=1538&u=12758648" target="_blank" ><img src="http://i35.servimg.com/u/f35/12/75/86/48/ency11.jpg" border="0" alt="Image hébergée par servimg.com" /></a></a></a><br><a href="http://www.encyclopedie-hp.org/wizard.php">Encyclopédie d'HP</a><br><br></span></table>
  </div></div>
 

  <div>
    <span>Partenaires</span>
    <div style="width:900px;background-color:none; text-align: center; 10px lightgrey solid;"><br><table><tr><td><span style="margin-left:70px;text-align:left;white-space: nowrap;font-size:50px;color:#365F7D;font-family: georgia;">Partenariats</span><br><span style="font-size:40px;color:#365F7D;font-family: georgia;"><br><br><div style="margin:auto;text-align:center;width:100%"><table border="0"><div style="margin:auto;text-align:center;width:100%"><tr><td align="left"><a href="http://rpg-vampire-knight.vampire-legend.net" class="postlink" target="_blank"><img src="http://i35.servimg.com/u/f35/12/75/86/48/miniba10.jpg" border="0" alt="" /></a> </td><td align="left"><a href="http://day-life.forumharrypotter.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.tinypic.com/2yye16b.png" border="0" alt="" /></a>  </td><td align="left"><a href="http://hogwarts-imperium.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i43.servimg.com/u/f43/16/03/78/88/hi110.jpg" border="0" alt="" /></a> </td><td align="left"><a href="http://www.servimg.com/image_preview.php?i=10&u=17690527" class="postlink" target="_blank" rel="nofollow"><img src="http://i39.servimg.com/u/f39/17/69/05/27/wow_tt10.png" border="0" alt="" /></a> </td></tr><tr><td align="left"><a href="http://noxrpg.faireforum.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://dl.dropbox.com/u/5384099/perso/theme%20nox/bouton-nox.jpg" border="0" alt="" /></a> </td><td align="left"><a href="http://les-maraudeurs-rpg.forums-actifs.net/forum.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://i30.servimg.com/u/f30/13/10/97/15/maraud10.jpg" border="0" alt="" /></a> </td><td align="left"> <a href="http://obscuro-momentum.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img4.hostingpics.net/pics/623690bouton.jpg" border="0" alt="" /></a></td><td align="left"><a href="http://poudlardforumrpg.forumgratuit.org/"><img src="http://i49.servimg.com/u/f49/16/69/52/22/logo_111.jpg" /></a> </td></tr><tr><td align="left"><a href="http://wizard-university.forum-canada.net/" class="postlink" target="_blank" rel="nofollow"><img src="http://img11.hostingpics.net/pics/71865187B1.png" border="0" alt="" /></a> </td><td align="left"><a href="http://foret-interdite.harrypotterfans.fr/forum" class="postlink" target="_blank" rel="nofollow"><img src="http://i40.servimg.com/u/f40/15/10/42/87/b210.png" border="0" alt="" /></a> </td><td align="left"><a style="font-size: 20px; color: #B5B5B5; font-family: Bilbo Swash Caps; text-align: center; padding: 10px;" href="http://jerasa.forumactif.com/"><img src="http://imageshack.us/a/img547/8982/logominil.jpg" alt="banner" height="35" width="100" style="margin-bottom: 20px;"></a> </td><td align="left"><a style="font-size: 20px; color: #B5B5B5; font-family: Bilbo Swash Caps; text-align: center; padding: 10px;" href="http://ncis-angelscared.superforum.fr/forum"><img src="http://i43.servimg.com/u/f43/13/83/82/99/sans_t10.png" alt="banner" height="35" width="100" style="margin-bottom: 20px;"></a> </td></tr><tr><td align="left"> </td><td align="left"> </td><td align="left"> </td><td align="left"> </td></tr><tr><td align="left"> </td><td align="left"> </td><td align="left"> </td><td align="left"> </td></tr></div></table></div>



<br><br></span></table>

  </div></div><div>
    <span>Pub</span>
  <div style="width:900px;background-color:none; text-align: center; 10px lightgrey solid;"><br><table><tr><td><span style="margin-left:70px;text-align:left;white-space: nowrap;font-size:50px;color:#365F7D;font-family: georgia;">Vos Votes</span><br><span style="font-size:40px;color:#365F7D;font-family: georgia;"><br><br><div style="margin:auto;text-align:center;width:100%"><table border="0"><tr><td align="left"> <a href="http://www.root-top.com/topsite/smykie/in.php?ID=1357"><img src="http://img.root-top.com/topsite/smykie/banner.gif" border="0" alt="hominum revelio" title="hominum revelio">
</a></td><td align="left"><div style="margin:auto;text-align:center;width:100%">13e</div> </td></tr><tr><td align="left"><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=19596"><img src="http://img.root-top.com/topsite/obsession27/banner.gif" border="0" alt="hominum revelio" title="hominum revelio"></a>
 </td><td align="left"><div style="margin:auto;text-align:center;width:100%">180e</div> </td></tr><tr><td align="left"> <a href="http://www.root-top.com/topsite/harry_potter_the_world/in.php?ID=8775"><img src="http://img.root-top.com/topsite/harry_potter_the_world/banner.gif" border="0" alt="hominum revelio" title="hominum revelio">
</a></td>
23e </div></td></tr></table></div>

  </div></div>
</div>

 
  </div>
</div>

Merci d'avance

Carousse
carousse

carousse
*****

Messages : 844
Inscrit(e) le : 02/08/2008

http://rpg-vampire-knight.vampire-legend.com/
carousse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: centrer mon contenu (html)

Message par Automne Mar 20 Nov 2012 - 15:28

Bonjour,

quel est le lien du forum concerné par le problème? Merci
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: centrer mon contenu (html)

Message par carousse Mar 20 Nov 2012 - 17:23

carousse

carousse
*****

Messages : 844
Inscrit(e) le : 02/08/2008

http://rpg-vampire-knight.vampire-legend.com/
carousse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: centrer mon contenu (html)

Message par Ea Mer 21 Nov 2012 - 0:58

Bonjour,


Si je regarde vous avez un tableau, la largeur d'un tableau se met de façon à être la plus petite possible par rapport à la largeur de son contenu.

Donc là ça fait ce qui est surligné en bleu : https://i.imgur.com/1JX0r.png

Pour centrer le tableau, il faut lui mettre :

Code:
style="margin:auto"
auto est une valeur spécial à mettre à margin ( = marge ) qui dit que la marge à gauche et à droite doit être mise automatiquement afin que l'élément soit centré au milieu

On a alors comme résultat : https://i.imgur.com/KJR64.png

Après pour centrer des choses normales ( du style texte ) dans un div ou une case ( <td> ), il faut mettre :

Code:
id="text-align: center"
à la balise.

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: centrer mon contenu (html)

Message par carousse Mer 21 Nov 2012 - 15:47

Pourquoi pour le premier tableau j'ai le margin auto et pourtant il est pas au milieu


Code:
style="margin:auto;text-align:center;width:100%"><table><tr><td><blockquote style="margin-left:10px;width:260px;height:325px;background-image:url('http://i35.servimg.com/u/f35/12/75/86/48/fond10.png');
carousse

carousse
*****

Messages : 844
Inscrit(e) le : 02/08/2008

http://rpg-vampire-knight.vampire-legend.com/
carousse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: centrer mon contenu (html)

Message par Ea Mer 21 Nov 2012 - 18:42

Le tableau n'est pas en margin:auto :

Code:
<table>
C'est le <div> qui a le "margin: auto", mais en fait vu qu'il prend également 100% de la largeur ça ne sert à rien ( la marge à gauche est égale à la marge à droite et vaut 0 ).

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: centrer mon contenu (html)

Message par carousse Mer 21 Nov 2012 - 19:25

Oua le bronx.

Je verrais ceci quand ma page à debuguer

Je vous remercie ^^
carousse

carousse
*****

Messages : 844
Inscrit(e) le : 02/08/2008

http://rpg-vampire-knight.vampire-legend.com/
carousse 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