css / aligner 2 images d'arrière-plan

Question

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 :

/* 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.

B@|-|@N · Answer

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

coventry · Answer

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.

coventry · Answer

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) :

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.

Gamin · Answer

Salut,
J'ai eu un pb de ce genre.
En fait, il m'a suffit d'ajouter ce bout de code au début de mon CSS :

html { margin: 0px;
padding: 0px;
width: 100%;
overflow: auto;
}

body { margin: 0px;
padding: 0px;
width: 100%;

}
Comme par magie...
A voir si ça marchera pour toi !
A+
Gamin

Css / aligner 2 images d'arrière-plan

4 réponses

Discussions similaires

Newsletters