5568 sujets

Sémantique web et HTML

Div dans un lien = Erreur au validateur

Bonsoir,

J'ai un petit problème pour mettre une div dans un lien.

mon code est comme suit:

<a href="?p=menu/accueil.php"><div class="box">accueil</div></a>


J'ai mis comme ça parceque je voulais que la box soit totalement cliquable, et pas seulement le texte.

Niveau css, ça se passe comme cela:

.box a:link{
	background: #ffa800;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
	padding-left: 3px;

} 
.box:hover{
	background: #858484;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
	
}
.box a:visited{
	background: transparent;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
	padding-left: 3px;
	
}

.box{
	float: left;
	color: #fff;
	font-weight: bold;
	background: #ffa800;
	height: 100px;
	width: 100px;
	border: #fff solid 3px;
	margin-left: 20px;
}


Or, le validateur du w3c me retourne une erreur:

a écrit :
document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.


Mais j'ai du mal à l'interpréter

Alors, j'ai essayer de faire en changeant les attributs de style de <a> pour faire ce que je voulais, mais je n'ai pas du tout réussi.

Est ce que vous pourriez m'aider svp ?

Merci d'avance
Bonsoir,

Il est normal que le validateur t'indique une erreur. La balise <a> est une balise de type "en-ligne", et ne peut par conséquent pas contenir de <div> qui est une balise de type "bloc".
Pour rappel une balise type bloc peut contenir aussi bien des balises en ligne que des balises de type bloc. A l'inverse, une balise en ligne ne peut contenir que des balises en ligne.

Je t'invite à lire ceci :
La structure des balises : bloc et en-ligne qui t'en apprendra un peu plus sur le sujet.
Modifié par Mikachu (12 Nov 2006 - 01:11)
Je viens de lire cette explication (très bien faite, soit dit en passant). Je comprends beaucoup mieu l'erreur commise. Donc, si je ne me trompe pas, il va falloir que je joue sur sur la balise <a> avec des padding pour réussir à faire une boîte fixe en hauteur et largeur et pour que celle-ci soit cliquable. Mais le problème, c'est que le texte doit rester en blanc tout le temps, et le fond de la boîte doit lui changer lors du hover...
Administrateur
n0urs a écrit :
Donc, si je ne me trompe pas, il va falloir que je joue sur sur la balise <a> avec des padding pour réussir à faire une boîte fixe en hauteur et largeur et pour que celle-ci soit cliquable.

Hello,

Tu pourrais aussi, plus simplement faire adopter un comportement bloc à l'élément, à l'aide d'un display : block.
Ainsi tu pourras dimensionner (width, height) l'élément <a>

n0urs a écrit :
Mais le problème, c'est que le texte doit rester en blanc tout le temps, et le fond de la boîte doit lui changer lors du hover...

Je n'ai pas trop compris ce que tu veux obtenir exactement. Un visuel ou une page en ligne seraient parfait pour t'aider.
Je vais essayer avec l'élément display: block;

Sinon, voilà à quoi je voulais que ca ressemble, sans l'erreur:

EDIT par Igor : attention à ne pas afficher d'images géantes qui déforment le forum. Merci d'utiliser le bouton "créer une miniature" lorsque vous chargez une image.
Modifié par Igor (14 Nov 2006 - 21:33)
Administrateur
Pourquoi afficher un "site optimisé pour Firefox" ? Smiley sweatdrop
L'intérêt de faire des document conformes aux standards est justement de pouvoir s'affranchir des "sites optimisé pour...".
Heu... c'étais parcequ'il y avait un alignement qui prenait pas bien sour IE6

Sinon:

J'ai fait la méthode du display, ca fonctionne nikel sous IE 7 / Firefox, mais sous IE6 j'ai d'autre problème qui sont apparu

Je vous montre:

http://pix.nofrag.com/70/70/5c387c96a8899a207004bc4c5d01t.jpg

le d qui apparait, est en fait la derniere lettre de la boite où il ya marqué mmd prod (car en enlevant le d de prod, un o apparaissait), et y a le menu a droit qui est nikel lorsqu'on ne fait pas de hover, mais des qu'on fait un hover sur eec et bdd, ça donne comme sur l'image.

en tout cas merci pour le display, ça aide bien, et je connaissait pas du tout Smiley cligne
n0urs a écrit :
le d qui apparait, est en fait la derniere lettre de la boite où il ya marqué mmd prod (car en enlevant le d de prod, un o apparaissait)
Tiens, ça me rappelle quelque chose... Smiley ravi
Sujet clos
Aller à