18041 sujets

Questions générales et questions de débutants

Lien en html

Bonjour,

Ayant un petit souci avec mon lien sous IE. Je souhaiterais savoir si ce code est valide ou pas:
 <div class="unity">
     <a href="page5.html" target="_top">
     <table width="400" height="107" border="0">
  <tr><td class="textebold"><p align="center">Renvoi du numéro principal de l'agence</p>
      <p align="center"><span class="textebleu">Gérer l'ouverture et la fermeture <br />
de l'agence</span><br />
          </p></td></tr>
  </table></a></div>


.unity a {
background: url("images/index/image_btn6.jpg") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    height: 110px;
    line-height: 14px;
    margin: 30px 0 0 20px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    width: 358px;
}

.unity a:hover {
background:url(images/index/relloverbtn/btnrellover6.jpg) no-repeat;
}


Mon problème se situe principalement sous IE. Lorsque j'essaye de cliquer sur ce lien, il ne m'affiche pas ma page. Alors que pour Mozilla, chrome ... pas de soucis...
J'ai également remarqué que sous IE lorsque j'essaye de cliquer juste au bord du cadre de mon image, donc c'est a dire en dehors de mon tableau mais encore dans mon image, la il me le prend en compte et j'accède à ma page.
Comment puis je faire en sorte que mon lien fonctionne?

S'il vous plait j'ai besoin d'aide...

Merci beaucoup.
Bonjour,

Valide par rapport à quel doctype?

En xhtml, il ne l'est pas en tout cas, car tu places un élément block ("<table>") dans un élément inline ("<a>").

Cordialement
Modifié par lddsoft (15 Mar 2011 - 12:24)
voici mon doctype : 
<!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" />
D'accord je viens de voir ton post.

Ca me laisse un peu sans voix, car je travaille comme ca depuis un petit moment et je pensais faire mes pages en html...

Je fais mes projets à l'aide de dreamweaver CS3, et cela fait quelques temps que j'ai decidé d'arreter un maximum de passer par dreamweaver et du coup de taper mon code moi même, pour avoir un code plus propre...

Dois je changer mon doctype en 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/html1/DTD/html1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/html">


???

Qu'est ce qui serait le mieux de faire, car je ne connais pas vraiment le xhtml...

Merci pour ton aide.
Aie, ça se complique alors. L'idéal, à mon sens, serait d'utiliser javascript, mais j'ignore si tu as des notions.
Non je n'ai pas vraiment de notions en javascript...

Donc si je comprends bien, mon problème sous IE vient du fait que j'ai un doctype en XHTML? Et sous IE ca crée des conflits?
Je n'ai pas testé sous un autre doctype, mais cela m'étonnerait que ce soit valide et que IE fonctionne. Parfois IE est plus "teigneux" que d'autres navigateurs.
Non, vraiment, il faut imaginer une autre solution, à mon avis.
Oulà...

Pour recadrer les choses :

* Un doctype ne se change pas de XHTML en HTML en supprimant les "X"s. Il est préférable, pour éviter les erreurs de copier / coller un doctype depuis une source fiable.

* Les problèmes de compatibilité avec IE, ne peuvent en aucun cas être dûs au fait qu'un doctype XHTML a été choisi plutôt qu'un doctype HTML. En général c'est plutôt un doctype érroné qui pose problème.

* XHTML et HTML, à partir du moment ou le document est en text/html (ce qui est le cas de ton document), même combat ; à part les fermeture de balises uniques, c'est le même langage.

* En HTML et XHTML inférieurs à la version 5 (celle qui est en cours d'éléboration) un élément a ne peux jamais contenir un élément de type bloc. Ton code est donc invalide et l'a donc toujours été. En HTML5 cela change, mais je ne te recommande pas de passer à cette version (HTML 4.01 strict, c'est très bien, vraiment).

* Dans ton cas, le mieux à faire est d'attribuer un lien à tous les éléments de texte différents se trouvant dans le tableau et de leur définir un rendu de type bloc pour qu'il prennent tout l'espace possible. Ca va te demander pas mal d'adaptations, mais ton code sera propre.
Bon ca me rassure déjà un peu, il y à quand même une solution...

Par contre je ne comprends pas vraiment ce que tu veux dire quand tu dis d'attribuer un lien... car j'ai déjà un lien sur ces textes... <a href="page5.html" target="_top">

Comment puis je leur définir un rendu de type bloc alors que c'est du texte html. Je dois mettre chaque texte dans ma css? et leur donner un "display: block;" ???
Comme dirait Laurie-Anne : "Oulà ...oulà... oulà la..." Smiley smile
Tu devrais peut-être un peu potasser le (x)html et le CSS, non ?
En gros : 
<div class="unity">
<table width="400" height="107" border="0">
<tr>
<td class="textebold">
<p>
<a href="page5.html">Renvoi du numéro principal de l'agence</a>
</p>
<p class="textebleu">
<a href="page5.html">Gérer l'ouverture et la fermeture de l'agence</a>
</p>
</td>
</tr>
</table>
</div>



.textebold p{
text-align:center;
}

p.textebleu{
color:blue;
}


Devrait tout aussi bien fonctionner.

Bien sûr, le mieux serait d'également supprimer les tableaux qui n'ont vraiment pas l'air justifiés ici.
Modifié par Laurie-Anne (16 Mar 2011 - 08:20)
Aie ca ne marche pas...!
Avec ce code il y a 2 images qui apparaissent les une en dessous des autres, en plus complètement décaler de mon contener...

Bon je viens d'essayer d'enlever mon tableau, et ... en effet c'est bien ca qui bloque sur IE.
Par contre je n'arrive pas à centrer mon texte par rapport à l'image. J'aimerais que mon texte soit à la position du cadre rouge
Voir l'image si joint : upload/31233-Sans-titre.jpg

J'ai bien essayé avec mes css : vertical-align:middle ou tout autres codes, mais ca ne m'arrange pas de passer par la css car toutes mes autres pages utilisent les .textebleu et je ne veux pas qu'elle soit centrer ou autres...
voici mes css : 
.textebold {color: #0f288f;
	font-weight: bold;
	font-size: 12px;}
	
.textebleu {color: #3fa3df;
	font-weight: bold;
	font-size: 12px;}

.unity a {
background: url("images/index/image_btn6.jpg") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    height: 110px;
    line-height: 14px;
    margin: 30px 0 0 20px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    width: 358px;
}

.unity a:hover {
background:url(images/index/relloverbtn/btnrellover6.jpg) no-repeat;
}


et maintenant mon code html : 
  	     <div class="unity">
     <a href="page5.html">   
<span class="textebold">Renvoi du numéro principal de l'agence </span>
<span class="textebleu"><br />
Gérer l'ouverture et la fermeture <br />
de l'agence</span><br />
  </a></div>


Merci beaucoup pour votre aide... ca fait plusieurs jours que je suis dessus, et je suis déjà très contente de voir qu'il y à une solution... Smiley ravi
Modifié par etouicmoi (16 Mar 2011 - 11:04)
Ceci devrait fonctionner :


.unity a {
	background: url("images/index/image_btn6.jpg") no-repeat scroll 0 0 transparent;     
	display: block;     
	width: 258px;     /* au lieu de 358px */
	height: 75px;     /* au lieu de 110px */
	padding-left:100px;
   padding-top:35px;
	text-decoration: none;     
}


Tu adaptes les padding-top et -left en fonction, puis tu adaptes bien sûr les valeurs de width, de height en fonction du padding de façon à obtenir les valeurs 358px et 110px
Modifié par lddsoft (16 Mar 2011 - 13:55)
Merci beaucoup, je viens de résoudre mon problème.
J'ai enlevé mes table et après j'ai joué avec mes css!
Tout fonctionne sous IE.
Sujet clos
Aller à