PB cadrage image de fond d'entête

Fermé
zatox Messages postés 640 Date d'inscription samedi 17 février 2007 Statut Membre Dernière intervention 26 juin 2020 - 3 avril 2009 à 15:59
zatox Messages postés 640 Date d'inscription samedi 17 février 2007 Statut Membre Dernière intervention 26 juin 2020 - 23 avril 2009 à 19:35
Bonjour, sur le petit site que suis entrain de faire, j'ai créé une image de fond pour mon entête qui fait 995 pixels de long pour 160 de haut. J'appelle cette image en fond d'écran sur mon entête, sous mozilla pas de problème tout est bon, sur mon ordi sous IE 7 pas de problème non plus, par contre sur un pc portable avec IE 8 l'image n'occupe pas toute la longueur de l'entête, sur la droite il y a un espace (important avant d'arriver au bord de mon entête. Voici le code:

HTML

<div id="en_tete">
<div class="element_en_tete">
<h1> MON TITRE


</h1>


</div>
</div>

CSS

#en_tete
{
width: auto;
height: 160px;
margin: 5px;
background-color: rgb(135,163,171);
border: solid black 5px;
background-image: url(images/img_0005_entete.jpg);
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
}

.element_en_tete
{
width: auto;
height: auto;
border: solid white 5px;
margin-top: 3px;
background-image: url(images/img_0005_entete.jpg);
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
}

.element_en_tete h1
{
padding: 50px;
font-size: 30px; /* Titres de 20 pixels */
color: rgb(255,255,255);
text-align: center;
text-decoration: underline;
}


Sur #entête ainsi que sur .element_en_tete j'ai mis :

background-image: url(images/img_0005_entete.jpg);
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */

Je ne sais si c'est sur l'entête ou sur l'élément entête qu'il faut le mettre, par contre si je ne le met nulle part alors là sur la partie droite il répète le début d'image. Je précise que le code XHTML se trouve dans un fichier qui est appelé par include dans ma page. Je ne sais pas si ça a une influence en tous cas je ne comprends pas très bien que sur mon PC (de bureau) avec IE 7 ça marche et sur un pc portable avec IE 8 ça ne marche pas c'est à dire que comme je dis plus haut, l'image s'arrête puis il y a un grand vide jusqu'au bord.

Merci pour vos réponses, j'ai cherché dans plusieurs forums et mais je n'ai pas trouvé de solution pour le moment.
A voir également:

3 réponses

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
3 avril 2009 à 17:00
Je dirai que sur ce portable la résolution de l'écran est supérieur à la largeur de l'image.
Exemple: Si l'écran du portable est en 1280x800 l'image sera plus petite et donc un "blanc" apparaîtra. Le plus simple est encore de faire une mise en page avec un bannière centré (ainsi que l'ensemble) comme c'est le cas ici ou alors de faire une largeur variable avec pour la bannière un motif qui se répète en fond.
0
zatox Messages postés 640 Date d'inscription samedi 17 février 2007 Statut Membre Dernière intervention 26 juin 2020 65
4 avril 2009 à 13:49
Bonjour et merci pour ta réponse, donc je pense que pour centrer mon image d'entête je dois mettre text-align: center; au niveau du conteneur de mon image, peux-tu me confirmer ?
D'autre part est-ce qu'il existe une solution pour que l'apparence soit la même sur n'importe quel type d'écran ? j'en doute mais peut-être pour essayer d'avoir à peu près la même chose sur n'importe quel type d'écran existe-t-il une façon de coder (notamment le css) qui permette d'atteidre cet objectif ? si tu peux me guider dans cette marche à suivre ? j'ai déjà effectué une chose qui est par exemple de ne pas mettre des tailles de caractères trop grandes, il y a peut-être d'autre choses à faire ?
En tout cas merci beaucoup pour ton aide.
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
4 avril 2009 à 15:32
Y'a peux être moyen de voir ça en javascript mais j'ai pas vraiment de connaissance en la matière et je pourrai donc pas t'aider.
Pour ce qui est de centrer, je te suggère de placer tout ton site dans un div container et de centrer celui-ci dans la page. Tout le reste suivra dedans.
Par exemple:
div#container{
     width:900px;
     position:relative;
     top:10px;
     left:50%;
     margin-left:-450px;
}

Ce code CSS marche aussi bien sous IE et Firefox.
0
zatox Messages postés 640 Date d'inscription samedi 17 février 2007 Statut Membre Dernière intervention 26 juin 2020 65
4 avril 2009 à 19:45
OK, merci our taréponse, je vais essayer avec ce code CSS
0
zatox Messages postés 640 Date d'inscription samedi 17 février 2007 Statut Membre Dernière intervention 26 juin 2020 65
23 avril 2009 à 19:35
Bonjour, j'ai fait ce que tu m'as dit, j'ai mis tout mon site dans un container, ça marche bien, mais j'ai quand même un problème entre mozilla et IE, si tu peux regarder ici:
https://www.sfr.fr/fermeture-des-pages-perso.html

Tu verras que le corps est collé au bas du menu comme l'espace pub avec mozilla mais avec IE l'espace pub est collé au bas du menu mais pas le corps il y a environ 20 px ce qui me décale vers le bas. Je ne suis pas arrivé à faire cadrer tout ça, soit c'est cadré, je veux dire espace pub et corps tout les 2 collés au bas du menu avec mozilla et pas avec IE et vice-versa si je fait coller avec IE ça ne va pas avec mozilla. Aurais-tu une idée ? merci pour ta réponse.
0