Padding/Margin par défaut du browser

Sujet résolu

15 janvier 2013 à 23:59:03

Bonjour,

voilà ça fait un petit bout de temps que j'ai plus programmé en HTML, donc en me mettant à jour avec l'HTML5 en suivant (de nouveau) le tutorial de Mateo j'ai fait quelques expérimentations de codes et voilà que je suis confronté à un problème simple....

J'ai une marge de base sur mon browser et même en mettant

margin:0px;padding:0px;

dans ma balise HTML, il y a toujours une marge non-voulue à gauche et en haut

Pour info je suis sous Ubuntu (dernière version) et je tourne sous Firefox

Merci d'avance, Cox.

ChasingWaterfalls

16 janvier 2013 à 0:08:43

Est-ce que tu peux mettre plus de code, s'il te plaît ?

Coreuh

16 janvier 2013 à 0:15:30

<html>
	<head>
		<title> Music Needs You ! </title>
		<link rel="stylesheet" href="style.css" />
		<!--[if lt IE 9]>
   			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>

		<header class="memberSpace">
			<nav>
				<ul>
					<li>Hot Page</li>
					<li>Trending</li>
					<li>Vote Page</li>
				</ul>
			</nav>
		</header>

		<div class="contentSpace">

		</div>

	</body>
</html>

Ca c'est pour la partie index.html

et voici la partie CSS:

html{
	word-wrap:break-word;
	padding:0px;
	margin:0px;
}

header.memberSpace{
	position:fixed;
	width:100%;
	margin-left:0px;
	padding:5px;
	background-color:#CCCCCC;
	color:#000000;
}

header.memberSpace nav ul{
	text-align:center;
}

header.memberSpace nav ul li{
	display:inline-block;
	width:150px;
}

div.contentSpace{

}

Stp

ChasingWaterfalls

16 janvier 2013 à 0:20:24

Essaye d'ajouter un truc comme ça à ton css

body {
  margin: 0px;
  padding: 0px;
}

Coreuh

16 janvier 2013 à 0:35:29

Ok il m'a semblé avoir essayé (avant de l'attribuer à l'HTML), peut-être faut-il les deux...
En tout cas un grand merci à toi!

jQzz

16 janvier 2013 à 1:07:33

Bonsoir,

petite précision : pour la valeur 0, et uniquement pour cette valeur, tu n'es pas obligé de préciser l'unité.

margin: 0; /* pas besoin de mettre 0px; */

Mon site web Pensez à faire une recherche avant de poster ! Je ne donne pas d'aide par message privé.

Charlene Diome

16 janvier 2013 à 12:08:24

Quand je commence un site web je mets en premier dans mon css

*{
  margin:0;
  padding:0;
}

Comme ça je fixe moi même tous mes margin et padding

Lamecarlate

16 janvier 2013 à 12:25:28

Charlene76 > c'est une mauvaise pratique. Le faire sur body uniquement est pertinent, mais sur tous les éléments de la page, c'est trop : cela plombe les performances du navigateur. Dans l'absolu, l'utilisation de * est dangereuse (il y a des exceptions : l'utilisation de .mon-elt > * pour cibler tous les enfants directs de .mon-elt, ou bien * pour box-sizing, qui demande beaucoup moins de ressources que padding ou margin).

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Charlene Diome

16 janvier 2013 à 14:27:33

Ah j'aurai appris quelque chose en essayant de donner un conseil.

Je prend note Merci beaucoup AkaiKen

fmoutawe

16 janvier 2013 à 14:34:20

@Charlène

Il est préférable d'utiliser un outil comme reset.css ou normalize.css pour partir d'une base seine.

Lamecarlate

16 janvier 2013 à 16:07:31

Ah oui, je vote pour normalize.css, moins bourrin que le reset de Meyer

Pas d'aide concernant le code par MP, le forum est là pour ça :)

fmoutawe

16 janvier 2013 à 16:09:56

AkaiKen a écrit:

Ah oui, je vote pour normalize.css, moins bourrin que le reset de Meyer

Sur ton conseil, il y a 2 mois (si mes souvenirs sont bons), j'ai testé normalize.css et je le trouve beaucoup plus lourd en terme de chargement que le reset de Meyer qui est toutefois très simple et peu datavore.

EmmanuelBeziat

17 janvier 2013 à 4:28:37

La différence étant que le reset (normalize n'en est pas un) oblige les développeurs à redonner des valeurs aux propriétés qu'a viré le reset en question. C'est donc plus simple de modifier directement ces valeurs comme souhaité (comme le fait le normalize).

Mais pour ma part, je n'utilise que rarement ce genre de choses, les navigateurs maintenant ont globalement tous les mêmes marges automatiques et autres paramètres.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

fmoutawe

17 janvier 2013 à 9:19:21

warpShadow a écrit:

La différence étant que le reset (normalize n'en est pas un) oblige les développeurs à redonner des valeurs aux propriétés qu'a viré le reset en question. C'est donc plus simple de modifier directement ces valeurs comme souhaité (comme le fait le normalize).

Mais pour ma part, je n'utilise que rarement ce genre de choses, les navigateurs maintenant ont globalement tous les mêmes marges automatiques et autres paramètres.

Ils n'ont pas les mêmes marges automatiquement (Chrome, Safari, et Android Browser avant tout). Certes elles ne sont pas non plus au opposé mais le design est un travail de précision, donc globalement, n'entre pas dans le lexique d'un designer.

EmmanuelBeziat

17 janvier 2013 à 9:24:31

C'est une façon de voir. Je suis de ceux qui disent que le pixel perfect est non seulement impossible, mais aussi tout à fait inutile.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

fmoutawe

17 janvier 2013 à 9:31:29

Je ne sais pas si tu codes en amateur ou professionnellement mais dans le milieu professionnel, le pixel perfect est une obligation. Il faut se rapprocher de quelque chose sans défaut (ou du moins le faire ressentir).
Après chacun à son âme de développeur mais je sais que je suis partisan du travail bien fait qui permet de mettre à la fois en confiance le client, ton équipe et le futur développeur qui travaillera pour remodeler le site.

EmmanuelBeziat

17 janvier 2013 à 9:43:35

Le problème se pose dès la réception de la maquette : Photoshop n'est pas un navigateur, et il ne gère pas les polices de la même façon que ces derniers. Il est impossible d'avoir le même rendu textuel entre la maquette graphique et la page web. Rien que là, le pixel perfect, c'est déjà mort. Ajoutes-y le fait que les navigateurs gèrent différemment le clear type, que Chrome ne lisse pas les polices correctement, et là si tu est à la recherche de la perfection tu peux préparer le traitement contre les crises d'angoisses. Reste à regarder ensuite sous des OS différents, et là c'est le grand saut du viaduc de Millau.

Bien entendu qu'il est normal de chercher le rendu le plus correct possible, mais "bon rendu" ≠ "pixel perfect". Je ne rejette pas le principe (loin de là, ce serait le rêve !), mais je suis conscient de l'impossibilité technique à l'heure actuelle.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

fmoutawe

17 janvier 2013 à 9:51:38

J'en suis aussi conscient mais rien ne t'empêche d'en approcher en choisissant des typographies qui ne sont extravageantes, et d'autres combines.

EmmanuelBeziat

17 janvier 2013 à 9:54:26

Les typo extravagantes, pour ça il faut tapper sur le graphiste. :lol:

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Coreuh

17 janvier 2013 à 12:48:28

Bon ça répond à bien plus qu'à ma demande de base, mais merci pour tous les petits détails, je vais regarder plus en pronfondeur

fmoutawe

17 janvier 2013 à 14:00:38

Il est toujours bon d'en apprendre un peu plus