28172 sujets

CSS et mise en forme, CSS3

[Résolu] ça ne se passe pas du tout comme prévu

Pages :
Bonjour à tous
Alors c'est mon premier post et je suis nouveau dans le développement web soyez indulgent ^^.
Alors je dois refaire un site Web wordpress utilisant le thème Avada et je veux faire des gros boutons cliquables en Html. Ces boutons mènerais à d'autres boutons cliquable à nouveaux.
Alors voila mon beau code HTML:
 <div id="blocglobal">
<div id="image1"><a href="LIENS VERS LA PAGE AVEC LES AUTRES BOUTONS"></div>
<div id="image2"></div>
<div id="texte1"><a href="LIENS VERS LA PAGE AVEC LES AUTRES BOUTONS"><strong>Formation disciplinaire</strong></a></div>
<div id="texte2"><strong>Préparer un concours</strong></div>
<div id="image3"></div>
<div id="image4"></div>
<div id="texte1"><strong>Formation transversale</strong></div>
<div id="texte2"><strong>Réformes</strong></div>
</div>
<div></div>
<div></div>
<div id="blocglobal"></div>


ET mon CSS

#image1{
	width:280px;
	box-shadow: 4px -4px 10px #DEDEDE;
	height:266px;
	margin-bottom : 30 px;
	margin-top: 50px;
	border-top-left-radius : 100px;
	border-top-right-radius : 100px;
	border-bottom-left-radius : 100px;
	border-bottom-right-radius : 100px;
	background-image: url("http://192.168.0.4/CNFETP/wp-content/uploads/2016/formation_disciplinaire.jpg");
}

#texte1{
    color: #51369b !important;
		margin-left: 65px;
		margin-top: -25px
}
#texte2{
    color: #51369b !important;
		margin-left: 400px;
		margin-top: -25px
}
#image3{
	width:280px;
	height:266px;
	margin-bottom : 30px;
	margin-top: 50px;
	border-top-left-radius : 100px;
	border-top-right-radius : 100px;
	border-bottom-left-radius : 100px;
	border-bottom-right-radius : 100px;
	background-image: url("http://192.168.0.4/CNFETP/wp-content/uploads/2016/Formation_Transversales.jpg");
}


#image2{
	width:280px;
	height:266px;
	margin-bottom : 30px;
  margin-left: 40px;
	margin-top: 50px;
	border-top-left-radius : 100px;
	border-top-right-radius : 100px;
	border-bottom-left-radius : 100px;
	border-bottom-right-radius : 100px;
	background-image: url("http://192.168.0.4/CNFETP/wp-content/uploads/2016/preparation_concours.jpg");
}
#image4{
	width:280px;
	height:266px;
	margin-bottom : 30px;
  margin-left: 40px;
	margin-top: 50px;
	border-top-left-radius : 100px;
	border-top-right-radius : 100px;
	border-bottom-left-radius : 100px;
	border-bottom-right-radius : 100px;
	background-image: url("http://192.168.0.4/CNFETP/wp-content/uploads/2016/Reformes.jpg");
}


Et mon problème c'est que mon liens est cliquable sur mon image de ma div image 2 Alors qu'il est censé être sur l'image 1 non ? Smiley confus
Merci de l'aider Smiley biggrin
oui effectivement, cependant cela ne résout pas mon problème, je ne peux cliquer sur aucune images.
Blinkix a écrit :
Et mon problème c'est que mon liens est cliquable sur mon image de ma div image 2 Alors qu'il est censé être sur l'image 1 non ?

Et bien non : en effet, hormis le fait que la balise n'est pas fermée - comme l'a déjà signalé Jencal - la balise n'englobe pas la div mais se trouve à l'intérieur de cette dernière. Donc aucune chance de cliquer sur le lien...
en inversant tout simplement 

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


car ton CSS, tu l'a appliquer à ta "div" et non a ton lien <a>, donc la taille en pixel (width) est appliquer à la div, et non au lien.
Modifié par JENCAL (31 May 2016 - 15:59)
<a href="http://192.168.0.4/cnfetp/?page_id=19893"><div id="image1"></div></a>

Bah ça marche plus ...
JENCAL a écrit :
en inversant tout simplement 

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


car ton CSS, tu l'a appliquer à ta "div" et non a ton lien <a>, donc la taille en pixel (width) est appliquer à la div, et non au lien.


Bonjour !

Je pensais que ce n'était pas sémantique de mettre des éléments block dans un élément inline mais apparemment c'est devenu possible avec HTML5 d'englober des éléments block avec la balise '<a>'...

Mais s'il faut croire l'auteur de cet article, ce n'est pas terrible pour le référencement :
http://www.hteumeuleu.fr/faire-un-lien-sur-toute-une-zone-en-css/
et il propose une autre méthode...
Smiley smile
J’émettrais également un GROOOOS bémol sur le fait de mettre une image en background dans une div vide englobé par un a...
à moins que la dite div n'ait un contenue et qu'il ait été omis, ici.
J'ai fais ça et cela fonctionne, mais semble un peu fragile

<a href="http://192.168.0.4/cnfetp/?page_id=19893">
<div id="image1"></div> </a>
juliesunset a écrit :
J’émettrais également un GROOOOS bémol sur le fait de mettre une image en background dans une div vide englobé par un a...
à moins que la dite div n'ait un contenue et qu'il ait été omis, ici.


Salut,

Peux-tu développer pourquoi ce gros Bémol Smiley confused ?
Bonjour !

Juliesunset a raison : au-delà de la question élément 'inline' ou 'block', vos liens n'encadrent aucun contenu, vos divs sont vides...

Si la feuille de style est désactivée, vos liens disparaissent, on ne peut plus cliquer dessus.

Sans parler du problème du référencement qui est un domaine que je ne maitrise pas...
Smiley sweatdrop
oui je ne maitrise pas du tout le referencement non plus c'est pour cela que je vous demande conseille.
Il serait donc plus judicieux de mettre dans mon div l'image avec la balise <img> ?
Zelena a écrit :

Si la feuille de style est désactivée.
Smiley sweatdrop


y'a des personnes qui le font vraiment ??
Administrateur
JENCAL a écrit :
y'a des personnes qui le font vraiment ??
Volontairement, sans doute pas.
Merci Zelena, tu as su expliquer mieux que moi.

Blinkix a écrit :
Il serait donc plus judicieux de mettre dans mon div l'image avec la balise &lt;img&gt; ?

Oui, mettre l'image directement dans le code html. Et non, pas dans le div plutôt comme ça:

<a href="ici/le/lien/une/page.html"><img src="/lien/image/blabla.jpg" width="325" alt="" class="images image1"></a>
<a href="ici/le/lien/une/page.html"><img src="/lien/image/blabla.jpg" width="325" alt="" class="images image2"></a>

À mon avis, le div est inutile ici.
Évite également d'utiliser des id, privilégier les class. L'avantage c'est que tu peux mettre plusieurs class sur un même élément. pas possible avec un id qui en plus, doit être unique dans une page.

Autre recommandation. Je regarde ton code css. Essaie d'évité les répétitions et combinant ce qui est pareil. Par exemple:

#image1{
	width:280px;
	box-shadow: 4px -4px 10px #DEDEDE;
	height:266px;
	margin-bottom : 30 px;
	margin-top: 50px;
	border-top-left-radius : 100px;
	border-top-right-radius : 100px;
	border-bottom-left-radius : 100px;
	border-bottom-right-radius : 100px;
	background-image: url("http://192.168.0.4/CNFETP/wp-content/uploads/2016/formation_disciplinaire.jpg");
}

#image2{
	width:280px;
	height:266px;
	margin-bottom : 30px;
	margin-top: 50px;
	border-top-left-radius : 100px;
	border-top-right-radius : 100px;
	border-bottom-left-radius : 100px;
	border-bottom-right-radius : 100px;
	background-image: url("http://192.168.0.4/CNFETP/wp-content/uploads/2016/Formation_Transversales.jpg");
}

images 1 et 2 sont pratiquement identique, alors on combine, et vivement les class!

.images{
	width: 280px;
	height: 266px;
	margin: 50px 0 30px;
	border-radius: 100px;

}
.image1{
	box-shadow: 4px -4px 10px #DEDEDE;
	background-image: url("http://192.168.0.4/CNFETP/wp-content/uploads/2016/formation_disciplinaire.jpg");
}

.image2{
	background-image: url("http://192.168.0.4/CNFETP/wp-content/uploads/2016/Formation_Transversales.jpg");
}

C'est beaucoup plus léger ainsi.

Blinkix a écrit :
Donc a votre avis je dois parer cette éventualité ou pas nécessairement ?
Toujours, on ne sait pas ce qui peux arrivé du côté de l'utilisateur.
la navigateur a buggé, manque de bande passante, l'utilisateur utilise un lecteur écran, etc. Tous des cas où le css est susceptible d'être inutile ou pas loader.
Modifié par juliesunset (01 Jun 2016 - 16:08)
Pages :
Sujet clos
Aller à