[Résolu] Mettre un lien dynamique sur du contenu

Bonjour,

J'ai utilisé le code css :

 header:before{
        content:url('/images/logo.png');
        position:absolute;
        left:30px;
        top:15px;
        cursor:pointer;
    }

pour insérer l'image dans une page html et je voudrais avoir un lien sur l'image afficher grâce au code css before{content:content:url('/images/logo.png');}

Bonjour,

A priori, le lien (balise <a>...</a>) devrait se mettre dans le code HTML autour de l'élément header qui a un :before contenant l'image.

<a href="xxx.htm"><header>...</header></a>

Mais je ne suis pas sûr d'avoir bien compris la question !

Amicalement,

Merci pour la réponse parsimonhi,
En fait dans la balise <header></header> y a d'autres informations et quand j'applique ton idée du coup je ne vois plus mon menu et je pense aussi au risque d'imbriquer <header>/<header> dans <header><header> par exemple :

 <header>
        <a href="#"><header></header></a>
            <div class="menu">
                <nav>
                    <ul>
                        <li><a href="#">Element 1 </a></li> 
                        <li><a href="#">Element 2</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

Bonjour,

Il suffit de mettre le lien autour du header existant !

<a href="#">
<header>
    <div class="menu">
        <nav>
            <ul>
                <li><a href="#">Element 1 </a></li> 
                <li><a href="#">Element 2</a></li>
            </ul>
        </nav>
    </div>
</header>
</a>

Amicalement,

Bonjour,

Si tu veux que le lien soit uniquement autour de l'image, il vaudrait mieux insérer l'image dans le code html.

<header>
<a href="#">
    <img src="/images/logo.png">
</a>
    <div class="menu">
        <nav>
            <ul>
                <li><a href="#">Element 1 </a></li> 
                <li><a href="#">Element 2</a></li>
            </ul>
        </nav>
    </div>
</header>

Amicalement,
Modifié par parsimonhi (12 Dec 2014 - 12:41)

Oui cette méthode je connais

<header>
<a href="#">
    <img src="/images/logo.png">
</a>
    <div class="menu">
        <nav>
            <ul>
                <li><a href="#">Element 1 </a></li> 
                <li><a href="#">Element 2</a></li>
            </ul>
        </nav>
    </div>
</header>

l'objectif cétait de le faire sans inclure une <div class="logo"> qui se répercutera sur le design de manière générale.

Bonjour,

Dans ce cas, met ton image comme fond de ton lien, celui-ci étant en position:absolute.

<header>
    <a class="logo" href="#"></a>
    <div class="menu">
        <nav>
            <ul>
                <li><a href="#">Element 1 </a></li> 
                <li><a href="#">Element 2</a></li>
            </ul>
        </nav>
    </div>
</header>

header:before
{
        position:absolute;
        content:url('/images/logo.png');
        left:30px;
        top:15px;
}
a.logo
{
        display:block;
        position:absolute;
        left:30px;
        top:15px;
        cursor:pointer;
        width: <mettre ici la largeur en pixel de logo.png>;
        height: <mettre ici la hauteur en pixel de logo.png>;
}

Ça devrait marcher tel quel ou éventuellement être adapté un peu en fonction du reste de ton design.

EDIT : on doit même pouvoir se passer du header:before et insérer l"image directement via un a.logo {background:url('/images/logo.png');} dans le css.

Amicalement,
Modifié par parsimonhi (12 Dec 2014 - 13:13)

Merci parsimonhi ça marche
Bonne journée

salut,
par contre un logo est une image à part entière, donc à insérer via une balise <img>.
Il faut dire aussi qu'un lien vide sans contenu n'est jamais bon.

Salut,
Zelalsan je suis tout à fait d'accord avec tes remarques mais c'est le Designer qui le veut ainsi.

Depuis quand le «designer» choisit le code de l'intégration? Intégrer cela correctement ne change rien au visuel…

kustolovic, oui tout à fait je vais argumenter ma première proposition.