Bloc - lien en a href/ problème de certification w3c

Marsh Posté le 11-07-2006 à 22:42:45

Bonsoir

Mon problème est le suivant : j'ai crée un bloc comprenant lui même quatre autres blocs "image".
Je voudrais faire que d'une manière propre, quand on clique sur le bloc principal (donc sur l'une des 4 images) un lien cliquable soit activé.

En gros, voilà ce que j'ai :

<div id="accueil">
<a href:"mailto:[...]">

<div id="accueil1">
</div
<div id="accueil2">
</div
<div id="accueil3">
</div
<div id="accueil4">
</div

</a>
</div>

Mon problème est que ayant mis une balise block dans une inline, la certification w3c ne fonctionne pas.
Alors j'ai essayé :

<div id="lien">
<a href:"mailto:[...]">
</a>
</div>

<div id="accueil">
<div id="accueil1">
</div
<div id="accueil2">
</div
<div id="accueil3">
</div
<div id="accueil4">
</div>
</div>

Et celà en spécifiant pour le bloc "lien" 300x400px, soit l'équivalent des 4 blocs "accueil1", "accueil2", "accueil3" et "accueil4".
Mais ça ne marche pas.

Vous auriez un petit coup de pouce ?
Merci d'avance

Reply

Marsh Posté le 11-07-2006 à 22:42:45

Reply

Marsh Posté le 11-07-2006 à 22:47:37

Sans ton CSS, on ne va pas aller loin

Reply

Marsh Posté le 11-07-2006 à 22:53:54

Ah d'accord, je poste donc mon html, puis mon css dans l'état actuel, qui marchent mais ne sont pas conformes.
Pour la petite explication : il y a visuellement une image de 400x300px composée en réalité de 4 blocs (HD, HG, BG et BD) formés chacun d'une image 199x149px + 1px de bordure

_________________________
HTML

<body>
<div id="accueil">
<a href="mailto:gnagnagna@gna.gna">



<div id="accueil_hg">

</div>

<div id="accueil_hd">

</div>

<div id="accueil_bg">

</div>

<div id="accueil_bd">

</div>

</a>
</div>
</body>

_________________________
CSS

body
{
background-color: rgb(36,0,0);
}

#accueil
{
width: 400px;
height: 300px;
position:absolute;
left: 50%;
top: 50%;
margin-top: -150px; /* moitié de la hauteur de l'image composée de l'apposition des 4 images*/
margin-left: -200px; /* moitié de la largeur de l'image composée de l'apposition des 4 images*/
}

#accueil_hg
{
float: left;
width: 199px;
height: 149px;
background-image: url("accueilHG.png" );
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
padding-right: 1px;
padding-bottom: 1px;
}

#accueil_hd
{
float: right;
width: 199px;
height: 149px;
background-image: url("accueilHD.jpg" );
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
padding-left: 1px;
padding-bottom: 1px;
}

#accueil_bg
{
float: left;
width: 199px;
height: 149px;
background-image: url("accueilBG.jpg" );
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
padding-right: 1px;
padding-top: 1px;
}

#accueil_bd
{
float: right;
width: 199px;
height: 149px;
background-image: url("accueilBD.jpg" );
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
padding-left: 1px;
padding-top: 1px;
}

Message édité par Xocs le 11-07-2006 à 22:59:53

Reply

Marsh Posté le 12-07-2006 à 00:53:55

c est quoi cette manie de mettre les images dans des blocks ?
ca t empeche d ajouter un texte alternatif c est mal
un background reste un background
la tes images DOIVENT etre en premier plan
tu peux mettre un id sur tes images

Reply

Marsh Posté le 12-07-2006 à 01:09:22

Ah oui tiens, c'est vrai qu'un id est pas con
Et d'ailleurs, pour résoudre le système, je pense que le plus simple est de faire une seule image jpeg composée des quatre images, avec un lien, nan ?

Reply

Marsh Posté le 12-07-2006 à 01:24:51

Ah oui mais maintenant, j'ai cet affreux cadre bleu-violet persistant autour de ma photo

Y'a pas moyen de rendre un bloc div défini en width et height entièrement cliquable ?

Reply

Marsh Posté le 12-07-2006 à 01:28:04

oui une seule image ca pourrait etre mieux si ca envoie vers le meme lien
et le cadre c est facile
img {border:none}

(et pour le div cliquable je dirais euh ... ca sert a rien ? :whistle: )

Message édité par mIRROR le 12-07-2006 à 01:28:43

Reply

Marsh Posté le 12-07-2006 à 01:38:31

Bah en fait, je voulais faire de la fine écriture en xhtml/css alors qu'en 5 lignes et un seul fichier Jpg c'est résolu :whistle:

ça m'apprendra tiens, en tout cas merci beaucoup de ton aide

:hello: