Afficher une image sur une image

dark_buitar · 30 Mai 2005

bonjour a tous,

Depuis quelque jours j'ai des problèmes de mises en pages sous firefox.

explication: j'ai une image qui me sert de banniere, je met "normalement" 4 images (qui me servent de bouton) sur cette image et encore une fois "normalement", elles se placent sur l'image

sous IE cela marche tres bien mais sous firefox ... j'ai tout mes boutons qui atterisent sous l'image...

quand j'essaye de modifier mes margin (surtout le margin-top) mes bouton passes sous l'image de fond et devienne inaccessible :unsure:

merci d'avance car la je sèche :boude:

Compte supprimé · 30 Mai 2005

A priori, c'est IE qui plante, donc ton code n'est pas correct, mais sans l'adresse de ton site, il va être difficile de répondre...

Modifié 30 Mai 2005 par jeroen

dark_buitar · 30 Mai 2005

Sous IE ca passe tres bien, mais c'est sous firefox que j'ai des difficultées.

Pour le site en ligne , vu que je n'ai pas encore l'espace pour le mettre cela va etre difficile :/ .

Enfin je peux mettre le code si vous le desirer

Compte supprimé · 30 Mai 2005

Sous IE ca passe tres bien, mais c'est sous firefox que j'ai des difficultées.

Ca ne veut rien dire quand à la validité du code...

Poste le code si y'en a pas des tartines (qu'il n'y ait qu'un copier-coller à faire pour voir le problème)

dark_buitar · 30 Mai 2005

voila le code

je ne met que le code que pour un bouton car sinon cela serait trop volumineux

page principale

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Agencement-Déco Accueil</title>

<script type="text/javascript">
	var navigateur=navigator.appName;
	if (navigateur=="Microsoft Internet Explorer")
  document.write('<style type="text/css" media="screen">@import "../Css/ie.css";</style>');
	else 
  document.write('<style type="text/css" media="screen">@import "../Css/firefox.css";</style>');
</script>
</head>

<body>

	<div id="Content">
  
  <div><img src="../images/ban_agdeco.jpg"></div>
  <div id="accueil"><a href="index.html"><img src="../images/accueil_repos.jpg" border="0" onMouseOver="this.src='../images/accueil_passage.jpg'" onMouseOut="this.src='../images/accueil_repos.jpg'" alt="accueil"></a></div>
  
	</div>
</body>
</html>

feuille css pour ie:

/* CSS Document IE*/

/*creation des marges pour placement des boutons*/
body {
	margin:0px 0px; padding:0px;
	text-align:center;
	}

#Content {
	width:800px;
	margin:0px auto;
	text-align:center;
	}

/*positionement du bouton accueil*/
#accueil {
	margin-top:-222px; 
	margin-left:137px;
	float:left;
	width:72px; 
	height:26px;
	}

feuille css pour firefox

/* CSS Document Firefox*/

/*creation des marges pour placement des boutons*/
body {
	margin:0px 0px; padding:0px;
	text-align:center;
	/*background-image:url(../images/ban_agdeco.jpg);
	background-color:white;
	background-repeat:no-repeat;
	background-position:center top;*/
	}

#Content {
	width:800px;
	margin:0px auto;
	text-align:center;
	}

/*positionement du bouton accueil*/
#accueil {
	position:relative;
	padding-top:0px;
	margin-top:0px;
	margin-left:137px;
	float:left;
	width:72px; 
	height:26px;
	}

Compte supprimé · 30 Mai 2005

Ton code est inexploitable: il manque les images.

Première remarque : pourquoi 2 feuilles de style ?

en plus tu va les chercher avec du gavascript : c'est pas sympa pour les 10% d'internautes qui surfent sans javascript :angry:

dark_buitar · 30 Mai 2005

le javascript ici c'est juste pour mes test :hypocrite:

de plus je ne peux rien mettre en ligne, donc pour les images :unsure: enfin je vais essayer de me debrouiller.

Sinon , les deux feuille de style c'est pour eviter les incompatibilité entre IE et les autre navigateur. pour l'instant j'y suis obliger pour eviter les probleme, masi si vous me proposer une autre astuce pour pouvoir le faire en une feuille de Css je veux bien =) je suis ouvert a toute les propositions, car je souhaite que le site soit compatible avec le plus grand nombre de navigateurs possible.

Compte supprimé · 30 Mai 2005

1/ Tu fais le CSS pour FireFox (navigateur qui respecte les standards)

2/ Tu adapte pour IE.

Avant toute chose, je te conseille de surfer par là :

Mon site valide en XHTML

Résoudre les problèmes d'affichage en CSS

a+

Modifié 30 Mai 2005 par jeroen

dark_buitar · 30 Mai 2005

Je te remercie,

Apres un effeuillage consciencieux du site, j'ai trouvé la solution a mon problème.

j'ai placer les div des boutons dans la div de l'image, comme ceci

<body>

<div id="Content">
    <div><img src="../images/ban_agdeco.jpg">
         <div id="accueil"><a href="index.html"><img src="../images/accueil_repos.jpg" border="0" onMouseOver="this.src='../images/accueil_passage.jpg'" onMouseOut="this.src='../images/accueil_repos.jpg'" alt="accueil"></a></div>
    </div>
</div>
</body>

en esperant que cela pourra aider d'autre personne =)

encore merci

Connexion

Afficher une image sur une image

Sujets conseillés

dark_buitar

Compte supprimé

dark_buitar

Compte supprimé

dark_buitar

Compte supprimé

dark_buitar

Compte supprimé

dark_buitar

Veuillez vous connecter pour commenter

Parcourir

Activité