Comment éliminer les espaces entre les blocs
Résolu
toshiro213
Messages postés
11
Date d'inscription
Statut
Membre
Dernière intervention
-
toshiro213 Messages postés 11 Date d'inscription Statut Membre Dernière intervention -
toshiro213 Messages postés 11 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je debute dans le developpement web avec l'HTML5/CSS3, j'ai un problème avec ce simple code par exemple..
<!DOCTYPE html>
<html>
<head>
<meta chartset="utf-8" />
<link rel="stylesheet" href="style.css" type="css/text"/>
</head>
<body class="body">
<header class="mainHeader">
<img src="img/logo.png" alt="Logo" />
</header>
<footer class="mainFooter">
<p>This website is created by someone, 2013 ©</p>
</footer>
</body>
</html>
Mon problème est que j'ai des espaces entre le Header et le Footer même en appliquant le margin: 0 auto; dans la feuille de style.
Et j'ai remarqué que cet espace n'y est plus en utilisant un bordure pour le header par exemple.
Alors si quelqu'un peut me guider un peu, je serai très reconnaissant.
Merci d'avance.
je debute dans le developpement web avec l'HTML5/CSS3, j'ai un problème avec ce simple code par exemple..
<!DOCTYPE html>
<html>
<head>
<meta chartset="utf-8" />
<link rel="stylesheet" href="style.css" type="css/text"/>
</head>
<body class="body">
<header class="mainHeader">
<img src="img/logo.png" alt="Logo" />
</header>
<footer class="mainFooter">
<p>This website is created by someone, 2013 ©</p>
</footer>
</body>
</html>
Mon problème est que j'ai des espaces entre le Header et le Footer même en appliquant le margin: 0 auto; dans la feuille de style.
Et j'ai remarqué que cet espace n'y est plus en utilisant un bordure pour le header par exemple.
Alors si quelqu'un peut me guider un peu, je serai très reconnaissant.
Merci d'avance.
A voir également:
- Comment éliminer les espaces entre les blocs
- Espaces insécables - Guide
- Comment éliminer les publicités - Guide
- Tapez cette phrase, en respectant bien les espaces et la ponctuation. - Guide
- Code blocs - Télécharger - Langages
- Comment liberer de l'espace sur gmail - Guide
4 réponses
en fait c'est la balise <P> qui a un margin par défaut. Si tu le met à 0 c'est bon.
Par contre ta structure est à revoir. lire le manuel html5 que je ne vais évidemment pas réécrire ici.
de plus c'est inutile de créer un class css pour les éléments de structure. par exemple pour body tu peux écrire (c'est valable pour tous les éléments html):
body{
width: 950px;
margin: 0 auto;
background: green;
}
évidemment pour un style particulier il faut créer une classe
Par contre ta structure est à revoir. lire le manuel html5 que je ne vais évidemment pas réécrire ici.
de plus c'est inutile de créer un class css pour les éléments de structure. par exemple pour body tu peux écrire (c'est valable pour tous les éléments html):
body{
width: 950px;
margin: 0 auto;
background: green;
}
évidemment pour un style particulier il faut créer une classe
toshiro213
Messages postés
11
Date d'inscription
Statut
Membre
Dernière intervention
merci beaucoup, c'est exactement ça !
salut,
voilà par exemple le code css
.body{
width: 950px;
margin: 0 auto;
background: green;
}
.mainHeader {
background: blue;
margin: 0;
}
.mainFooter{
background: red;
margin 0 auto;
}
en ajoutant un simple " border: 1px solid black; " à la class mainFooter y'aura plus d'espace entre les deux blocs !!
si vous avez une solution pour ça, parce que je ne veux pas utiliser les bordure. et s'il y a une explication aussi ça m'aidera beaucoup.
Merci
voilà par exemple le code css
.body{
width: 950px;
margin: 0 auto;
background: green;
}
.mainHeader {
background: blue;
margin: 0;
}
.mainFooter{
background: red;
margin 0 auto;
}
en ajoutant un simple " border: 1px solid black; " à la class mainFooter y'aura plus d'espace entre les deux blocs !!
si vous avez une solution pour ça, parce que je ne veux pas utiliser les bordure. et s'il y a une explication aussi ça m'aidera beaucoup.
Merci