PB cadrage image de fond d'entête
zatox
Messages postés
640
Date d'inscription
Statut
Membre
Dernière intervention
-
zatox Messages postés 640 Date d'inscription Statut Membre Dernière intervention -
zatox Messages postés 640 Date d'inscription Statut Membre Dernière intervention -
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.
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:
- PB cadrage image de fond d'entête
- Image iso - Guide
- Cadrage instagram - Guide
- Enlever le fond d'une image - Guide
- Comment mettre une vidéo en fond d'écran - Guide
- Fond de page word - Guide
3 réponses
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.
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.
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:
Ce code CSS marche aussi bien sous IE et Firefox.
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.
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.
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.
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.