Css / aligner 2 images d'arrière-plan
coventry
Messages postés
649
Date d'inscription
Statut
Membre
Dernière intervention
-
Gamin -
Gamin -
Bonjour,
Je suis en train d'apprendre l'HTML/CSS.
Je suis arrivé a un problème que je n'arrive pas à résoudre.
Lien vers Screenshot du prolème :
http://img76.exs.cx/my.php?loc=img76ℑ=Erreurcss.jpg
Voici le code de ma page css :
J'essaie de faire que les 2 images en background (balise H1 et H2) se relie correctement, sans espaces entre ni décalages. Si je supprime ou reduit le padding-bottom de la balise H1, l'image BordSup.jpg ne s'affiche pas entièrement.
Merci de votre aide
Imagination is more important than knowledge.
Je suis en train d'apprendre l'HTML/CSS.
Je suis arrivé a un problème que je n'arrive pas à résoudre.
Lien vers Screenshot du prolème :
http://img76.exs.cx/my.php?loc=img76ℑ=Erreurcss.jpg
Voici le code de ma page css :
/* CSS Document */
H1
{
background-image:url(../Images/BordSup.jpg);
max-width:750px; /*Pas pris en charge par IE*/
background-position:top;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:24px;
color:#FF0000;
text-align:center;
background-repeat: no-repeat; /*image ne se répète pas*/
background-color: white;
margin-top:5px;
padding-top:27px;
padding-bottom:40px;
}
H2
{
background-image:url(../Images/Milieu.jpg);
background-repeat:repeat-y;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#3333FF;
text-decoration:underline;
text-align:center;
}
J'essaie de faire que les 2 images en background (balise H1 et H2) se relie correctement, sans espaces entre ni décalages. Si je supprime ou reduit le padding-bottom de la balise H1, l'image BordSup.jpg ne s'affiche pas entièrement.
Merci de votre aide
Imagination is more important than knowledge.
A voir également:
- Css / aligner 2 images d'arrière-plan
- Arrière plan - Guide
- Youtube en arrière plan - Guide
- Supercopier 2 - Télécharger - Gestion de fichiers
- Arriere plan pc - Guide
- Supprimer arrière plan image - Guide
4 réponses
Ton problème vient peut-être de tes marges non ?
Tente de mettre margin-top etc à 0px pour voir ?
Bahan
Close the world.||.txen eht nepO
Tente de mettre margin-top etc à 0px pour voir ?
Bahan
Close the world.||.txen eht nepO
Non ca ne change rien...
Avec Mozilla, je n'ai pas le problème de l'alignement, les 2 images sont bien alignées mais il reste tjs un espace entre les 2...
image --> http://img74.exs.cx/img74/5140/Erreurcss.jpg
Imagination is more important than knowledge.
Avec Mozilla, je n'ai pas le problème de l'alignement, les 2 images sont bien alignées mais il reste tjs un espace entre les 2...
image --> http://img74.exs.cx/img74/5140/Erreurcss.jpg
Imagination is more important than knowledge.
J'ai pu corriger le problème.
Pour l'espacement, j'ai ajouté une "margin-top" negative dans la balise H2.
Pour le decalement, j'ai fait la meme chose avec margin-left. Mais j'ai un autre probleme ^^
Avec Mozilla, il n'y avait pas de decalement avant que je fasse la modification, donc c'etait tout bon. Mais avec IE il y en avait 1. En ajoutant la balise "margin-left", j'ai corrigé le decalement dans IE...mais j'en ai créé un dans mozilla!!!
Comment puis-je aligner les 2 images (qui font toutes 2 800px de largeur) dans IE, sans les desaligner dans Mozilla??? Ou bien pourquoi IE me fait un espacement ou il ne devrait pas y en avoir??
merci
Page CSS modifiée (ecartement dans Mozilla, pas dans IE) :
Imagination is more important than knowledge.
Pour l'espacement, j'ai ajouté une "margin-top" negative dans la balise H2.
Pour le decalement, j'ai fait la meme chose avec margin-left. Mais j'ai un autre probleme ^^
Avec Mozilla, il n'y avait pas de decalement avant que je fasse la modification, donc c'etait tout bon. Mais avec IE il y en avait 1. En ajoutant la balise "margin-left", j'ai corrigé le decalement dans IE...mais j'en ai créé un dans mozilla!!!
Comment puis-je aligner les 2 images (qui font toutes 2 800px de largeur) dans IE, sans les desaligner dans Mozilla??? Ou bien pourquoi IE me fait un espacement ou il ne devrait pas y en avoir??
merci
Page CSS modifiée (ecartement dans Mozilla, pas dans IE) :
H1
{
background-image:url(../Images/BordSup.jpg);
max-width:800px; /*Pas pris en charge par IE*/
background-position:top;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:24px;
color:#FF0000;
text-align:center;
/*height: 60px; */
background-repeat: no-repeat; /*image ne se répète pas*/
background-color: white;
margin-top:5px;
padding-top:27px;
padding-bottom:40px;
}
H2
{
background-image:url(../Images/Milieu.jpg);
background-repeat:repeat-y;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#3333FF;
text-decoration:underline;
text-align:center;
margin-top:-40px;
margin-left:-10px;
}
Imagination is more important than knowledge.