Problème de background-image sur Mozilla
Résolu/Fermé
A voir également:
- Problème de background-image sur Mozilla
- Mozilla thunderbird - Télécharger - Mail
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Image de profil - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
4 réponses
[quote]Cette div contient une autre div (donc elle sont superposées) qui est du texte. [/quote]
Je dirait inclus plus que superposé, pourquoi mettre un deuxiéme div alors que pour du texte le mieux reste une balise texte( <p> par exemple auquel tu donnes l'ID texte définit par tes css).
Je comprends pas trop a quoi servent les padding et margin de #image-fond, si c'est pour positionner l'image de fond utilise background-position:; et si c'est pour positionner le texte margin-top et margin-right devrait suffire dans ta classe #texte.
Pourquoi mettre: visibility: visible; a moins que tu les définnisse comme invisible précédement ils sont visible.
donc je dirait pour les css:
div.image_fond
{
width=558px;
height:300px;
background-image:url(interface/milieu.jpg);
background-repeat:no-repeat;
background-position: top center;
text-align: center;
}
p.texte{
margin:30px;
}
et pour le html ça donne
<div class="image_fond">
<p class="texte">mon blabla</p>
</div>
Le div posséde une image de fond aligné sur le bord haut et centré horizontalement et contient une balise texte <p> centré avec des marges de 30px en haut, droite, bas et gauche. Si tu veut encore te simplifier la vie tu peut n'utiliser que la balise de texte en la mettant en display:block; (pour pouvoir définir la hauteur/largeur même si vide de texte) et en lui transférant toutes les autres propriétés css du div(background....).
p.texte{
display: block;
width=558px;
height:300px;
background-image:url(interface/milieu.jpg);
background-repeat:no-repeat;
background-position: top center;
text-align: center;
margin:30px;
}
Je dirait inclus plus que superposé, pourquoi mettre un deuxiéme div alors que pour du texte le mieux reste une balise texte( <p> par exemple auquel tu donnes l'ID texte définit par tes css).
Je comprends pas trop a quoi servent les padding et margin de #image-fond, si c'est pour positionner l'image de fond utilise background-position:; et si c'est pour positionner le texte margin-top et margin-right devrait suffire dans ta classe #texte.
Pourquoi mettre: visibility: visible; a moins que tu les définnisse comme invisible précédement ils sont visible.
donc je dirait pour les css:
div.image_fond
{
width=558px;
height:300px;
background-image:url(interface/milieu.jpg);
background-repeat:no-repeat;
background-position: top center;
text-align: center;
}
p.texte{
margin:30px;
}
et pour le html ça donne
<div class="image_fond">
<p class="texte">mon blabla</p>
</div>
Le div posséde une image de fond aligné sur le bord haut et centré horizontalement et contient une balise texte <p> centré avec des marges de 30px en haut, droite, bas et gauche. Si tu veut encore te simplifier la vie tu peut n'utiliser que la balise de texte en la mettant en display:block; (pour pouvoir définir la hauteur/largeur même si vide de texte) et en lui transférant toutes les autres propriétés css du div(background....).
p.texte{
display: block;
width=558px;
height:300px;
background-image:url(interface/milieu.jpg);
background-repeat:no-repeat;
background-position: top center;
text-align: center;
margin:30px;
}
bzh56
Messages postés
26
Date d'inscription
vendredi 19 mai 2006
Statut
Membre
Dernière intervention
11 novembre 2007
7
1 nov. 2007 à 20:36
1 nov. 2007 à 20:36
Bonsoir,
Dans le #image_fond, il y a un height: 0px qui provoque ce phénomène...
D'autre part, attention, le cadre prévu pour contenir l'image est plus petit que celui qui doit contenir le texte.
Ensuite, il y a beaucoup de margin et padding à mon goût... en fait, il suffirait de prévoir un/des margin dans le cadre image, et éventuellemen tun/des padding pour le cadre texte.
Tant que j'y suis à regarder ce code ;-) le float: absolute sert à quoi ?
Pour l'attribut visibility, ça ne sert pas à grand chose ici.
Bonne soirée.
Dans le #image_fond, il y a un height: 0px qui provoque ce phénomène...
D'autre part, attention, le cadre prévu pour contenir l'image est plus petit que celui qui doit contenir le texte.
Ensuite, il y a beaucoup de margin et padding à mon goût... en fait, il suffirait de prévoir un/des margin dans le cadre image, et éventuellemen tun/des padding pour le cadre texte.
Tant que j'y suis à regarder ce code ;-) le float: absolute sert à quoi ?
Pour l'attribut visibility, ça ne sert pas à grand chose ici.
Bonne soirée.
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
1 nov. 2007 à 20:43
1 nov. 2007 à 20:43
Bonjour,
Je ne suis pas sûr que le “height: 0px;” aide à la manœuvre (-;
Ni que “float:absolute;” soit répertorié dans les spécifications CSS (-;
Ni même que du float soit simplement indiqué dans l'exemple que tu donnes.
À quoi te sert-il ?
Et puis, quand tu utilises du float, pense à le faire suivre d'un clear.
Le “name="image_fond"” est-il bien utile ?
--
Je ne suis pas sûr que le “height: 0px;” aide à la manœuvre (-;
Ni que “float:absolute;” soit répertorié dans les spécifications CSS (-;
Ni même que du float soit simplement indiqué dans l'exemple que tu donnes.
À quoi te sert-il ?
Et puis, quand tu utilises du float, pense à le faire suivre d'un clear.
Le “name="image_fond"” est-il bien utile ?
--
