2010-09-21 23 views

Répondre

6

Il y a plusieurs choses que vous devez prendre en considération:

  • Ne pas mélanger CSS et HTML sinon il présentation obtiendra très déroutant. Couleurs (pour le texte, l'arrière-plan, les bordures), les tailles, l'alignement, tout ce qui a trait à l'apparence du site appartient au CSS. Essayez d'éviter les tableaux pour les besoins de la mise en page.

  • Ils peuvent sembler plus faciles en tant que débutant, mais c'est une technique obsolète. Dans le CSS, vous devez déplacer la règle :hover avant la règle :visited. Étant donné que les deux règles ont la même spécificité, la première règle (actuellement :visited) avec préférences de préférence et les liens visités ne sera jamais appliquée à la règle de survol.

  • Vous n'avez pas besoin de répéter les styles en CSS pour chaque règle. En raison de l'héritage et de la cascade, de nombreux styles sont automatiquement appliqués aux éléments enfants. Vous devez définir les couleurs d'arrière-plan sur les liens à la place des cellules du tableau, puis vous pouvez modifier la couleur d'arrière-plan du survol comme vous le faites déjà avec la couleur du texte.

  • Les liens display: block auront les liens s'étendant sur toute la largeur de leur bloc conteneur, puisqu'il s'agit du comportement par défaut des éléments de bloc.

Voici un exemple comment la même mise en page avec CSS et HTML « propre » devrait ressembler à:

http://www.jsfiddle.net/QShRF/5/

+0

^Ceci. Je pourrais enlever ma réponse, celui-ci devrait gagner. –

+0

et il a fait .. @ RoToRa: je ne suis pas bon à CSS .. pouvez-vous s'il vous plaît aidez-moi avec cela aussi http://jsfiddle.net/Dk9fD/ – Moon

+0

vous pouvez répondre à cette http://stackoverflow.com/ questions/3762793/html-to-css-menu-style-conversion-requis – Moon

2

Donnez-tag table de menu un identifiant puis:

#menu-table td:hover { background: whatever; } 

Vraiment, cependant, vous ne devriez pas être utiliser des tableaux pour autre chose que des tableaux de données, Ils sont difficiles à maintenir et à briser la sémantique.

+0

ouais, nous allons donner tout td est une classe. Déchets d'octets et surtout de temps quand il faut ajouter/enlever des cellules. Dans ce cas, donnez simplement un ID à la table et utilisez 'table # id> td'. –

+0

Une bien meilleure idée, merci. De plus, le '>' ne devrait pas être utilisé car il implique une descendance directe, ce que le 'td' n'est pas (c'est dans un' tr'). –

+0

Vous avez raison, mon mauvais :) –

0

.menu_links:link { display: block }

rend l'ensemble cellulaire agissent comme un lien (vous aurez besoin d'ajouter un peu de marge/padding bien). Ensuite, vous pouvez simplement ajouter .menu_links:hover { background: #123123 } pour coloriser l'arrière-plan.

Aussi, je peux vous conseiller de définir tous les styles de la table dans une feuille de style. <table bordercolor="red" bgcolor="#ffffff"> est très obsolète et fait de la maintenance sur le site un enfer.