[CSS] Placer image en haut d'une page
Antoine
-
Dora The Explorer Messages postés 3447 Statut Contributeur -
Dora The Explorer Messages postés 3447 Statut Contributeur -
Bonjour,
Je cherche à placer une image tout en haut d'une page html, mais le problème c'est qu'avec le code que j'ai, elle ne se place qu'à quelques mm du haut, et donc il y a un petit trou que j'aimerais bien voir disparaître.
L'image est incluse par CSS dans le fond d'écran d'un DIV et doit théoriquement servir au design de la page.
Voici le code:
.div-haut {
background-image : url("../images/decoupes/haut.jpg");
width : 798;
height : 145;
margin-top : 0;
}
Le code Html est lui tout simplement <div class="div-haut">Hello</div>
Merci d'avance pour votre aide,
Antoine
Je cherche à placer une image tout en haut d'une page html, mais le problème c'est qu'avec le code que j'ai, elle ne se place qu'à quelques mm du haut, et donc il y a un petit trou que j'aimerais bien voir disparaître.
L'image est incluse par CSS dans le fond d'écran d'un DIV et doit théoriquement servir au design de la page.
Voici le code:
.div-haut {
background-image : url("../images/decoupes/haut.jpg");
width : 798;
height : 145;
margin-top : 0;
}
Le code Html est lui tout simplement <div class="div-haut">Hello</div>
Merci d'avance pour votre aide,
Antoine
A voir également:
- Mettre une image en haut à droite html
- Point vert en haut a droite - Accueil - Protection
- Les textes ne doivent pas être en retrait à droite et à gauche - Guide
- Légender une image - Guide
- Mettre une image en filigrane sur word - Guide
- Image iso - Guide
1 réponse
Salut !
Pour commencer, le code serait pas plus propre avec un:
Et donc un:
Ensuite, tu devrais essayer d'enlever les marges du body:
Après, je débute et ça fait longtemps que j'y ai pas touché, et toujours eu du mal avec les marges, etc. Mais quelqu'un devrait te dire ça mieux... ou te dire tout le contraire ;))
Pour commencer, le code serait pas plus propre avec un:
<div id="div_haut">
Et donc un:
#div_haut{
...
}
Ensuite, tu devrais essayer d'enlever les marges du body:
body{
margin-top:0;
}
#div_haut{
padding-top:0px;
}
Après, je débute et ça fait longtemps que j'y ai pas touché, et toujours eu du mal avec les marges, etc. Mais quelqu'un devrait te dire ça mieux... ou te dire tout le contraire ;))
+1
au passage tu peux nettoyer <html> en plus
html, body, div#div_haut { margin-top:0; padding-top:0; }Merci tous les deux!
Ca marche nickel maintenant, tout est bien comme je voudrais ;)
Cependant, j'aimerais savoir si l'utilisation de l'ID est vraiment plus appropriée que la classe, ou pas?
Sinon, merci beaucoup pour votre aide !!!
Antoine
et je ne sais plus si ils le disent là, mais un 'id' confère un poids de 100 et une classe un poids de 10 pour les priorités de rendu.
donc tu utilises toujours les 'id' sauf quand tu doit l'appliquer à plusieurs éléments, dans ce cas c'est une 'class'.
Disons que la class te permet d'attribuer des propriétés à n'importe quelle balise via le CSS. Mais un div suffit largement dans ton cas. On le nomme avec id et on utilise donc son #id dans le css. Tu peux mettre <p class="introduction"> par exemple, mais le div n'a pas besoin de class. L'id remplace en quelque sorte le class, puisque, grâce à l'id, ce n'est pas tous les divs, mais seulement un qui aura ces propriétés.
Si ça marche, tant mieux, mais je trouve ça de toute façon plus clair juste avec le div, et c'est sûrement pas valide w3c avec le "class".
EDIT: oulah, je ferais bien d'aller me relire ça, moi aussi, je crois ;) "Gériendi" ;))
Bonne soirée à vous deux,
Antoine