2009-10-11 4 views
0

J'ai une mise en page faite dans photoshop et j'essaye de le découper en tranches et de le mettre dans une disposition de table. J'essaie de faire une mise en page en utilisant une table qui ressemble à ceci: http://imgur.com/eKndd.gifComment définir des largeurs spécifiques pour une disposition de tableau HTML?

mais quand j'ai balisé la table toutes les largeurs des cellules semblent être incorrectes et pas ce que je veux.

Mon balisage est:

<table width="950" border="1"> 
    <tr> 
    <td colspan="2" rowspan="3" width="268" height="251">rotating pic</td> 
    <td colspan="2" width="682" height="150">banner</td> 
    </tr> 
    <tr> 
    <td colspan="2" width= "682" height="48">top nav</td> 
    </tr> 
    <tr> 
    <td width="404" height="54">filler</td> 
    <td rowspan="2" width="278" height="533">right bar</td> 
    </tr> 
    <tr> 
    <td width="191" height="479">left bar</td> 
    <td colspan="2" width="481">content</td> 
    </tr> 
</table> 

Les cellules doivent être d'une largeur et une hauteur spécifiques pour les images, mais au moment du rendu aucune des largeurs sont corrects. Qu'est-ce que je fais mal? S'il vous plaît aider. Merci.

Répondre

3

Vos hauteurs sont trop élevées pour la mise en page que vous attendez, aussi pour votre bannière, top nav et charge à la même hauteur, vous avez fait pour rendre leur hauteur Affecte les mêmes ...

En outre, ne pas être un downer, mais pourrais-je suggérer de ne pas faire des mises en page basées sur la table? Vous devriez envisager d'utiliser CSS.

+4

Sauf s'il y a une bonne raison, je suis d'accord avec le commentaire de mise en page non basé sur la table. CSS est une compétence utile. –

+2

Il n'y a pas de bonnes raisons ici: P –

+1

Peut-être que CSS a une courbe d'apprentissage trop raide, mais il semble que si vous apprenez comment mettre en page des pages Web, apprenez à le faire de la meilleure manière possible. – pavium

0

je vois, il y a deux possibilités

1) Les images que vous ajoutez ne sont pas redimensionnées à la taille que vous voulez adapter.

2) Lorsque vous ajoutez des images à l'aide d'une balise, essayez de définir explicitement la hauteur et la largeur. Essayez-le

Si vous êtes nouveau, essayez la mise en page en utilisant DIV, les tables sont à l'ancienne.

+0

Désolé pour la réponse massivement tardive. Merci, c'était un problème d'image. Lorsque j'ai ajouté les images dans la mise en page a commencé à prendre sa forme appropriée. –

+0

Si cette réponse vous a aidé, alors acceptez-vous de l'accepter comme réponse ou toute autre réponse affichée pour votre question. –

1

La mise en page n'est pas fonction du code HTML. C'est à ça que servent les feuilles de style. Avec cela dit votre code sera complètement inaccessible. Cela signifie que si votre code est pour toute sorte d'entreprise aux États-Unis ou au Royaume-Uni sont ouverts aux poursuites en matière de discrimination. En plus des échecs d'accessibilité, votre code de page sera sérieusement gonflé et gâchera votre bande passante et le temps de votre utilisateur.

Ma suggestion est de ne pas utiliser le HTML pour la mise en page. Pratiquer la séparation du balisage et de la présentation. N'utilisez pas d'attributs ayant un objectif cosmétique, tels que: largeur, hauteur, bordure, cellulepadding, cellspacing, etc.

Faites vos utilisateurs une faveur énorme et n'utilisez pas de balisage pour la présentation.

+0

Merci pour votre réponse rapide. Whaaat ?! Procès? Puis-je en savoir plus? En ce moment j'expérimente avec un CMS et n'ai jamais travaillé avec un avant. Le modèle a utilisé une disposition basée sur la table et a décidé de jouer au ballon jusqu'à ce que je sois plus à l'aise avec la façon dont tout cela fonctionne. Peut-être qu'un changement nécessaire sera bientôt nécessaire. –

+0

Je recommande fortement de toujours utiliser la plus petite quantité de HTML possible pour obtenir le résultat le plus sémantique et le plus accessible possible, quel que soit son aspect. Ce n'est pas la fonction du HTML de ressembler à quoi que ce soit. –

0

Pouvons-nous voir votre code avec les images incluses? Je suggère de prendre les hauteurs et les largeurs, en mettant les images, puis en jouant avec les hauteurs/largeurs pour obtenir le à votre goût. Votre mise en page semble trop compliquée. Pourriez-vous aller avec une disposition de 3 colonnes plus simple et traiter l'en-tête entier comme un élément?

+0

Les images ont fait l'affaire. Il a commencé à prendre sa forme après les avoir ajoutés. Merci pour votre aide. –

Questions connexes