Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
717 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1405027
Xocs
Posté le 11-07-2006 à 22:42:45  profilanswer
 

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 :)

mood
Publicité
Posté le 11-07-2006 à 22:42:45  profilanswer
 

n°1405030
AlphaZone
Posté le 11-07-2006 à 22:47:37  profilanswer
 

Sans ton CSS, on ne va pas aller loin

n°1405034
Xocs
Posté le 11-07-2006 à 22:53:54  profilanswer
 

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">  
     
   <!-- Bloc père contenant HautGauche, HautDroite, BasGauche, BasDroite -->
   
  <div id="accueil_hg">
   <!-- Image HG-->
  </div>
 
  <div id="accueil_hd">
   <!-- Image HD -->
  </div>
 
  <div id="accueil_bg">
   <!-- Image BG -->
  </div>
   
  <div id="accueil_bd">
   <!-- Image 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
n°1405109
mIRROR
Chevreuillobolchévik
Posté le 12-07-2006 à 00:53:55  profilanswer
 

c est quoi cette manie de mettre les images dans des blocks ? :o
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

n°1405113
Xocs
Posté le 12-07-2006 à 01:09:22  profilanswer
 

Ah oui tiens, c'est vrai qu'un id est pas con :D
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 ?

n°1405125
Xocs
Posté le 12-07-2006 à 01:24:51  profilanswer
 

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 ?

n°1405127
mIRROR
Chevreuillobolchévik
Posté le 12-07-2006 à 01:28:04  profilanswer
 

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
n°1405132
Xocs
Posté le 12-07-2006 à 01:38:31  profilanswer
 

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:

n°1405135
mIRROR
Chevreuillobolchévik
Posté le 12-07-2006 à 01:40:50  profilanswer
 

ce qui me plait le plus dans les css c est surtout le code plus léger ;)

n°1405138
Xocs
Posté le 12-07-2006 à 01:41:58  profilanswer
 

Ah oui, clairement :)
Et puis propre surtout, exit les tableaux :love:
 
On a vraiment l'impression que tout est organisé, pensé ... c'est un plaisir :)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[rèsolu]probleme machine virtuellepblm de lien sur le script php calendrier
Problème fichiers temporaires[VB.NET et C#.Net] Problème de tableau /click bouton (postback?)
"Exception CSS" sur un lien[Résolu]Problème de CSS avec Firefox
probleme avec jointure sur 3 tablesproblème session register
Zone réactive de lien d'une image : hors de l'imagePb de lien sous masque
Plus de sujets relatifs à : Bloc - lien en a href/ problème de certification w3c


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR