Rechercher : dans
Par :

[CSS] Placer image en haut d'une page

Dernière réponse le 17 avr 2008 à 20:33:33 Antoine, le 17 avr 2008 à 18:52:24 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « [CSS] Placer image en haut d'une page » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Changer l'aspect du curseur en CSS VoirLa propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web. Le client affichera automatiquement le curseur de son ordinateur qui correspond au type de curseur que vous aurez choisi. Exemples Liste des attributs...
Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...

1

Dora The Explorer, le 17 avr 2008 à 19:10:59
  • +1

Salut !

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 ;)) "Vous avez beaucoup d'avenir derrière vous..."
Comment qu'ça marche là dis-donc.

Répondre à Dora The Explorer

2

Dalida, le 17 avr 2008 à 19:13:39

Salut,

+1

au passage tu peux nettoyer <html> en plus

html, body, div#div_haut
{
margin-top:0;
padding-top:0;
}
[ Mathieu ]
Il y a surement des pandas pour ne dépendre de rien

Répondre à Dalida

3

Antoine, le 17 avr 2008 à 19:33:18

:)

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

Répondre à Antoine

4

Dalida, le 17 avr 2008 à 19:36:03

Et hop, un peu de lecture !

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'.
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Répondre à Dalida

5

Dora The Explorer, le 17 avr 2008 à 19:39:54

J'en profite pour remercier Dalida pour la confirmation et l'allègement visuel du code.

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" ;)) "Vous avez beaucoup d'avenir derrière vous..."
Comment qu'ça marche là dis-donc.

Répondre à Dora The Explorer

6

Antoine, le 17 avr 2008 à 19:43:35

Merci pour les infos, je vais utiliser l'ID comme ca.

Bonne soirée à vous deux,

Antoine

Répondre à Antoine

7

Dalida, le 17 avr 2008 à 19:44:47

Oulalaaaaaaaa !!!
tu vas nous le copier cent fois, ça !!!
-:oþ

allez hop, pour toi ce sera la version brute !
et toc !
-;o)
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Répondre à Dalida

8

Dalida, le 17 avr 2008 à 19:46:31

<edit>

petit doublon…
(ô_O)'

</edit> [ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Répondre à Dalida

9

 Dora The Explorer, le 17 avr 2008 à 20:33:33

M'en fous, f'rai pas mes devoirs ;)
Dès que j'essaye de m'y remettre, je passerai sur les liens...

A+ ;)) "Vous avez beaucoup d'avenir derrière vous..."
Comment qu'ça marche là dis-donc.

Répondre à Dora The Explorer
Collection CommentÇaMarche.net