quelqu'un peut-il préciser comment définir la largeur d'un document html. J'ai défini la largeur de mon tag de corps et même fait un div wrapper pour définir la largeur, mais la page est en cours d'exécution de quelques pixels de large? qu'est-ce que je fais mal?html largeur du document
Pour donner suite à ce @pekka dit:
La balise body a une marge par défaut dans tous les navigateurs
Les navigateurs ont différents styles par défaut, ce qui explique probablement la marge ou le remplissage supplémentaire que vous voyez. Pour que votre css se comporte comme prévu, il est généralement conseillé de réinitialiser votre css. En bref, mais en définissant certains styles pour tous les éléments, vous éliminez ces incohérences de navigateur et pouvez ensuite croire que vos styles se répercuteront comme vous le souhaitez. C'est pourquoi la définition de la marge sur les éléments HTML et BODY élimine l'espace supplémentaire mentionné dans la question.
Eric Meyer a de bonnes pensées à ce sujet, et sa réinitialisation est celle que j'ai vu le plus fréquemment utilisé sur le web. Cependant, il convient de noter que l'exemple détaillé ci-dessous ne devrait pas être utilisé sans toutefois. Tweak pour l'adapter aux besoins de votre projet
Ex (Du Réinitialiser Eric Meyer, lien ci-dessous):
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Découvrez ces discussions pour une explication plus détaillée:
http://meyerweb.com/eric/tools/css/reset/
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Pouvez-vous nous donner un exemple concret de réinitialisation CSS? –
La balise body a une marge par défaut dans tous les navigateurs. Peut-être qu'il manque un margin: 0px?
Bien qu'il puisse être correct de faire selon les règles (je ne sais pas si c'est le cas), donner la balise body ne me semble pas juste. Si vous devez limiter votre contenu à une certaine zone, mieux utiliser un conteneur <div> directement sous <body>.
Pensez que vous voulez dire "marge: 0" –
Il est également parfaitement valide pour donner une largeur au corps, et l'ajout d'une div juste pour éviter de définir une largeur sur le corps est bien pire, IMO - bruit inutile dans le balisage –
Vous devez probablement attribuer zéro au rembourrage et la marge du corps & html:
html, body {
margin: 0;
padding: 0;
}
largeur pour ma balise body
Certains navigateurs (tels que de nombreuses versions d'Internet Explorer) ne vous permettent pas de définir une largeur sur l'élément body. Il est généralement préférable d'ajouter un div wrapper et style au lieu
la page est en cours d'exécution quelques pixels de large
Vous ne supprimez pas probablement le remplissage par défaut et/ou de la marge (les différents navigateurs ont différents paramètres par défaut)
compte en largeur, sauf si le navigateur en question est MSIE fonctionnant en mode quirks (ce que vous ne voulez pas en fait -fixer avec le bon doctype). – BalusC
Je pense que c'était le point de David - si la largeur du corps est fixée à 100% mais a un remplissage ou une marge, ils agissent en plus de cette 100% –
Les éléments (tels que le tag body) ont tous des marges et des rembob ny dont sont non zéro. Cela explique probablement les pixels supplémentaires.
html, body {
width: 800px;
margin: 0;
padding: 0;
}
Voici un exemple d'un CSS Reset: le concept est d'éliminer les valeurs par défaut spécifiques au navigateur afin que vous puissiez contrôler l'apparence exacte sur tous les navigateurs. Dans cette réinitialisation incrémentielle, nous éliminons la marge et le remplissage sur les deux éléments qui sont probablement responsables de vos pixels supplémentaires.
Nous avons besoin du code source ou d'une question plus précise. Il y a des chances que ce soit une bordure ou un remplissage sur un élément de ~ 100% de largeur. Lisez sur le "modèle de boîte". En outre, utilisez Firefox et l'extension Firebug ou des outils de développement similaires pour inspecter le problème. – tanerkuc