Besoin nettoyé par un CSS Pro

Question

Ma barre de navigation haut est un peu brouillon à mon avis, mais je ne sais pas comment le faire autrement. Chaque fois que je recharge la page, elle saute pendant une milliseconde. (montre les puces de style liste) et j'ai même le style de liste: aucun appliqué à l'objet parental comme vous pouvez le voir.

Notez également que les boutons ne sont pas complètement centrés. Pourquoi donc? Certains sont, d'autres non. Ils sont tous des images 16x16. J'ai essayé de le rendre facile pour moi d'ajouter et de changer des boutons juste en ajoutant une classe ou deux. Je veux que les images et le texte soient centrés autant que possible entre les paramètres du bouton.

Je veux que le "#nav_login_welcomeuser" reste là où il est au niveau de la taille, mais tout le reste pour étirer et remplir cette barre de 920px de large.

Est-ce que le flottant: gauche bâclée? Je pense que cela provoque le comportement nerveux lorsque la page commence à se charger.

Voici le code: http://jsfiddle.net/N6SQe/

Answer 1

En voyant les balles de liste pour un son moment comme Flash Of Unstyled Content (FOUC), mais qui est usally un bug dans les navigateurs spécifiques dans des circonstances spécifiques. Vous devez donner plus de détails sur le navigateur dans lequel vous le voyez et vous devez inclure vos feuilles de style dans la vraie page.

(j'ai remarqué plus tard: les balles visibles peuvent être parce que vous ne fourni une valeur pour list-style, mais il est une propriété de coupe courte qui prend deux Utilisez list-style: none none;..)

Certaines choses que vous devriez faire/regarder dehors pour :

• Attribuez toujours des attributs width/height aux images dans le code HTML. Cela empêchera les sauts de mise en page. Ceci est un menu, utilisez des liens (a éléments au lieu de span) et placez les images à l'intérieur, car les utilisateurs s'attendent à pouvoir cliquer sur l'image. Ils veulent même cliquer sur tout le "rectangle", donc mettez les propriétés de remplissage et de taille sur le lien au lieu du li - d'autant plus que vous avez placé l'effet hover sur le li, ce qui conduit l'utilisateur à penser qu'il peut cliquer sur le "rectangle" ", même quand il n'est pas sur le lien. Et :active n'a pas beaucoup de sens sur un li.
• Vous devez faire attention avec les largeurs fixes et les hauteurs en pixels. Gardez à l'esprit que l'utilisateur peut remplacer la taille de la police (tout le monde ne peut pas lire 12 pixels) et si le texte grossit, il s'enroulera et/ou se coupera, ce qui est non seulement laid, mais illisible et inutilisable. Votre conception doit réagir de manière flexible aux différentes tailles de polices.
• Ne pas répéter les propriétés. Par exemple, définissez le style de police une fois dans l'élément de niveau supérieur. Les règles :first/last-child sont inutiles. Ils ont seulement répété des propriétés que les éléments de liste avaient déjà, excepté les frontières qui peuvent être placées sur la liste elle-même à la place.
• Qu'est-ce que margin-left: -10px;?

Voici comment je le ferais: http://jsfiddle.net/uSgDt/4/

---

EDIT: Pour que les éléments se développer, la seule façon est de l'afficher comme une table.Voir http://jsfiddle.net/uSgDt/6/

Ceci n'est cependant pas supporté par IE6. Si vous avez besoin de l'afficher correctement dans IE6, vous devrez utiliser une table HTML.