Les commandes ne s'alignent pas correctement

J'utilise le code suivant pour concevoir ma page d'accueil. La sortie (comme indiqué ci-dessous) n'apparaît pas correctement. Vous pouvez voir la bannière allant à l'extrême gauche et les liens de navigation ont un écart énorme entre les deux. Comment régler ceci? Peut-il être fait en utilisant seulement la balise DIV au lieu de TABLE?Les commandes ne s'alignent pas correctement

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 
    <title> 
    First Website 
    </title> 
</head> 

<body> 
     <table id="main" align="center" width="600 px"> 
     <tr id="trBanner"> 
      <td id="tdBanner"> 
       <img src="../../../My Pictures/banner copy.bmp.jpg" 
      </td> 
     </tr> 
     <tr id="trNavLinks"> 
      <td id="lnkHome"> 
        <a href="" id="lnkHome" name="lnkHome">Home</a> 
      </td> 
      <td id="lnkLife"> 
        <a href="" id="lnkLife" name="lnkLife">Life</a> 
      </td> 
      <td id="lnkTeachings"> 
        <a href="" id="lnkTeachings" name="lnkTeachings">Teachings</a> 
      </td> 
      <td id="lnkExperiences"> 
        <a href="" id="lnkExperiences" name="lnkExperiences">Experiences</a> 
      </td> 
      <td id="lnkPhotoGallery"> 
        <a href="" id="lnkPhotoGallery" name="lnkPhotoGallery">Photo Gallery</a> 
      </td> 
      <td id="lnkReach"> 
        <a href="" id="lnkReach" name="lnkReach">How to Reach</a> 
      </td> 
      <td id="lnkContact"> 
        <a href="" id="lnkContact" name="lnkContact">Contact Us</a> 
      </td> 
     </tr> 
     </table> 
</body> 

</html>

alt text http://www.freeimagehosting.net/uploads/b122c4ef21.jpg

Source

2010-03-21 RKh

mieux adapté pour DocType? http://doctype.com/ –

Sans voir votre code très long - ne pas utiliser les tables!

Je sais que c'est difficile pour ceux qui ont développé longtemps avec des tables en webdesign, mais croyez-moi - après avoir appris comment le concevoir avec CSS & DIV-Tags, vous remercierez Dieu pour cela!

Voici un tutoriel pour vous: http://www.colorplexstudios.com/articles/div_web_design_tutorial/

Et si vous voulez avoir une réponse à votre code question: Il est parce que vous avez 1 cellule dans la première rangée et 3 cellules dans la deuxième rangée. Utilisez l'attribut colspan. Vous trouverez un tutoriel pour cela ici: http://www.htmlcodetutorial.com/tables/index_famsupp_30.html

Source

2010-03-21 15:58:21 Kovu

N'utilisez pas de tables, utilisez une bonne combinaison de balises div et d'attributs de position. Ils sont bien meilleurs que les tables et plus modifiables si vous devez apporter des modifications.

Source

2010-03-21 16:09:07 lbedogni

Eek, supprimez les tables. Utilisez un UL à la place, avec affichage: en ligne dans le CSS. Puis ajustez-le à votre goût (marge, padding). Mettez cela à l'intérieur d'un div, et placez-le dans votre page.

Source

2010-03-21 16:11:41 Kevin

Comme d'autres l'ont recommandé, les tableaux ne sont pas l'élément le plus approprié pour la mise en page de votre site. Toutefois, le correctif simple est le suivant:

<td id="tdBanner" colspan="7">

Ceci fera en sorte que votre bannière couvre toute la largeur de votre table. D'un côté, les identifiants sur une page doivent être uniques, donc si vous devez donner un identifiant à vos tags td, ils doivent être différents des tags a.

Je voudrais vérifier quelques-uns des tutoriels CSS que d'autres ont liés.

Source

2010-03-21 16:16:28 wsanville

Les commandes ne s'alignent pas correctement

Répondre

Questions connexes