Comment aligner une image en HTML ?

A

alargeau

Membre actif
17 Janvier 2005
591
36
44
Bonjour,

je suis nouveau en développement web, et j'ai un gros problème. J'ai fait des recherches sur internet mais aucune technique ne marche et j'avoue que je commence à m'essouffler...
Bref, voici mon problème, j'ai une image (tranchée par photoshop) que j'essaie de centrer horizontalement ET verticalement.
Mon code est le suivant :

Bloc de code: 
<table width="721" height="469" border="0" top="128" align="center" cellpadding="0" cellspacing="0" id="Tableau_01">

Mon image est bien centrée horizontalement (grâce à Dreamweaver d'ailleurs), sauf sous IE, lequel ne semble pas vouloir me la centrer du tout. Bref, je cherche, en vain, un moyen pour centrer cette image aussi verticalement.

J'espère que vous pourrez m'aider.

Merci d'avance et bonne soirée.
 
Bonjour,

Ma réponse risque de te décevoir mais je te recommanderais de reprendre à zéro l'apprentissage des bases de la construction d'un site web utilisant avantageusement HTML et CSS.

Les tableaux tels que tu sembles les utiliser sont à proscrire. Le rôle d'HTML n'est pas de mettre en page ton site mais de le structurer sémantiquement. C'est CSS qui jouera le rôle de "metteur en scène".

Bon courage! ;)
 
Non la réponse ne me déçoit pas, c'est ce que j'ai pu lire çà et là en fait. Ce tableau, c'est en fait une image tranchée faite sous photoshop. C'est la page d'accueil de mon site qui redirige ensuite vers mon site et vers des sites étrangères. Donc j'ai fait une image avec photoshop, j'ai incorporé des petits drapeaux, et photoshop m'a tranché tout ça et me l'a enregistré sous forme d'un tableau en fait. Ce n'est donc pas un tableau au sens propre.
 
Si tu veux conserver cette utilisation de tableaux,

crée un tableau dont largeur et hauteur sont à 100% et ajouter valign="center" comme attribut du tableau de base.

<table width="100%" height="100%">
<tr>
<td>

<!-- ici le tableau initial avec l'ajout de l'attribut valign -->
</td>
</tr>
</table>

Ce n'est pas la solution la plus élégante mais elle a le mérite de fonctionner.

http://dacapoo.free.fr/test.html
 
Merci da capo, ça a l'air de marcher nickel chrome... sous Safari. En effet, sous Firefox, ça me centre bien l'image, aucun soucis, sauf que ça me met une espèce de cadre noir autour de l'image, ce qui n'est pas présent sous Safari. Bref, sous Safari, l'image est exatement comme je voudrais, centrée et avec le fond de la couleur que je veux. Quelle erreur ai-je donc commise ? Merci encore.

Bloc de code: 
<style type="text/css">
<!--
body {
	background-color: #999;
}
-->
</style></head>

<body>

<table width="100%" height="100%">
<tr>
<td>
<table bgcolor="#999" width="721" height="469" border="0" top="128" align="center" valign="center" cellpadding="0" cellspacing="0" id="Tableau_01">
<tr>
<td align="center" valign="center">      <tr>
        <td colspan="15">
          <img src="http://forums.macg.co/images/index_01.png" width="720" height="185" alt=""></td>
        <td>
          <img src="http://forums.macg.co/images/spacer.gif" width="1" height="185" alt=""></td>
        </tr>
      <tr>
        <td rowspan="8">
          <img src="http://forums.macg.co/images/index_02.png" width="141" height="284" alt=""></td>
        <td>
          <a href="http://site309.free.fr/Fr/Accueil.html">
            <img src="http://forums.macg.co/images/700px-contentbgborder_03.png" width="58" height="35" border="0" alt="Français"></a></td>
        <td colspan="13" rowspan="2">
          <img src="http://forums.macg.co/images/index_04.png" width="521" height="208" alt=""></td>
        <td>
          <img src="http://forums.macg.co/images/spacer.gif" width="1" height="35" alt=""></td>
        </tr>
      <tr>
        <td rowspan="7">
          <img src="http://forums.macg.co/images/index_05.png" width="58" height="249" alt=""></td>
        <td>
          <img src="http://forums.macg.co/images/spacer.gif" width="1" height="173" alt=""></td>
        </tr>
      <tr>
        <td colspan="11">
          <img src="http://forums.macg.co/images/index_06.png" width="338" height="2" alt=""></td>
        <td rowspan="2">
          <a href="mailto:[email protected]">
            <img src="http://forums.macg.co/images/700px-contentbgborder_07.png" width="45" height="13" border="0" alt="Email us!"></a></td>
        <td rowspan="6">
          <img src="http://forums.macg.co/images/index_08.png" width="138" height="76" alt=""></td>
        <td>
          <img src="http://forums.macg.co/images/spacer.gif" width="1" height="2" alt=""></td>
        </tr>
      <tr>
        <td rowspan="5">
          <img src="http://forums.macg.co/images/index_09.png" width="65" height="74" alt=""></td>
        <td rowspan="3">
          <a href="http://www.309-gti.co.uk/">
            <img src="http://forums.macg.co/images/700px-contentbgborder_10.png" width="22" height="22" border="0" alt="English"></a></td>
        <td rowspan="5">
          <img src="http://forums.macg.co/images/index_11.png" width="23" height="74" alt=""></td>
        <td rowspan="2">
          <a href="http://www.309er.de/">
            <img src="http://forums.macg.co/images/700px-contentbgborder_12.png" width="22" height="21" border="0" alt="Deutsch"></a></td>
        <td rowspan="5">
          <img src="http://forums.macg.co/images/index_13.png" width="23" height="74" alt=""></td>
        <td rowspan="4">
          <a href="http://peugeot309.forogeneral.es/board/">
            <img src="http://forums.macg.co/images/700px-contentbgborder_14.png" width="22" height="24" border="0" alt="Castellano"></a></td>
        <td rowspan="5">
          <img src="http://forums.macg.co/images/index_15.png" width="23" height="74" alt=""></td>
        <td rowspan="2">
          <a href="http://www.peugeot309.pl/">
            <img src="http://forums.macg.co/images/700px-contentbgborder_16.png" width="22" height="21" border="0" alt="Polski"></a></td>
        <td rowspan="5">
          <img src="http://forums.macg.co/images/index_17.png" width="23" height="74" alt=""></td>
        <td rowspan="2">
          <a href="http://www.kitanet.ne.jp/~fgs/owners/">
            <img src="http://forums.macg.co/images/700px-contentbgborder_18.png" width="22" height="21" border="0" alt="???"></a></td>
        <td rowspan="5">
          <img src="http://forums.macg.co/images/index_19.png" width="71" height="74" alt=""></td>
        <td>
          <img src="http://forums.macg.co/images/spacer.gif" width="1" height="11" alt=""></td>
        </tr>
      <tr>
        <td rowspan="4">
          <img src="http://forums.macg.co/images/index_20.png" width="45" height="63" alt=""></td>
        <td>
          <img src="http://forums.macg.co/images/spacer.gif" width="1" height="10" alt=""></td>
        </tr>
      <tr>
        <td rowspan="3">
          <img src="http://forums.macg.co/images/index_21.png" width="22" height="53" alt=""></td>
        <td rowspan="3">
          <img src="http://forums.macg.co/images/index_22.png" width="22" height="53" alt=""></td>
        <td rowspan="3">
          <img src="http://forums.macg.co/images/index_23.png" width="22" height="53" alt=""></td>
        <td>
          <img src="http://forums.macg.co/images/spacer.gif" width="1" height="1" alt=""></td>
        </tr>
      <tr>
        <td rowspan="2">
          <img src="http://forums.macg.co/images/index_24.png" width="22" height="52" alt=""></td>
        <td>
          <img src="http://forums.macg.co/images/spacer.gif" width="1" height="2" alt=""></td>
        </tr>
      <tr>
        <td>
          <img src="http://forums.macg.co/images/index_25.png" width="22" height="50" alt=""></td>
        <td>
          <img src="http://forums.macg.co/images/spacer.gif" width="1" height="50" alt=""></td>
        </tr>
      </table>
  </div>
<!-- End Save for Web Slices -->
</body>
</html>
 
Le contour de l'image sous Firefox (idem sous Explorer et Opéra) vient du fait que tu as attribué un lien sur ton image, pour éviter le "border" à ton image tu ajoute un attribut à l'image, comme ceci :
Bloc de code: 
<img src="tonimage.jpg" border="none" />

Sinon pour centrer une image dans ta page (vertical et horizontal) pour ta page d'accueil la méthode CSS avec marges négatives est la bonne solution... :siffle:
 
momo-fr a dit:
Sinon pour centrer une image dans ta page (vertical et horizontal) pour ta page d'accueil la méthode CSS avec marges négatives est la bonne solution... :siffle:
Cliquez pour agrandir...

C'est marrant, mais pour le coup, j'estime que cette méthode se dégrade mal (de ce que j'en ai en mémoire tout au moins) : si la fenêtre est petite, le positionnement en marge négative fait qu'il y a des portions complètes de layout "masqué".

J'attends le display:table-cell pour tous…
 

Sujets similaires

benG
Mail : signature HTML
Réponses
1
Affichages
2K
Web et e-mail
julienboost
J
phcm64100
Signature HTML pour mail
Réponses
2
Affichages
2K
Web et e-mail
phcm64100
phcm64100
cda685
Décalage progressif son/image : comment y remédier ?
Réponses
5
Affichages
16K
Création vidéo
cda685
cda685
I
diaporama HTML sur widget iweb
Réponses
0
Affichages
3K
Développement web
ickyknox
I
I
Popup video
Réponses
1
Affichages
2K
Développement web
WebD
WebD
Haut Bas