5568 sujets

Sémantique web et HTML

Balise p encadrée par a (probleme de validation W3C)

Bonjour tout le monde,

Voilà j'ai crée des boutons qui marche très bien.

Mais le w3c ne le valide pas sous pretexte que c'est pas bien des block dans des a.

Afin de positionner le texte dans le bouton j'ai du l'encadrer par un bloc p.
Ainsi à l'aide de padding et margin je place mon texte ou je veux sur le bouton.

Pour que mon rolover marche correctement c'est dans le <a> que j'ai mis l'image background de mon bouton. En :hover mon bouton se deplace et change de background.


 <div class="boutons_navhaut">

		<div class="bouton_effibanqsecurite">
<a href="index.php?page=devenir_client" class="bouton_effibanqsecurite">
		<p>EFFIBANQ EN TOUTE SECURITE</p>
		</a>

</div>



a tout hasard je vous met aussi le css


div.bouton_effibanqsecurite {
display:inline;
margin-left:15px;
float:left;
width:136px;
height:90px;
}

div.bouton_effibanqsecurite p{
text-align:center;
padding-top:70px;
padding-left:8px;
color:#90d106;
font-weight:bold;}
		
.bouton_effibanqsecurite a{
display:block;
width:136px;
height:90px;
background-image:url(images/bouton_effibanqsecurite.jpg);
background-repeat:no-repeat;
text-decoration:none;
}

.bouton_effibanqsecurite a:hover{
margin-top:10px;

}


Galère tout ça. Et je voudrais eviter de faire le bouton entierement en image.
le display block regle des souci seulment visuel ! pour la validation tu ne peux avoir des element type block (p,div...) dans des element type en ligne (a,span...)

tu peux toujours utiliser le span a la place de ton p et t'attribue la proriété display:block a ton span
Modifié par hakkou (16 Jan 2008 - 23:01)
hakkou a écrit :
le display block regle des souci seulment visuel !

Ben non, pas si on a un lien à l'intérieur d'un paragraphe ou autre élément de type bloc, et qu'on passe le lien en display: block.

Exemple:
[b]HTML:[/b]
<h2>Navigation</h2>
<ul id="nav">
	<li><a href="...">Bla bla</a></li>
	<li><a href="...">bla bli</a></li>
	<li><a href="...">Bli blu</a></li>
</ul>

[b]CSS:[/b]
ul#nav li {
	float: left;
	margin-right: 10px;
}
ul#nav li a {
	display: block;
	padding: 10px 12px;
	background: #bbb;
	color: black;
}
ul#nav li a:hover,
ul#nav li a:focus,
ul#nav li a:active {
	background: black;
	color: white;
}

Ce n'est qu'un exemple parmi d'autres. Smiley smile
Modifié par Florent V. (17 Jan 2008 - 02:01)
Salut Florent,
j'arrive pas vraiement a comprendre ce que tu veux faire passer dans ton message Smiley biggol je vooulais dir que le display:block ne permetterais pas d'avoir un code valide
et dans ton cas, le background ne prend pas tout le li mais que le a (enfin il ne s'etend pas sur tout le li)c'est ca que tu voulais dire ?
Modifié par hakkou (17 Jan 2008 - 08:13)
hakkou a écrit :
Smiley biggol je vooulais dir que le display:block ne permetterais pas d'avoir un code valide

C'est vrai. Mais rien n'empêche d'utiliser un a valide en display: block pour dessiner une zone cliquable rectangulaire et si besoin dimensionnable à souhait... c'est à dire faire ce que l'on fait de manière invalide avec un <a><p>...</p></a> ou un <a><div>...</div></a>.

hakkou a écrit :
et dans ton cas, le background ne prend pas tout le li mais que le a (enfin il ne s'etend pas sur tout le li)

Non, dans mon exemple le a a un rendu de type bloc, il accepte donc du padding vertical (y compris dans IE), qui permettra de dessiner un bloc de hauteur équivalente à la hauteur de ligne plus 20px de padding, et de largeur équivalente à la largeur du texte plus 24px de padding. On aurait pu aussi préciser des dimensions fixes, des marges, etc., et tout ça avec notre code HTML valide.
Je voulais juste montrer un exemple typique de l'utilisation valide de display: block sur un élément a. Smiley cligne

(En passant, dans mon exemple le background prend bien toute la surface du li. Je te laisse vérifier ça avec le code.)
Modifié par Florent V. (17 Jan 2008 - 09:31)
Florent V. a écrit :

Non, dans mon exemple le a a un rendu de type bloc, il accepte donc du padding vertical (y compris dans IE)

Pour préciser le propos de Florent, il n'y a pas besoin de passer l'élément en bloc pour accéder à la possibilité de lui fournir des paddings verticaux.
La différence se fait au niveau du positionnement de l'élément, ou plus précisément au niveau du placement du contenu de l'objet:
• si l'élément est traité en tant que block, le padding créera une marge interne à l'élément, laissant le coin supérieur gauche au même endroit mais faisant descendre le contenu
• si l'élément est traité en tant qu'inline, le contenu de l'élément ne bougera pas de sa position initiale, la marge interne sera créée autour de celui-ci sans modifier la ligne de base de l'objet
Florent V. a écrit :

C'est vrai. Mais rien n'empêche d'utiliser un a valide en display: block pour dessiner une zone cliquable rectangulaire et si besoin dimensionnable à souhait... c'est à dire faire ce que l'on fait de manière invalide avec un <a><p>...</p></a> ou un <a><div>...</div></a>.

j'ai jamais dis le contraire Smiley smile ma remarque etait par rapport a son code, ou il mettait le p dans a (donc invalide) et il pensait que le display block permetterai a sa syntaxe d'etre valide ^^
donc voila je me suis peut etre mal exprimé Smiley biggol
Ps: a moins que toi tu voulait utilisé directement le a en block sans passé par aucun "intermediare" dans ce cas j'ai rien dit Smiley confused
Bonjour,

@Florent et Benjamin : en fait, oui, mais non Smiley cligne Ce que vous écrivez à propos des padding verticaux de boîtes inline traduit en effet bien ce qui se manifeste en général.

Mais ce qui passe réellement et son pourquoi du comment se place à un autre niveau, qui est celui du calcul de hauteur du conteneur (nécessairement bloc, c'est à dire dans cas le plus réduit le conteneur initial). Celui-ci ne prend en compte, ici, que la distance entre le sommet de la plus haute boîte de ligne et la base de la plus basse (attention: boîte de ligne, ce coup-ci, pas en ligne). Du coup, les padding verticaux de la boîte en ligne sont ignorés, étant "au-delà" des limites des boîtes de ligne...

Mais il suffit que ce conteneur ait lui-même un padding suffisant, ou une hauteur explicite, voire d'autres éléments influençant le calcul de sa hauteur, pour que l'application des paddings verticaux de l'élément en ligne devienne visible.
Modifié par Laurent Denis (17 Jan 2008 - 10:57)
Benjamin D.C. a écrit :
• si l'élément est traité en tant qu'inline, le contenu de l'élément ne bougera pas de sa position initiale, la marge interne sera créée autour de celui-ci sans modifier la ligne de base de l'objet

Oui. Mais on peut aussi préciser qu'Internet Explorer n'est pas toujours très à l'aise avec les padding verticaux sur les éléments en display: inline. Smiley cligne
Florent V. a écrit :

Oui. Mais on peut aussi préciser qu'Internet Explorer n'est pas toujours très à l'aise avec les padding verticaux sur les éléments en display: inline. Smiley cligne


Hum...

Disons plutôt que CSS n'est pas très à l'aise sur le sujet.

Petit cas d'école:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
div {
background: yellow;
width: 500px;
}
span {
background: red;
padding: 100px 0;
}
em {
background: gray;
padding: 50px 0;
}
</style>
</head>

<body>
<div><span>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet.</span><em>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</em><strong>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</strong></div>
</body>
</html>


Smiley ravi
Ben je ne vois pas en quoi ça serait CSS qui serait mal à l'aise sur le sujet. À partir du moment où on sait que le padding vertical des éléments en display: inline est ignoré dans le calcul de la hauteur de la boite de ligne, ce comportement est prévisible.

Prévisible... sauf dans IE, ou les parties des éléments en-ligne qui dépassent de l'élément parent de type bloc sont cachées ou rognées.
(Je passe sur les différences de rendu avec ou sans HasLayout.)

Mais tu voulais sans doute parler d'une limitation de CSS? Il manque, pour ce genre de cas d'école (à voir pour les cas concrets...), un mode de rendu à mi-chemin de "inline" et "inline-block".
Bonjour, ben en fait tout un debat c'est lancé sur mon problème. Smiley cligne Merci pour ça.

En fait, je faisait comme ça <a> <p>blablabla</p> <a>
car le texte blabla et facilement positionnable a l'interieur d'une blaise p grace aux paddings.

Je pensais qu'en faisant comme ça : <a> blablabla <a>
Je ne pouvait pas positionner le texte comme je veux. En effet j'ai bien souvent rencontrer le probleme de paddings qui font grandir ma boite au lieu de fonctionner correctement.

Cependant le <a> etant de type block, il semble bien que je peux directement utiliser les paddings sans que mon block a ne grandisse.
Ainsi mon texte se positionne comme je veux. Pas besoin d'entourer de balise <p>.

Dès lors pas de balise <p> dans le <a> : le code est donc valide w3c
Bon en fait je viens de rencontrer encore une fois ce cas particulier.
Et finalement j'avais tord dans mon post precedent:

Quand on fait 
<a>blablabla</a>

Quand le <a> est de type block, et qu'on a mis une image de fond a ce block <a> :
Et ben quand on met un padding pour positionner le blablabla dans le <a> ça grandit le block.

Donc, c'etait assez logique d'inserer le blablabla dans un <p> comme ça :
<a><p>blablabla</></a>

Du coup quand on met un padding sur le <p> ça positionnne le texte nickel sans agrandir le block <a>.
Malheureusement le w3c ne valide pas un élément block comme <p> dans un <a>


Bon j'ai pas tout bien lu les reponses a ce sujet je vais l'eplucher vraiment en profondeur, pourvor si vous avez trouver la solution
Je voulais preciser que ce n'est que sur IE que les blocks <a> grandissent quand on leur applique un padding
J'ai bien lu vos posts.

Mais le probleme d'origine c'est que quand on met un padding sur un <a> en display:block
Le <a> grandit au delà de la taille qui lui et fixée

FLRENT : dans l'exemple que tu donnais au debut, le blck <a> grandirais au dela de sa taille normale (sur IE bien sur pas firefox).


HTML:

<h2>Navigation</h2>

<ul id="nav">

	<li><a href="...">Bla bla</a></li>

	<li><a href="...">bla bli</a></li>

	<li><a href="...">Bli blu</a></li>

</ul>



CSS:

ul#nav li {

	float: left;

	margin-right: 10px;

}

ul#nav li a {

	display: block;

	padding: 10px 12px;

	background: #bbb;

	color: black;

}

ul#nav li a:hover,

ul#nav li a:focus,

ul#nav li a:active {

	background: black;

	color: white;

}
Sujet clos
Aller à