Comment mettre un lien sur logo "CSS"

Comment mettre un lien sur logo "CSS" [Réglé]

Créations de Thèmes

Fa_Brice Membre non connecté

Booster Fuzil

Le 08/04/2013 à 20h05

#127177

Booster Fuzil
Voir le profil du membre Fa_Brice
Inscrit le : 03/08/2009
Site internet

Je ne vais pas trop solliciter Elenwii sur ce sujet, quoique.....

Comment rendre le logo image en tête de mon accueil cliquable, c'est à dire un lien du style <a href="/"> </a> car il me semble d'après certains forums qu'il est impossible de mettre des href dans les fichiers CSS ..dans ce cas je suppose qu'il faut mettre le lien dans header.tpl et le chemin dans CSS, mais où et surtout comment?

Fabrice

Les horaires SNCF sur votre PC
C'est sur I n f o R a i l . f r
Même sur votre mobile [WMobile ou WPhone]

Teki Membre non connecté

Booster Mortier

Le 08/04/2013 à 20h13

#127179

Booster Mortier
Voir le profil du membre Teki
Inscrit le : 17/02/2013

Bonsoir.

Ligne 62 du header.tpl, remplace cette ligne :

Code TPL :

<div id="logo"></div>

Par celle-ci :

Code TPL :

<a id="logo" href="{PATH_TO_ROOT}"></a>

Puis dans le fichier 'design.css', remplace ceci (autour de la ligne 40) :

Code CSS :

div#logo {
float: left;
margin: 20px 20px 0px 35px;
background: url('images/logo.png') no-repeat;
height: 90px;
width: 90px;
}

Par ça :

Code CSS :

a#logo {
float: left;
margin: 20px 20px 0px 35px;
background: url('images/logo.png') no-repeat;
height: 90px;
width: 90px;
        display:block;
}

"Je suis un mec simple, y'a pas plus compliqué que moi"

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 08/04/2013 à 20h14

#127180

Administrateur
Voir le profil du membre ElenWii
Inscrit le : 14/08/2009
Site internet
Groupes :
Equipe Graphique

Bonjour,

Je ne vais donc pas te répondre si tu ne me sollicite pas

Il te faut effectivement ajouter un lien <a href="#"> </a> dans le div associé au logo.

Code TPL :

<div id="logo"><a href="{tonlien}"></a></div>

Et dans le code CSS, il faut que tu ajoute la conversion de l'élement <a> en block et une taille fixe qui correspondra à la taille de ton logo :

Code CSS :

div#logo a{
  display:block;
  height:{hauteur de ton logo} px;
  width:{largeur de ton logo} px;
}

EDIT : grillé ... la solution de Teki-Latex fonctionne aussi

ElenWii

Fa_Brice Membre non connecté

Booster Fuzil

Le 08/04/2013 à 21h24

#127186

Booster Fuzil
Voir le profil du membre Fa_Brice
Inscrit le : 03/08/2009
Site internet

Fonctionne pas, voici ce que j'ai fait avec comme adresse, la racine "/"

header.tpl

Citation :

# INCLUDE MAINTAIN #

<div id="global">

<div id="header_container">

<div id="header">

<div id="logo"><a href="/"></a>

# IF C_MENUS_HEADER_CONTENT #

{MENUS_HEADER_CONTENT}

# ENDIF #

</div></div>

disign.css -Ici, j'ai supprimé div#site_name car si je ne me trompe pas, il affichait le nom du site à coté du logo d'origine de phpboost , l'image de mon logo est header.png, non logo.png

Citation :

div#header_container { }

div#logo {

float: none;

margin: auto;

background: url('images/header.png') no-repeat;

display:block;

height: 184px;

width: 957px;

}

div#header{ height:175px; }

div#sub_header {

height: 35px;

}

Les horaires SNCF sur votre PC
C'est sur I n f o R a i l . f r
Même sur votre mobile [WMobile ou WPhone]

Teki Membre non connecté

Booster Mortier

Le 08/04/2013 à 21h42

#127187

Booster Mortier
Voir le profil du membre Teki
Inscrit le : 17/02/2013

Fonctionne pas...

Qu est-ce qui ne fonctionne pas ? Y-a t-il une image ?
Pour le lien, il faut mettre {PATH_TO_ROOT} et non pas '/', car un simple '/' t'enverra vers le dossier en cours..

As-tu mis un 'display:block' sur ton lien dans le CSS ?

Je précise que tout est marqué au dessus, et avec 2 méthodes...

"Je suis un mec simple, y'a pas plus compliqué que moi"

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 08/04/2013 à 22h35

#127191

Administrateur
Voir le profil du membre ElenWii
Inscrit le : 14/08/2009
Site internet
Groupes :
Equipe Graphique

Tu a oublier de specifier que c'etait le "a" qui doit être un block et non pas le div logo

div#logo a{ }

ElenWii

Fa_Brice Membre non connecté

Booster Fuzil

Le 09/04/2013 à 00h03

#127195

Booster Fuzil
Voir le profil du membre Fa_Brice
Inscrit le : 03/08/2009
Site internet

Ok, ça fonctionne, je résume pour être clair:

Code TPL ligne 62 :

<div id="logo">[url={PATH_TO_ROOT}/][/url]

</div>

J'ai écrit exactement {PATH_TO_ROOT}/ avec le / pour revenir sur l'index voir dessus.

Code CSS :

div#logo a{

float: none;

margin: auto;

background: url('images/header.png') no-repeat;

display:block;

height: 184px;

width: 957px;

Effectivement, j'avais oublié le a à coté de logo, ajouté display:block; et tout fonctionne.

Merci

Les horaires SNCF sur votre PC
C'est sur I n f o R a i l . f r
Même sur votre mobile [WMobile ou WPhone]

Créations de Thèmes

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie