Aller au contenu

Lien dans DIV ?


Nullette

Sujets conseillés

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...smile.gif


Lien vers le commentaire
Partager sur d’autres sites

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
Lien vers le commentaire
Partager sur d’autres sites

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


Lien vers le commentaire
Partager sur d’autres sites

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


Lien vers le commentaire
Partager sur d’autres sites

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.


Lien vers le commentaire
Partager sur d’autres sites

@yuston : C'est valide en HTML5 smile.gif



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>

Lien vers le commentaire
Partager sur d’autres sites

@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.


Lien vers le commentaire
Partager sur d’autres sites

@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) smile.gif

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.

Lien vers le commentaire
Partager sur d’autres sites

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.


Lien vers le commentaire
Partager sur d’autres sites

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.


Lien vers le commentaire
Partager sur d’autres sites

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,...)



Lien vers le commentaire
Partager sur d’autres sites

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


Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...