Sujet Précédent Sujet Suivant

Lien HTML

Fermé
Linefx Messages postés 6 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 29 novembre 2014 - 26 nov. 2014 à 18:48
-L0Lock- Messages postés 5998 Date d'inscription dimanche 10 février 2013 Statut Membre Dernière intervention 18 mars 2018 - 29 nov. 2014 à 16:34
Bonjour,

Je me permets de poster ce topic car j'ai un problème avec un de mes liens dans ma page.
En effet je souhaite que lorsque l'on clique sur l'image en question on puisse attérir sur une autre page de mon site web :

Voici le code :

<div < align= "right" < a href="accueil.html"><br><br><br><br><img src="images/user.png" alt="Espace client" </a></div>


Le fichier cible est bien dans le même dossier.
L'image apparait parfaitement mais aucun lien n'est fonctionnel.

Merci d'avance !

Cordialement
A voir également:

2 réponses

Réponse 1 / 2
-L0Lock- Messages postés 5998 Date d'inscription dimanche 10 février 2013 Statut Membre Dernière intervention 18 mars 2018 1 166
26 nov. 2014 à 19:15
Bonjour. Ton code est absolument chaotique...
On ne met pas de balises dans l'ouverture d'une autre balise.
Toute balise ouverte doit être fermée et ce, avant celle qui l'englobe.
On n'alourdis pas la page de balises inutiles.
L'attribut align n'est plus supporté par le HTML5. Tu dois utiliser du CSS pour ça.
On écris son code en indentant les niveaux de balises, en faisant des retours à la ligne, bref.

Il faut changer tout ça.
Commence déjà avec un bon code : 
<div  style="text-align:right">
   <a href="accueil.html"><img src="images/user.png" alt="Espace Client" /></a>
</div>


Je te conseille fortement de lire ces quelques pages :
Règles HTML/CSS pour les débutants
Conventions et normes de codage
Et si tu ne connais vraiment pas bien le HTML5 et CSS3 : Apprenez à créer votre site web avec HTML5 et CSS3
3
Réponse 2 / 2
Linefx Messages postés 6 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 29 novembre 2014
26 nov. 2014 à 20:24
Merci pour ta réponse,
J'ai lu l'article conseillé et modifié mon texte dans mes différentes pages HTML
Cependant le lien ne fonctionne toujours pas.

Cela ne venant pas de la page cible car je ne peux pas cliquer sur l'image en question.

Je te remercie !
0
-L0Lock- Messages postés 5998 Date d'inscription dimanche 10 février 2013 Statut Membre Dernière intervention 18 mars 2018 1 166
26 nov. 2014 à 20:49
Dans ce cas, il faut qu'on voit ton code en entier.
Tu peux utiliser la balise "Code", ou mieux : cliquer sur la petite chèche juste à-côté du bouton et sélectionner le langage dont tu veux afficher du code dans ton message.
0
Linefx Messages postés 6 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 29 novembre 2014
26 nov. 2014 à 22:03 

<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head>
    <meta charset="utf-8">
    <title>XXXXXXXXX</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

    <!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="style.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
    <link rel="stylesheet" href="style.responsive.css" media="all">

<link rel="icon" href="/images/favicon.png" type="image/png">
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <script src="script.responsive.js"></script>


<style>.art-content .art-postcontent-0 .layout-item-0 { color: #D9D9D9; background: #FCFCFC url('images/0fbbb.png') no-repeat scroll; padding: 0px;  }
.art-content .art-postcontent-0 .layout-item-1 { color: #292929; background: #F0F0F0;  }
.art-content .art-postcontent-0 .layout-item-2 { border-right-style:solid;border-right-width:1px;border-right-color:#E5E5E5; color: #262626; background: #F0F0F0 url('images/e6e51.png') scroll; padding-right: 10px;padding-left: 10px;  }
.art-content .art-postcontent-0 .layout-item-3 { border-right-style:solid;border-right-width:1px;border-right-color:#E5E5E5; color: #262626; background: #F0F0F0 url('images/236f9.png') scroll; padding-right: 10px;padding-left: 10px;  }
.art-content .art-postcontent-0 .layout-item-4 { border-right-style:solid;border-right-width:1px;border-right-color:#E5E5E5; color: #262626; background: #F0F0F0 url('images/9dfaa.png') scroll; padding-right: 10px;padding-left: 10px;  }
.art-content .art-postcontent-0 .layout-item-5 { border-right-style:solid;border-right-width:1px;border-right-color:#E5E5E5; color: #262626; background: #F0F0F0 url('images/2054c.png') scroll; padding-right: 10px;padding-left: 10px;  }
.art-content .art-postcontent-0 .layout-item-6 { color: #262626; background: #F0F0F0 url('images/ff719.png') scroll; padding-right: 10px;padding-left: 10px;  }
.art-content .art-postcontent-0 .layout-item-7 { color: #2B2B2B; background: #FFFFFF; padding: 20px;  }
.ie7 .art-post .art-layout-cell {border:none !important; padding:0 !important; }
.ie6 .art-post .art-layout-cell {border:none !important; padding:0 !important; }


</style></head>
<body>
<div id="art-main">
<header class="art-header">

    <div class="art-shapes">
        
            </div>



                <div id="art-flash-area">
                    <div id="art-flash-container">
                    <object width="1060" height="265" id="art-flash-object" data="images/flash.swf" type="application/x-shockwave-flash"  >
                        <param name="quality" value="high">
                    	<param name="scale" value="exactfit">
                    	<param name="wmode" value="transparent">
                    	<param name="flashvars" value="color1=0xFFFFFF&alpha1=.30&framerate1=24&loop=true&wmode=transparent">
                        <param name="swfliveconnect" value="true">
                        <!--[if !IE]>-->
                        <object type="application/x-shockwave-flash" data="images/flash.swf" width="1060" height="265">
                            <param name="quality" value="high">
                    	    <param name="scale" value="exactfit">
                            <param name="wmode" value="transparent">
                                                    	    <param name="flashvars" value="color1=0xFFFFFF&alpha1=.30&framerate1=24&loop=true&wmode=transparent">
                            <param name="swfliveconnect" value="true">
                        <!--<![endif]-->
                          	<div class="art-flash-alt"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"></a></div>
                        <!--[if !IE]>-->
                        </object>
                        <!--<![endif]-->
                    </object>
                    </div>
                    </div>

					
					<gras><div  style="text-align:right"><br><br><br><br>
					<a href="accueil.html"><img src="images/user.png" alt="Espace Client" /></a>
					</div></gras>
					
                    
</header>
<div class="art-sheet clearfix">
<nav class="art-nav">
    <ul class="art-hmenu" style= "width:100%;" ><li><a href="accueil.html" class="active">Accueil</a></li><li><a href="prestations-et-tarifs.html">Prestations et Tarifs</a></li><li><a href="garanties.html" >Garanties</a></li><li><a href="pourquoi-externaliser.html" >Pourquoi Externaliser</a></li><li><a href="devis-en-ligne.html" >Devis en ligne</a></li><li><a href="contact.html" style= "width:58%" >Contact</a></li></ul> 
    </nav>
<div class="art-layout-wrapper">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content"><article class="art-post art-article">
                                
                                                
                <div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-0" style="width: 100%" >
        <br style="line-height: 350px"><div style="position:absolute;top:130px;left:30px;"><h5><span style="font-size: 28px;">XXXXXXXXXXX,</span></h5><h5><span style="font-size: 16px; color: rgb(128, 128, 128);"><span style="font-weight: bold; color: #808080;">les professionnels de la paye !</span> </span></h5><p><a href="prestations-et-tarifs.html" class="art-button">En Savoir plus</a></p></div>
    </div>
    </div>


</article></div>
                    </div>
                </div>
            </div>
    </div>
<footer class="art-footer">
  <div class="art-footer-inner">
<p>XXXXXXX<p></p><p><br></p><p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<p></p><p><br></p><p>XXXXXXXXXXXXXXXXXX</p><br><p><a href="mentions-legales.php"> Mentions Légales </a>
  </div>
</footer>

</div>


</body></html>




Voici une partie de mon code ! J'ai enlevé le code du milieu pour que tu y vois plus claire ...
Merci encore pour ton aide car je suis vraiment bloqué !!
P.S J'ai mis en gras la partie concernée ...
0
-L0Lock- Messages postés 5998 Date d'inscription dimanche 10 février 2013 Statut Membre Dernière intervention 18 mars 2018 1 166
26 nov. 2014 à 22:50
Je vois. C'est pas la peine d'utilises les balises de CCM à l'intérieur d'une balise "code", elles seront affichées en texte comme le reste (c'est le principe d'une balise code).

En parlant de ton code : il est bourré d'erreurs.
Il y a un nombre affolant de balises mal fermées, d'indentations insensées, .. Enfin, as-tu vérifié l'intégralité de ton code?
Je vois par exemple à la fin: une dizaine de balises <div attribut="valuer"> qui ne contiennent rien et qui ne sont jamais fermées par un </div>. Par ailleurs, est-ce que ces div sont utiles? Je n'ai pas cette impression...

Et l'indentation... Il faut indenter! Et correctement! Il en va de la lisibilité du code. Si toi, tu ne peux pas lire ton code, comment veux-tu le comprendre et travailler dessus?
Rien qu'en indentant correctement, les oublis de fermetures de balises se voient tout de suite.

La balise de retour à la ligne s'écrit <br />.
La balise paragraphe s'ouvre <p> et se ferme </p>. Si tu ne met pas de texte dedans, ça ne sert à rien d'en mettre (donc les paragraphes contenant un br, on oublie, écris directement le br).
Conventionnellement, lorsqu'on ferme une balise <p>, on retourne à la ligne (en gardant l'indentation). Pareil avec une balise <br /> si elle n'est pas contenue dans un texte (après, c'est toi qui voit, mais c'est plus lisible et tu comprends mieux ce que donnera le code une fois interprété).
Aussi, la balise <br /> sert uniquement à faire un retour à la ligne. Elle n'a pas à contenir d'attributs de style.

Les balises titre (<h1>, <h2>, ... , <h6> sont disponibles de 1 à 6. Normalement, on ne saute pas les niveaux. Donc on ne devrais pas voir un <h5> au milieu d'un code qui n'a pas utilisé les 4 premiers niveaux auparavant.

Enfin bref, j'ai l'impression que tu a un peu trop vite lu mes liens (les deux premiers surtout). Pourtant, la plupart des erreurs que je viens de te relever y sont prévenues. Les autres sont détectées si tu fais valider ton code par W3C (chose demandée dans mon deuxième lien).

Voilà le code corrigé comme j'ai pu. 
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>XXXXXXXXX</title>
	<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
	<!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<link rel="stylesheet" href="style.css" media="screen">
	<!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
	<link rel="stylesheet" href="style.responsive.css" media="all">
	<link rel="icon" href="/images/favicon.png" type="image/png">
	
	<script src="jquery.js"></script>
	<script src="script.js"></script>
	<script src="script.responsive.js"></script>
	
	<style>
		.art-content .art-postcontent-0 .layout-item-0 { color: #D9D9D9; background: #FCFCFC url('images/0fbbb.png') no-repeat scroll; padding: 0px;  }
		.art-content .art-postcontent-0 .layout-item-1 { color: #292929; background: #F0F0F0;  }
		.art-content .art-postcontent-0 .layout-item-2 { border-right-style:solid;border-right-width:1px;border-right-color:#E5E5E5; color: #262626; background: #F0F0F0 url('images/e6e51.png') scroll; padding-right: 10px;padding-left: 10px;  }
		.art-content .art-postcontent-0 .layout-item-3 { border-right-style:solid;border-right-width:1px;border-right-color:#E5E5E5; color: #262626; background: #F0F0F0 url('images/236f9.png') scroll; padding-right: 10px;padding-left: 10px;  }
		.art-content .art-postcontent-0 .layout-item-4 { border-right-style:solid;border-right-width:1px;border-right-color:#E5E5E5; color: #262626; background: #F0F0F0 url('images/9dfaa.png') scroll; padding-right: 10px;padding-left: 10px;  }
		.art-content .art-postcontent-0 .layout-item-5 { border-right-style:solid;border-right-width:1px;border-right-color:#E5E5E5; color: #262626; background: #F0F0F0 url('images/2054c.png') scroll; padding-right: 10px;padding-left: 10px;  }
		.art-content .art-postcontent-0 .layout-item-6 { color: #262626; background: #F0F0F0 url('images/ff719.png') scroll; padding-right: 10px;padding-left: 10px;  }
		.art-content .art-postcontent-0 .layout-item-7 { color: #2B2B2B; background: #FFFFFF; padding: 20px;  }
		.ie7 .art-post .art-layout-cell {border:none !important; padding:0 !important; }
		.ie6 .art-post .art-layout-cell {border:none !important; padding:0 !important; }
	</style>
</head>
<body>
	<div id="art-main">
		<header class="art-header">
			<div class="art-shapes">
				<p>Pourquoi il n'y a rien là?</p>
			</div>
			<div id="art-flash-area">
				<div id="art-flash-container">
					<object width="1060" height="265" id="art-flash-object" data="images/flash.swf" type="application/x-shockwave-flash"  >
						<param name="quality" value="high">
						<param name="scale" value="exactfit">
						<param name="wmode" value="transparent">
						<param name="flashvars" value="color1=0xFFFFFF&alpha1=.30&framerate1=24&loop=true&wmode=transparent">
						<param name="swfliveconnect" value="true">
						<!--[if !IE]>-->
						<object type="application/x-shockwave-flash" data="images/flash.swf" width="1060" height="265">
							<param name="quality" value="high">
							<param name="scale" value="exactfit">
							<param name="wmode" value="transparent">
							<param name="flashvars" value="color1=0xFFFFFF&alpha1=.30&framerate1=24&loop=true&wmode=transparent">
							<param name="swfliveconnect" value="true">
							<!--<![endif]-->
							<div class="art-flash-alt"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"></a></div>
						</object>
					</object>
				</div>
			</div>
			<div  style="text-align:right"><br><br><br><br>
				<a href="accueil.html"><img src="images/user.png" alt="Espace Client" /></a>
			</div>	
		</header>
		<div class="art-sheet clearfix">
			<nav class="art-nav">
				<ul class="art-hmenu" style= "width:100%;" >
					<li><a href="accueil.html" class="active">Accueil</a></li>
					<li><a href="prestations-et-tarifs.html">Prestations et Tarifs</a></li>
					<li><a href="garanties.html" >Garanties</a></li>
					<li><a href="pourquoi-externaliser.html" >Pourquoi Externaliser</a></li>
					<li><a href="devis-en-ligne.html" >Devis en ligne</a></li>
					<li><a href="contact.html" style= "width:58%" >Contact</a></li>
				</ul> 
			</nav>
		</div>
		<div class="art-layout-wrapper">
			<div class="art-content-layout"></div>
			<div class="art-content-layout-row"></div>
			<div class="art-layout-cell art-content"></div>
			<article class="art-post art-article">
				<div class="art-postcontent art-postcontent-0 clearfix"></div>
				<div class="art-content-layout"></div>
				<div class="art-content-layout-row">
					<div class="art-layout-cell layout-item-0" style="width: 100%" >
						<div style="position:absolute;top:130px;left:30px;"><h5><span style="font-size: 28px;">XXXXXXXXXXX,</span></h5><h5><span style="font-size: 16px; color: rgb(128, 128, 128);"><span style="font-weight: bold; color: #808080;">les professionnels de la paye !</span> </span></h5><p><a href="prestations-et-tarifs.html" class="art-button">En Savoir plus</a></p></div>
					</div>
				</div>
			</article>
			<footer class="art-footer">
				<div class="art-footer-inner">
					<p>XXXXXXX</p><br />
					<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
					<br />
					<p>XXXXXXXXXXXXXXXXXX</p>
					<br />
					<p><a href="mentions-legales.php"> Mentions Légales </a></p>
				</div>
			</footer>
		</div>
	</div>
</body>
</html>


Ce n'est qu'une correction du morceau de code que tu m'a donné. Tel qu'il est, le lien fonctionne (du moins, il me montre bien qu'il ne trouve pas la page du lien, ce qui est normal vu que je ne l'ai pas).

Question : c'est toi qui écris le code ou c'est un logiciel qui le fait pour toi? Ou alors c'est une accumulation de copié-collé, parce-qu'il y a tellement d'erreurs et de portions insensées que je ne vois que ça.
0
Linefx Messages postés 6 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 29 novembre 2014
28 nov. 2014 à 11:35
Merci pour ta réponse !
La correction ne fonctionnant toujours pas je me suis aperçu que c'était à cause de l'emplacement du fichier que le lien ne fonctionnait pas ! En effet, même avec l'ancien code, lorsque je le met n'importe où dans ma page cela fonctionne ! Cependant dans l'entête, non.

As-tu une idée du pourquoi du comment ?

J'ai tout essayé, même de désactiver le code flash présent mais rien n'y fait, le lien hypertexte ne s'active pas !

Pour répondre à ta question, j'ai édité la base du code avec un logiciel ( pour avoir le template ) et ensuite j'ai réalisé la suite des modifications à la main !

Merci pour ta patience
0
-L0Lock- Messages postés 5998 Date d'inscription dimanche 10 février 2013 Statut Membre Dernière intervention 18 mars 2018 1 166
Modifié par -L0Lock- le 28/11/2014 à 13:41
Soit ton logiciel produit un très mauvais code, soit tu ne connais pas assez le langage pour le manier à la main.
Quel logiciel utilises-tu?

Et le code corrigé fonctionne chez moi (et même sur le poste de mon école). Donc à moins que ton pc soit sérieusement détraqué, ça ne peut venir que de ton code ou de ton fichier accueil.html.

Déjà, as-tu simplement testé le code corrigé sans le modifier? Tel qu'il est, il fonctionne et je ne vois pas quel problème il pourrait comporter.
Et as-tu corrigé ton fichier accueil.html? Je suppose qu'il est plein d'erreurs aussi.
0

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"
sidojaice -
JIP -

24 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses
ne pas utiliser la souris mais le clavier
isabela -
thomas-richet -

32 réponses
Impossible d'ouvrir des liens via mon Samsung A71
bleuenn29 -
Pierr10 -

4 réponses
comment utiliser un lien MEGA pour télécharger un fichier ?
mister31 -
dugenou -

1 réponse