Lien dans DIV ?

[Nullette]

Bonjour,

j'ai un petit problème que je traîne depuis des années et qui est resté dans l'oubli.

Le logo de mon site n'est pas cliquable et c'est embêtant pour ceux qui ont l'automatisme de cliquer les logos.

L'image est coupée en deux, mais un clic sur la partie haute devrait convenir, sauf que je ne sais pas comment faire.

La partie html :

<div id="headertop">

<h1>Mon titre</h1>

<h2>blabla</h2>

<form>...</form>

</div>

La partie CSS :

#headertop {

position : relative;

width : 800px;

height : 80px;

margin-top : 0;

background : #ff9900 url(design/fondtop.gif) no-repeat top left;

}

J'aimerais mettre un lien vers la page d'accueil.

Si vous connaissez l'astuce...

[Portekoi]

Bonjour,

Deux solutions pour moi :

1 - L'encadrer par un href :

<a href="#"><div></div></a>

2 - Passer par du javascript :

<div onclick="DoHref('http://wwww.monsite.fr');" ></div>

Et plus bas dans la page :

<script type="text/javascript">    function DoHref(url){        window.location.href = url;    }</script>

Portekoi

[Nullette]

Non, ça ne fonctionne pas - en html. Ca décale la tête du logo.

Je voudrais éviter le javascript (et n'ai as essayé).

Merci

[Portekoi]

Ca décale la tête du logo : fais un type "a" en css sans Padding / Margin etc.

a:logo{

padding:0px;

margin:0px;

}

Je ne connais pas ton site / code. Utilise Fiddle sinon

[yuston]

Portekoi, est-ce vraiment recommandé d'encadrer une balise de type block par une balise inline? (concernant ta solution 1!)

La meilleure solution serait de mettre un simple lien et de jouer avec la CSS pour la transformer en block, puis jouer sur le height/width et les marges, et d'insérer en background le logo

[captain_torche]

Effectivement, mettre le click sur tout le header n'est pas une solution : tu ne soihaites pas qu'ils reviennent sur la home lorsqu'ils cliquent sur la recherche.

Vue la conception de ton header, le seul moyen que je vois serait de mettre deux liens (Un dans chaque partie du header), qui seraient placés en CSS de manière à recouvrir ton personnage-logo.

[Portekoi]

@yuston : C'est valide en HTML5

Après, pour une version plus ancienne de navigateur, il vaut mieux passer par un Href sur chaque partie de l'image comme le dit Captain.

Autre solution : http://css-tricks.com/snippets/jquery/make-entire-div-clickable/

Vouloir aujourd'hui éviter le javascript de nos jours, avec Node.js, jQuery etc.... cela ne me semble pas un choix judicieux sauf s'il y a une contrainte SEO mais là, je n'en vois pas.

EDIT : Pour moi, le DIV ne définie que le logo :

<div class="header">

    <a href="#"><div class="logo"></div></a>

</div>

[Nullette]

@Portekoi, c'est justement parce que que j'ai déjà pas mal de javascript dans le site et dans le forum (au fait, le site dont je parle est le seul et unique que j'ai en signature depuis toujours)

captain_torche, je ne sais pas comment il faudrait faire pour mettre un ou deux liens dans le css.

[captain_torche]

Il faudrait d'abord les mettre dans le code de ton(tes) header(s).

Ensuite tu les placerais au bon endroit avec le CSS.

[Portekoi]

@Portekoi, c'est justement parce que que j'ai déjà pas mal de javascript dans le site et dans le forum (au fait, le site dont je parle est le seul et unique que j'ai en signature depuis toujours)

captain_torche, je ne sais pas comment il faudrait faire pour mettre un ou deux liens dans le css.

Euh.... ça fait 3 lignes de JS en plus. Donc je pige pas ton blocage là-dessus.

C'est toi le patron... enfin, la patronne.

Je viens de voir ton site : effectivement, la solution de Captain sera plus adéquate.

Perso, j'aurai découper le header en 2 partie : D'un côté le logo dans une image seule et de l'autre, le reste du header.

[captain_torche]

Portekoi : en l'état actuel, mettre un onclick sur tout le header le déclencherait aussi lors d'un clic sur le formulaire de recherche.

Sur le headerbottom, on le déclencherait carrément sur tous les liens du menu

[Portekoi]

Toujours pas ce que j'ai dit....

<div class="header">

    <a href="#"><div class="logo"></div></a>

</div>

Je n'avais pas vu son site. Je me doute que le Href sur tout le Div ne serait pas la bonne solution. Mais si l'image était un background d'un styme dédié uniquement à cela, la solution fonctionnerait.

[captain_torche]

Ca rejoint ce que j'ai dit, alors

Mais même pas besoin d'insérer un nouveau div, le lien suffit.

Edit : ha mais si tu fais des edits, t'étonne pas que je relise pas

[Nullette]

J'ai essayé le javascript (je précise que comme mon pseudo l'indique je n'y connais pas grand chose), le logo disparaît.

Le logo avait été découpé en 2, la 1ère partie avec la tête de la poupée plus un fond et la 2e, le corps de la poupée. Ceci par un 1er webmaster, puis repris par un 2e webmaster - par le bien de webmaster hub

<div id="headertop">

englobe h1, h2 et un formulaire.

Dans le Css il y a #headertop h1 {, etc.

[Nicolas]

Bonjour,

Perso je n'aime pas trop la solution de la balise <a> qui entoure un div (pour plusieurs raisons)

Je préfère que la balise <a> encadre une balise <img>

Je verrai bien la structure suivante :

<div id="header">

	<div id="gauche">

		<div id="logo"><a href="..."><img src="..."></a></div>

	</div>

	<div id="droite">

		<div id="titre">Mon titre</div>

		<div id="slogan">Mon slogan</div>

		<div id="form_recherch"><form>...</form></div>

		<div id="menu_horizontal">...</div>

	</div>

</div>

Il faut que ton logo ne fasse qu'une image. Il sera placé dans la div de gauche.

Sur la div de droite tu mets tout le reste (titre, slogan, form, menu,...)

[Nullette]

Ca a l'air de fonctionner. J'ai utilisé l'affichage en direct avec Dreamweaver, car pour mettre en ligne je dois modifier toutes mes pages !

Je m'emmêle un peu dans la CSS et dans les DIV.

Partie html

<div id="hautheader">

		<div id="logo"><a href="index.html"><img src="jolie-tete.gif" width="407" height="80"></a></div>

	</div>

  <div id="headertop">

  <h1>Mon titre</h1>

    <h2>blabla</h2>

    <form>Recherches

    </form>

  </div>

Css (bizarre, je n'ai rien mis pour l'id logo)

#hautheader {

position : relative;

width : 800px;

height : 80px;

margin-top : 0;

background : #ff9900 url(jolie-tete.gif) no-repeat top left;

}


#headertop h1 {

margin : 10px 0 0 400px;

padding : 0;

font-weight : normal;

font-size : 1.8em;

color : white;

font-variant : normal;

background-color : #ff9900;

}

+ headertop h2, headertop form

[Nicolas]

Si tu ne styles pas le logo dans un .css tu peux enlever

id="logo"

[Nullette]

Ok. Merci