Inconsistent #include look css

Question

Pour une raison quelconque, j'ai un problème avec ces deux pages sur mon site Web qui devraient avoir certains éléments se ressemblent, mais pour une raison quelconque, ils semblent un peu différents.

J'ai quelques fichiers ASP inclus qui sont liés aux mêmes fichiers CSS, c'est pourquoi je pense qu'ils devraient être les mêmes. L'espacement regarde sur la page about.asp cependant. La page index.asp semble très bien, cependant.

Voici les deux pages:

http://www.marioplanet.com/index.asp
http://www.marioplanet.com/about.asp

Toutes les idées pour lesquelles ceux-ci sont un peu timbré?

Answer 1

En regardant ces pages avec les devtools de Chrome (ou Firebug dans Firefox) montrera que la SlideShow.css dans index.asp a un style * en elle (qui est, tous les éléments) pour définir padding à 0, ce qui rend le remplissage et la marge de votre corps (et tout le reste) zéro.

Ceci est une très mauvaise pratique de la part de quiconque a fait SlideShow.css, et c'est ce qui détraque le plus votre mise en page. Un css include qui est destiné à être utilisé de façon modulaire (comme avec un diaporama) ne devrait jamais utiliser un bloc de style *, car cela affecte tous les éléments de la page. Il devrait avoir tous ses blocs de style préfixés avec une classe pour limiter ses effets au module de diaporama. En regardant votre SlideShow.css, il semble que vous ayez peut-être collé quelque CSS d'ailleurs, où il a peut-être été introduit. Vous ne devez également pas inclure les balises <style> dans les fichiers CSS externes.

Si vous supprimez l'inclusion SlideShow.css, vos pages devraient être beaucoup plus similaires. À partir de là, vous pouvez modifier SlideShow.css pour supprimer le style * et ajouter l'inclusion, en veillant à ne pas tout visser à nouveau, tout en laissant votre diaporama faire son travail, ou tout simplement en trouvant un module de diaporama différent.

Answer 2

Il y a un espacement supplémentaire sur la page au sujet, car l'espacement se retire par un style SlideShow.css sur la page d'index:

* { 
    margin:0; 
    padding:0; 
} 

Les regards ci-dessus comme une mise en œuvre simpliste d'un style reset.css.