Recentrage et ajout de lien sur image en html
jean-meyer
Messages postés
9
Statut
Membre
-
jean-meyer Messages postés 9 Statut Membre -
jean-meyer Messages postés 9 Statut Membre -
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 !):
Merci d'avance !
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 !
A voir également:
- Recentrage et ajout de lien sur image en html
- Lien url - Guide
- Créer un lien pour partager des photos - Guide
- Verificateur de lien - Guide
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
- Ajout snap sans rien d'écrit - Forum Snapchat
2 réponses
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 :
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 :
et de plutôt adopter un simple
assorti d'un beau CSS dans le <head> :
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 :
ou, à tout le moins :
Si personne ne te répond, je tenterai de revenir quand j'aurai plus de temps. Bonne chance à toi !!!
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 !!!
