Image + lien dans la barre de navigation

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image + lien dans la barre de navigation

Message par JeYx83 Mar 23 Sep 2014 - 13:48

Détails techniques

Version du forum : Invision
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://arrogance.taguilde.net/

Description du problème

Salut à tous,

je souhaiterais ajouter une image tout à gauche de ma barre de navigation redirigeant vers un autre forum.


Dernière édition par JeYx83 le Mer 24 Sep 2014 - 13:14, édité 1 fois
avatar

JeYx83
**

Messages : 71
Inscrit(e) le : 25/03/2014

Voir le profil de l'utilisateur http://arrogance.taguilde.net/
JeYx83 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image + lien dans la barre de navigation

Message par Azimute974 Mar 23 Sep 2014 - 14:12

Il faut aller dans "Affichage" >> "En-tête & Navigation"
Ensuite cliques sur "Ajouter un menu personnalisé"
Et tu trouveras ton bonheur...

Spoiler:
Azimute974

Azimute974
Nouveau membre

Masculin
Messages : 14
Inscrit(e) le : 17/08/2014

Voir le profil de l'utilisateur http://radioactivewaste.bbfr.net
Azimute974 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image + lien dans la barre de navigation

Message par JeYx83 Mar 23 Sep 2014 - 14:48

Merci, suite à cette réponse rapide, j'aimerais savoir :

_ Comment séparer mon lien des autres en le mettant tout à gauche ?

_ Séparer les liens "S'enregistrer", "Connexion" et "Déconnexion" des autres en les mettant tout à droite ?
_ Comment faire pour que l'image de mon lien s'affiche sur toute la barre de navigation ?
Image + lien dans la barre de navigation Sans_t16

Image du lien :
Image + lien dans la barre de navigation Logo11
avatar

JeYx83
**

Messages : 71
Inscrit(e) le : 25/03/2014

Voir le profil de l'utilisateur http://arrogance.taguilde.net/
JeYx83 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image + lien dans la barre de navigation

Message par [Nihil] Mer 24 Sep 2014 - 0:40

Hello Smile

Pas la peine de me demander par MP, tôt ou tard quelqu'un passera sur le sujet Mr. Green

Alors, c'est parti, on retrousse nos manches.
Pour le lien à gauche, on va rajouter ceci dans le CSS :
Code:
#submenu .mainmenu[href="http://www.napple.fr/forum/"] {
    float: left; /* colle le lien à gauche */
    margin: -10px; /* annule le padding de #submenu */
    padding: 0; /* annule le padding par défaut de .mainmenu*/
}

#submenu .mainmenu[href="http://www.napple.fr/forum/"] img {
    height: 36px; /* hauteur du logo */
}

Pour le Connexion / Déconnexion, on va mettre ceci :
Code:
#submenu .mainmenu[href^="/login"] {
    float: right; /* colle le lien à droite*/
    margin: 0;
    padding: 0;
    margin-right: 50px; /* espace à gauche*/
}

Dis moi si cela fonctionne bien Very Happy
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

Voir le profil de l'utilisateur https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image + lien dans la barre de navigation

Message par JeYx83 Mer 24 Sep 2014 - 1:37

J'ai profité de te voir en ligne pour te demander ce service Razz

Comme toujours, tu m'es d'un grand secours ! Tout est nickel, je rentre juste dans le détail pour savoir si il est possible de centrer les liens restant, par rapport à ma bannière. Pour faire simple, je voudrais que les liens encadrés rouge soient centré dans le cadre vert.
Image + lien dans la barre de navigation Sans_t17
avatar

JeYx83
**

Messages : 71
Inscrit(e) le : 25/03/2014

Voir le profil de l'utilisateur http://arrogance.taguilde.net/
JeYx83 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image + lien dans la barre de navigation

Message par Azimute974 Mer 24 Sep 2014 - 9:24

Justement, je commence à m'y intéressé. Où doit-on mettre les codes ?
Azimute974

Azimute974
Nouveau membre

Masculin
Messages : 14
Inscrit(e) le : 17/08/2014

Voir le profil de l'utilisateur http://radioactivewaste.bbfr.net
Azimute974 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image + lien dans la barre de navigation

Message par [Nihil] Mer 24 Sep 2014 - 10:46

Oh je vois que tu as mis "S'enregistrer" aussi sur la droite ^^

Tu peux sinon remplacer tous les codes par ceci, ça t'évitera tout déséquilibrage, je sais pas pourquoi je n'y ai pas pensé hier XD
Pour le bouton de gauche :
Code:
#submenu .mainmenu[href="http://www.napple.fr/forum/"] {
    position: absolute; /* colle le lien à gauche */
    left: 0;
    margin: -10px 0; /* annule le padding de #submenu */
    padding: 0; /* annule le padding par défaut de .mainmenu*/
}
 
#submenu .mainmenu[href="http://www.napple.fr/forum/"] img {
    height: 36px; /* hauteur du logo */
}

Pour le bouton "Connexion / Déconnexion" et le bouton "S'enregistrer"
Code:
#submenu .mainmenu[href^="/login"],
#submenu .mainmenu[href="/register"]
 {
    position: absolute;
    margin: 0;
    padding: 0;
}

#submenu .mainmenu[href^="/login"] {
    right: 0;
}

#submenu .mainmenu[href="/register"] {
    right: 180px;
}


Dis moi si c'est mieux comme ça :p


Explications pour l'ancien code:
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

Voir le profil de l'utilisateur https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image + lien dans la barre de navigation

Message par JeYx83 Mer 24 Sep 2014 - 11:25

Tes codes règlent bien le problème seulement, les liens "Connexion" et "Déconnexion" sont coupés et je trouve que le lien "S'enregistrer" se trouve loin du lien "Connexion"...

Image + lien dans la barre de navigation Sans_t18
Image + lien dans la barre de navigation Sans_t19
avatar

JeYx83
**

Messages : 71
Inscrit(e) le : 25/03/2014

Voir le profil de l'utilisateur http://arrogance.taguilde.net/
JeYx83 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image + lien dans la barre de navigation

Message par [Nihil] Mer 24 Sep 2014 - 11:34

Alors dans le code il faut changer ces valeurs là :
Code:
#submenu .mainmenu[href^="/login"] {
    right: 0;
}
 
#submenu .mainmenu[href="/register"] {
    right: 180px;
}

En adaptant la valeur de right: 0; pour right: 10px; par exemple, et même chose pour right: 180px; il suffit de diminuer sa valeur. Il faut faire des test pour trouver les valeurs qui te conviennent :p

Néanmoins je viens de voir un petit problème sur ton code, pourrais tu me copier coller tout le CSS que tu as pour #submenu s'il te plait ?
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

Voir le profil de l'utilisateur https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image + lien dans la barre de navigation

Message par JeYx83 Mer 24 Sep 2014 - 11:46

Comme je ne suis pas sur de ce que tu veux, je te met tout mon CSS (désolé de te donner du boulot) Razz

Code:
body{
background-position: top center;
margin-top: 50px;
background-color:#321012;
background-repeat: no-repeat;
width: auto;
height: auto;
}

/*Menu_Suiveur_InVision*/
body {
padding: 0px; margin: 0px;
}
#submenu{
position: fixed; top: 0px; left: 0px; min-width: 100%; width: 100%; padding: 10px; z-index: 900;
}
#submenu{
background-color: rgba(0, 0, 0, 0.6);
border-bottom: 1px solid #afbec7;
}
#submenu ul li a {
color: #FFFFFF;
}
a.mainmenu{
font-weight: bold;
}

/*Liens_Forum*/
a{
text-decoration:none !important;
}
div.clearfix a{
color: #FFFFFF;
}
div#userlinks.clearfix a{
color: #000000;
}
div.post-container a{
color: #000000 !important;
}

/*Lien_Panneau_Administration*/
p.center a{
color:#FFFFFF
}

/*Sujets_Forum*/
.bar {
background-color: #CCA24E;
}

.postprofile-details.postdetails dt a img {
padding:2px; /* une marge entre la bordure et l'intérieur du bloc */
margin:2px; /* une marge entre la bordure et l'extérieur du bloc */
border:2px solid #9E3017; /* la bordure */
background:#CF5B41; /*une couleur de fond */
}

/*Icone_Horsligne*/
#offlineimg {
background-image: url(http://i39.servimg.com/u/f39/17/34/72/62/buddy_11.gif);
width: 14px;
height: 20px;
display: inline-block;
margin-right: 5px; /* espace à droite avec le pseudo */
vertical-align: middle;
}

/* Configuration du fil d Ariane */
#navstrip li.begin {
background: url("http://i39.servimg.com/u/f39/17/34/72/62/separa10.gif") no-repeat left 50%;
}
#navstrip li {
background: url("http://i39.servimg.com/u/f39/17/34/72/62/separa10.gif") no-repeat left 50%;
color: #EBD190;
}
#navstrip li a {
color: #EBD190;
}
#navstrip li a:hover {
color: #EBD190;
}

/*  ***** Onglets messagerie et profil *****  */
/* Onglet actif */
ul.privmsg li {
font-weight:bold;
color: #EBD190;
}
/* Autres onglets */
ul.privmsg li a {
color: #FFFFFF;
}

#submenu ul li a:hover {
color: #FFFFFF;
text-shadow: #FFFFFF 0px 0px 5px}

/* Liens Napple navbar */
#submenu .mainmenu[href="http://www.napple.fr/forum/"] {
    position: absolute; /* colle le lien à gauche */
    left: 0;
    margin: -10px 0; /* annule le padding de #submenu */
    padding: 0; /* annule le padding par défaut de .mainmenu*/
}
 
#submenu .mainmenu[href="http://www.napple.fr/forum/"] img {
    height: 36px; /* hauteur du logo */
}

/* Liens Inscription Connexion Deconnexion */
#submenu .mainmenu[href^="/login"],
#submenu .mainmenu[href="/register"]
 {
    position: absolute;
    margin: 0;
    padding: 0;
}
 
#submenu .mainmenu[href^="/login"] {
    right: 0;
}
 
#submenu .mainmenu[href="/register"] {
    right: 180px;
}
 
avatar

JeYx83
**

Messages : 71
Inscrit(e) le : 25/03/2014

Voir le profil de l'utilisateur http://arrogance.taguilde.net/
JeYx83 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image + lien dans la barre de navigation

Message par [Nihil] Mer 24 Sep 2014 - 11:54

Alors en fait il s'agit de cette partie là :
Code:
#submenu{
position: fixed; top: 0px; left: 0px; min-width: 100%; width: 100%; padding: 10px; z-index: 900;
}

On va remplacer par ceci (on va enlever le width... Par ce que associée au padding ici ça crée des problèmes). Le code va donc donner ça :
Code:
#submenu{
position: fixed; top: 0; left: 0; right: 0; padding: 10px; z-index: 900;
}

Si tu modifies ça + les modifications dans mon précédent message normalement cela devrait être bon Mr. Green

Courage, on va y arriver o/
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

Voir le profil de l'utilisateur https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image + lien dans la barre de navigation

Message par JeYx83 Mer 24 Sep 2014 - 12:16

Je sens qu'on touche le bout ! Laughing

Je suis très pointilleux et je vois que les liens ne sont pas tout à fait centrés...
Image + lien dans la barre de navigation Sans_t20
avatar

JeYx83
**

Messages : 71
Inscrit(e) le : 25/03/2014

Voir le profil de l'utilisateur http://arrogance.taguilde.net/
JeYx83 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image + lien dans la barre de navigation

Message par [Nihil] Mer 24 Sep 2014 - 12:58

Effectivement tu as raison

Là ça va être un peu du bidouillage, je n'ai pas trop le courage d'aller bien fouiller partout.

Si tu rajoutes dans ton CSS ceci, c'est mieux ?
Code:
#submenu .mainmenu {margin : .5em 0 .65em 1em}
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

Voir le profil de l'utilisateur https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image + lien dans la barre de navigation

Message par JeYx83 Mer 24 Sep 2014 - 13:14

Sujet résolu, milles merci pour ton aide [Nihil] ! Very Happy
avatar

JeYx83
**

Messages : 71
Inscrit(e) le : 25/03/2014

Voir le profil de l'utilisateur http://arrogance.taguilde.net/
JeYx83 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum