[HTML] Centrer image

[LGFTatayet]

Bonjour,

Problème simple, mais compliqué pour moi,

J'ai créée une page d'accueil à mon site, mais l'image principale de cette page, je n'arrive pas à la centrer pour toutes les résolutions en même temps, c'est-à-dire, actuellement la page est centrée pour du 1024*768, mais pas pour du 1280*1024 et ainsi de suite...

Et le fait de redimensionner l'image, la rend toute pixélisée et moche.

Page d'accueil

J'ai créée cette page avec NVU, que j'ai après un peu trafiquée en créant le CSS intégré.

Que puis-je faire?

Merci d'avance.

[Quarky]

Il est tout à fait normal que ton image ne soit pas centrée sur toutes les résolutions car tu places l'images à partir du coin haut gauche mais surtout avec un pourcentage.

Or ce pourcentage a une valeur différente selon que tu sois en 800*600 ou en 1280*1024 par exemple.

Donc pour être sûr de voir un centrage dans toutes les conditions, je te conseilles de laisser tomber le "position : absolute" sur tous les éléments de ta page.

Remplaces par ceci :

#glogo
{
display : block;
text-align : center;
margin : auto;
margin-top : 10%;
}

D'autres part, tu as encore du travail sur le CSS car beaucoup d'instructions de style sont données dans la strcture html ! Et puis j'ai pu voir des déclarations de classe qui ne sont pas utilisées (ex class="mention") ...

Il faut aussi que tu regardes si tu peux éviter de déclarer d'id et classes. Par ex si tu as une div avec un id "test" et un a avec un id ou classe, tu peux éviter cette dernière déclaration en spécifiant dans le css : "#test a".

Reviens plus tard après avoir travaillé un peu !

Bon courage ...

[LGFTatayet]

Merci beaucoup de ta réponse rapide et de tes indicatons, j'ai un peu retravaillé.

Ca devrait être mieux là non?!

[Quarky]

Bon c'est parti :

1- tu n'as pas besoin de <br /> dans ta div d'id glogo car les div sont des éléments de block !

2- tu utilises toujours une position absolue sur les hr et #mention alors que tu peux faire sans !

3- mets plutot ton id #glogo sur le a plutot que la div. Ca permettra d'utiliser dans le css #glogo plutot que "#glogo a" ...

4- déclares le "font-family" sur body plutot que sur #mention

...

[LGFTatayet]

J'ai modifié en suivant tes suggestions.

Là, ça passe bien pour le 1024*768. Mais pas le 1280*1024.

Mais je n'arrive pas à trouver le moyen de faire "coller" automatiquement au bas de page <hr /> et #mention .

Cela viendrait-il du faite que l'image à une taille fixe et donc c'est calculé par rapport à cette taille?

[Quarky]

D'abord le margin-top du hr ne sert à rien apparemment.

En plus tu persiste avec les % puisque tu appliques des margin top et bottom dynamique sur l'image ce qui est inapprorprié !

A ta place, je metterai le margin-top du #mention en pixel !

En fait ton problème c'est que tu travailles systématiquement avec des pourcentages.

Sinon j'ai essayé de corriger le tir mais j'y arrive pas : pas assez motivé sans doute. a mon avis, il faudrait placer en absolue le hr et la div finale. Et placer cela à à peu près 90 % du haut mais bon ... à tester.