28173 sujets

CSS et mise en forme, CSS3

Recharger une page après un click sur une zone fille.

Bonjour,

J'ai conscience que mon titre est incompréhensible, mais je n'ai pas trouvé mieux. Voici l'explication :

Mon site utilise une template faite en CSS.

Je voudrais que lorsque un utilisateur clique sur la baniere, cela recharge la page d'accueil.

Or, dans le fichier index.php la zone contenant la banière n'est pas définie par un div. En fait, il y a un div container qui fait afficher une zone plus large qui inclut :
- la banière
- d'autres éléments

Ce conteneur s'appelle "top"
le sous bloc contenant la banière uniquement est créé comme ceci dans le css :
div#top h2 {
background: url(../images/branding_f2.jpg) no-repeat;
}

J'ai donc ajouté

onClick="document.location='http://www.monsite.net'"

dans
<div id="top">

ce qui donne

<div id="top" onClick="document.location='http://www.monsite.net'">

Bien entendu, le chargement se fait lorsque je clique sur toute la zone, alors que je voudrais juste qu'il se fasse lorsque je clique sur la banière.

Que faire svp?? Je me doute bien qu'il doit falloir trouver l'id du block survolé et avec un if() effectuer le chargement que si on survolle le sous bloc H2.

Merci si vous pouvez m'aiguiller.

Houbahop.
Salut,

Tu peux le faire sans utiliser JavaScript,

Pour ce faire, tu vas mettre un lien dans ta bannière. Donc dans le h2 tu auras un lien du genre : <a href="/"><span>Retour à l'index</span></a>

Pour le CSS c'est assez simple, il te suffit de changer le display du a en block et de lui donner une hauteur et largeur équivalente à la zone dont tu souhaites quelle soit cliquable.

Après tu crées une règle CSS qui met le SPAN du a en display none Smiley cligne

Voilà

A+
Merci Hacken pour ta rapidité !

J'avoue que je ne comprends pas tout (je ne suis pas très calé en css)

Le lien <a href="/"><span>Retour à l'index</span></a> je le mets dans le css comme ceci ?

div#top h2 {
background: url(../images/branding_f2.jpg) no-repeat;
<a href="/"><span>Retour à l'index</span></a>
}


Je pensait que cela ne se faisait pas de mettre des liens dans le css.. ou alors j'ai mal compris.


Autre question :

a écrit :
il te suffit de changer le display du a en block


je n'ai pas de définition pour les liens de cette zone. Quelle est la syntaxe stp?

Désolé mais je n'ai pas assez de connaissances de base pour m'en sortir seul Smiley sweatdrop

Houb.
Hop,

En effet, t'es pas très calé :-P

Voici un exemple.

Code HTML : 
<h2><a href="/"><span>Retour à l'index</span></a>


Code CSS : 
div#top h2 {
background: url(../images/branding_f2.jpg) no-repeat;
}
div#top h2 a{
display:block;
height:100%;
width:100%;
}
div#top h2 a span{
display:none;
}


En gros toute la zone de la balise a qui permet de faire un lien, devient aussi grande que le h2 et donc ça fait une image cliquable.

A+
Merci beaucoup,

Je comprends mieux maintenant lol

Je ne conaissait pas cette technique.

Ca marche très trés bien avec firefox, mais avec IE6 ca me détruit la mise en page.

Voici une capture d'écran.

(edit par Igor: merci d'éviter d'afficher des illustrations gigantesques qui déforment le forum sur les tailles d'écran habituelles. Cocher le bouton "vignette" si vous transférez vos images sur le forum)
Modifié par Igor (03 Nov 2007 - 21:58)
Salut,

Il y a plus simple et plus efficace : mettre l'image directement dans le lien, et ne pas s'embarrasser de "display: none" qui rendront le lien inutilisable pour certains utilisateurs !

Par exemple : 
<h2>
  <a href="/" title="... : retour à la page d'accueil"><img src="/img/branding.png" alt="... : retour à la page d'accueil" height="YYY" width="XXX" /></a>
</h2>
Salut,

peux tu m'expliquer quels utilisateurs seront lésés par la méthode précédente stp?

Le problème de mettre l'image directement dans le lien, c'est que cela casse le fait que cela soit une template je crois.

Ceci dit, je n'ai qu'un habillage actuellement...
Les utilisateurs ne visionnant pas les images seront lésés si l'image n'est pas présente en dur dans la page. C'est-à-dire ceux qui ont un lecteur d'écran, un navigateur texte, etc.

En ce qui concerne le template, je ne vois pas le problème. En parlant de "template", tu veux dire que le document va être parsé par l'un ou l'autre système pour remplacer des balises/marqueurs/... par du contenu dans les pages finales ?

Si l'image dans le h2 est susceptible de changer, il devrait aussi être possible de générer la source de l'image à l'aide du moteur de template ?
Sujet clos
Aller à