Recentrage et ajout de lien sur image en html

jean-meyer Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -  
jean-meyer Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je code actuellement une page avec plusieurs images superposés (z-index), et j'aimerais que lorsque l'on clic sur les Trois dernières images (Layer2 à Layer4) ,on soit redirigé sur différents liens et mon second problème, est au niveau d'un un recentrage de page, elle est actuellement adapté a la taille de mon écran via un code px mais j'aimerais que les images sois centrés et qu'elle s'adapte a la taille des différents écrans voici ce que ça donne:

https://saadarto.com/

et le code (a corriger !):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="css/style.css" /> 

<title>Prochainement </title> 

</head> 

<BODY background="body_bg1.gif"><center> 
</BR> 
<div align="text-align:center;"> 
<div id="Layer1" style="position:absolute; left:737px; top:77px; width:136px; height:132px; z-index:1"><img name="xxx" src="bg2.png" width="1000" height="1000" alt=""></div> 
<br><div id="Layer2" style="position:absolute; left:772px; top:465px; width:64px; height:58px; z-index:2"><img name="yyy"<a href="https://saadarto.com/"><img src="http://www.saadarto.com/entrer1.png" border="0" alt="https://saadarto.com/" style="vertical-align:middle;" onmouseover="this.src='http://www.saadarto.com/entrer2.png'" onmouseout="this.src='http://www.saadarto.com/entrer1.png'"></a></div>  
<br><div id="Layer3" style="position:absolute; left:772px; top:780px; width:64px; height:58px; z-index:2"><img name="zzz"<a href="https://saadarto.com/"><img src="https://saadarto.com/" border="0" alt="https://saadarto.com/" style="vertical-align:middle;" onmouseover="this.src='http://www.saadarto.com/fb2.png'" onmouseout="this.src='http://www.saadarto.com/fb1.png'"></a></div> 
<br><div id="Layer4" style="position:absolute; left:772px; top:890px; width:64px; height:58px; z-index:2"><img name="aaa"<a href="https://saadarto.com/"><img src="https://saadarto.com/" border="0" alt="https://saadarto.com/" style="vertical-align:middle;" onmouseover="this.src='http://www.saadarto.com/tweet2.png'" onmouseout="this.src='http://www.saadarto.com/tweet1.png'"></a></div>  

  
<TD COLSPAN=9> 

<body> 
 <div id="contenu-header"> 
<div id="header"> 
             

</body> 
</html>  
 


Merci d'avance !

2 réponses

coeus Messages postés 3021 Date d'inscription   Statut Membre Dernière intervention   119
 
Salut !

Je ne corrigerai pas ton code (je manque un peu de temps dans l'immédiat), mais je peux te donner quelques pistes :

1. Je vois ceci :
<img name="yyy"<a href="https://saadarto.com/"><img src="http://www.saadarto.com/entrer1.png" border="0" alt="https://saadarto.com/" style="vertical-align:middle;" onmouseover="this.src='http://www.saadarto.com/entrer2.png'" onmouseout="this.src='http://www.saadarto.com/entrer1.png'"></a>

Donc, tu commences une balise <img> sans la refermer, et DANS la balise tu insères un <a> et un autre <img> ? J'imagine que c'est une faute d'inattention, mais corrige ça et vérifie si tu n'as pas d'autres problèmes comme ça...

2. Tu fais ton site avec un éditeur WYSIWYG, je me trompe ?
Je te conseille fortement de laisser tomber les :

<div id="Layer2" style="position:absolute; left:772px; top:465px; width:64px; height:58px; z-index:2">

et de plutôt adopter un simple

<div class="whatever">

assorti d'un beau CSS dans le <head> :

#div.whatever {
position:absolute;
left:772px;
top:465px;
width:64px;
height:58px;
z-index:2;
}

Premièrement, ça va être plus standard. Deuxièmement, tu vas beaucoup mieux t'y retrouver. Et troisièmement, ça va plus encourager tout le monde à t'aider si jamais tu as d'autres problèmes ! ;-)


Pour le recentrage de page :
Il va falloir que tu élimines les width:XXXpx; dans tes balises, sur toutes les divisions où la largeur n'est pas connue d'avance. Ta <div> principale devrait avoir une largeur de 100%, ou une assez grande (genre width:1000px;) pour contenir tout ton site mais aussi assez petite pour convenir à à peu près tous les écrans.

Après, pour centrer les objets, tu peux tenter des margin:0 auto; sur l'objet à centrer, et espérer qu'aucun autre attribut de style (genre un float) ne vienne le contredire.

Je te dirais : nettoie déjà ton code. Au lieu de nous donner un gros ramassis comme ça, je t'encourage à nous le présenter :

<div>
	<div>
		<p>Hello</p>
		<ul>
			<li>Un</li>
			<li>Deux</li>
			<li>Trois</li>
		</ul>
	</div>
</div>

ou, à tout le moins :

<div>
<div>
<p>Hello</p>
<ul>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ul>
</div>
</div>


Si personne ne te répond, je tenterai de revenir quand j'aurai plus de temps. Bonne chance à toi !!!
1
jean-meyer Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
Merci pour les réponses et les conseils, je testerai tout ça demain et petite précision, je n'utilise pas d'éditeur WYSIWYG mais j'utilise TextEdit sur iMac ;)
0