Barres de navigation ! Bouton_activeBarres de navigation ! Bouton_hoverBarres de navigation ! Fb-hoverBarres de navigation ! Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Barres de navigation ! EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Barres de navigation ! EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Barres de navigation ! EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Barres de navigation ! EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Barres de navigation ! EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Barres de navigation ! EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Barres de navigation ! EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Barres de navigation ! EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -17%
SSD interne Crucial SSD P3 1To NVME à ...
Voir le deal
49.99 €

Partagez
 

Barres de navigation !

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://pegase-annonces.forumactif.com
Roxadik
{ Membre }
{ Membre }

Féminin Messages : 22



Barres de navigation ! Empty
Bonjour !

C'est encore moi le boulet ^^
J'ai une idée très précise pour faciliter la navigation sur mon forum. Actuellement, cela ressemble à ceci :

Spoiler:


Et moi j'aimerais que cela ressemble à celle du forum http://elegance-design.forumactif.com/ qui, je trouve, est très pratique ! Idem que pour ce forum : dès qu'on passe la souris sur un lien, ça change de couleur ! Comment dois-je m'y prendre ? (je suis au moins sur la bonne voie j'espère !)
MessageSujet: Barres de navigation !   Barres de navigation ! EmptyVen 04 Juin 2010, 08:45
Revenir en haut Aller en bas
http://misslitchyproduction.yourme.net
Kimy
{ Membre actif }
{ Membre actif }

Féminin Messages : 1190



Barres de navigation ! Empty
Bonjour,
Par rapport à ta navigation, tu l'as construite différemment que celle d'Elegance Design. Tu as utilisé des images faites graphiquement que tu as rendu cliquable en rajoutant des liens derrière. Or généralement les navigations comme celles de ED se font avec du texte et du CSS seulement.

Je te montre un exemple :



TEXTE
TEXTE2


CODE HTML à mettre sur ta page d'accueil ou dans un message
Code:
<div class="banane">TEXTE</div><div class="banane">TEXTE2</div>

CODE CSS à mettre dans la feuille de CSS

Code:
.banane {
background-color: #000000;
border-left: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
text-align: center;
color: #FFFFFF;
width: 30%;
}

Tu peux remplacer le mot "banane" par celui que tu veux mais il faut que les deux mots coïncident sinon ça ne marchera pas. Il ne faut surtout pas oublier non plus de mettre le petit "." devant banane dans la feuille de CSS

background-color correspond à la couleur de fond, ici noire.
border-left correpond à la bordure blanche à gauche, 5px est sa taille (tu peux mettre la valeur que tu souhaites bien entendu), solid signifie qu'elle est en trait plein, mais tu peux aussi avoir dotted, dashed etc...
border-right c'est la bordure à droite.
text-align : center, centre ton texte
color correspond à la couleur du texte.
width correspond à la largeur du tout

Après il faut que tu rajoutes les liens derrière en entourant chaque "div" par le même code que tu as utilisé c'est à dire :
Code:
<a href="TON LIEN" target="_blank"></a>
A noter que l'ajout de
Citation :
target="_blank"
ouvrira ton lien dans une autre page que celle où tu te trouves. Si tu veux rester sur la même page il faut le retirer.

Nous aurons donc ceci :

Code:
<a href="TON LIEN" target="_blank"><div class="banane">TEXTE</div></a><a href="TON LIEN" target="_blank"><div class="banane">TEXTE</div></a>

TEXTE
TEXTE2


Pour le changement de couleur quand tu passes la souris sur ton lien tout se passe dans le CSS. Reprenons notre code du début :
Code:
.banane {
background-color: #000000;
border-left: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
text-align: center;
color: #FFFFFF;
width: 30%;
}
Ceci est le lien présenté normalement, sans aucun effet quand on passe la souris dessus. Si tu veux un quelconque effet sur le texte, la couleur de fond, des bordures etc... quand tu passes ta souris dessus, il faut rajouter devant banane : ":hover"
Par exemple :

Code:
.banane:hover {
background-color: #FFFFFF;
border-left: 5px solid #000000;
border-right: 5px solid #000000;
text-align: center;
color: #000000;
width: 30%;
}

Voilà je crois que j'ai fais le tour, si tu as un soucis n'hésite pas
MessageSujet: Re: Barres de navigation !   Barres de navigation ! EmptyVen 04 Juin 2010, 09:17
Revenir en haut Aller en bas
http://pegase-annonces.forumactif.com
Roxadik
{ Membre }
{ Membre }

Féminin Messages : 22



Barres de navigation ! Empty
Oulala, beaucoup d'informations ! Je vais essayer...Je te remercie.

J'ai mis des images graphiques car je ne savais pas comment faire avec du texte normal :s
MessageSujet: Re: Barres de navigation !   Barres de navigation ! EmptyVen 04 Juin 2010, 09:56
Revenir en haut Aller en bas
http://misslitchyproduction.yourme.net
Kimy
{ Membre actif }
{ Membre actif }

Féminin Messages : 1190



Barres de navigation ! Empty
Y'a pas de soucis ^^
Hésite pas si quelque chose t'échappe

On pourrait continuer avec tes images. Mais pour avoir un changement de couleur il faudrait que tu crées une seconde image avec les couleurs que tu souhaites et la faire apparaître à la place de la première quand on passe la souris.
MessageSujet: Re: Barres de navigation !   Barres de navigation ! EmptyVen 04 Juin 2010, 10:03
Revenir en haut Aller en bas
http://pegase-annonces.forumactif.com
Roxadik
{ Membre }
{ Membre }

Féminin Messages : 22



Barres de navigation ! Empty
Alors, ça ne me donne ceci :

Code:
<a href="http://pegase-annonces.forumactif.com/les-elevages-f3/"><div class="banane">.Elevages.</div></a>

Si je veut réduire la largeur, je réduis le nombre de pourcentage dans le CSS ou je l'augmente ?
MessageSujet: Re: Barres de navigation !   Barres de navigation ! EmptyVen 04 Juin 2010, 10:06
Revenir en haut Aller en bas
http://pegase-annonces.forumactif.com
Roxadik
{ Membre }
{ Membre }

Féminin Messages : 22



Barres de navigation ! Empty
Ah, l'histoire avec les images, ça m'intéresse également !
MessageSujet: Re: Barres de navigation !   Barres de navigation ! EmptyVen 04 Juin 2010, 10:13
Revenir en haut Aller en bas
http://misslitchyproduction.yourme.net
Kimy
{ Membre actif }
{ Membre actif }

Féminin Messages : 1190



Barres de navigation ! Empty
PS : Evite les doubles posts à l'avenir. C'est sanctionné

Si tu veux réduire la largeur il faut baisser le pourcentage

Pour les images :

Code:
<a href="TON LIEN" target="_blank"><img src="LIEN DE LA PREMIERE IMAGE" onMouseOver="this.src='LIEN DE LA SECONDE IMAGE'" onMouseOut="this.src='LIEN DE LA PREMIERE IMAGE'" /></a>

Exemple :

MessageSujet: Re: Barres de navigation !   Barres de navigation ! EmptyVen 04 Juin 2010, 10:23
Revenir en haut Aller en bas
http://pegase-annonces.forumactif.com
Roxadik
{ Membre }
{ Membre }

Féminin Messages : 22



Barres de navigation ! Empty
Double post = poser une questre autre que le sujet d'origine ?

Merci pour ta réponse tout de même.

C'est parfait en ce qui concerne la navigation, ça me donne ce résultat :

Spoiler:


Cependant, j'aimerais savoir comment supprimer les soulignements noirs en dessous des liens ?
MessageSujet: Re: Barres de navigation !   Barres de navigation ! EmptyVen 04 Juin 2010, 10:47
Revenir en haut Aller en bas
http://misslitchyproduction.yourme.net
Kimy
{ Membre actif }
{ Membre actif }

Féminin Messages : 1190



Barres de navigation ! Empty
Le double post c'est quand tu mets deux messages d'affilés.
Au lieu de poster :
"Ah, l'histoire avec les images, ça m'intéresse également !"
à la suite, il faut que tu édites (bouton en haut à droite de ton message) ton message d'au-dessus et que tu l'ajoutes à la suite de :
"Si je veut réduire la largeur, je réduis le nombre de pourcentage dans le CSS ou je l'augmente ?"

Je ne vois pas de soulignements noirs sur ton forum °°
MessageSujet: Re: Barres de navigation !   Barres de navigation ! EmptyVen 04 Juin 2010, 10:57
Revenir en haut Aller en bas
http://pegase-annonces.forumactif.com
Roxadik
{ Membre }
{ Membre }

Féminin Messages : 22



Barres de navigation ! Empty
Ok ! Désolée !


Alors, j'ai mis tous les liens en transparence et pourtant... moi je voie ceci quand je ne pose pas ma souris dessus...

Barres de navigation ! Dfgdfg10
MessageSujet: Re: Barres de navigation !   Barres de navigation ! EmptyVen 04 Juin 2010, 11:00
Revenir en haut Aller en bas
http://misslitchyproduction.yourme.net
Kimy
{ Membre actif }
{ Membre actif }

Féminin Messages : 1190



Barres de navigation ! Empty
Ah oui c'est parce que tu es sous Internet Explorer x)
Pour les retirer j'ai réussi qu'avec un seul code
Code:
a {
text-decoration: none !important;
}

Seulement ce code t'enlève le soulignement d'absolument tout les liens
MessageSujet: Re: Barres de navigation !   Barres de navigation ! EmptyVen 04 Juin 2010, 11:33
Revenir en haut Aller en bas
http://pegase-annonces.forumactif.com
Roxadik
{ Membre }
{ Membre }

Féminin Messages : 22



Barres de navigation ! Empty
Oui, c'est le code que j'ai déjà mis mais qui ne foncitonne pas avec IE apparement...mais si ça concerne seulement IE ça me va :p

Je peux poser d'autres questions sur un autre sujet mais toujours sur le thème de la page d'accueil ?
MessageSujet: Re: Barres de navigation !   Barres de navigation ! EmptyVen 04 Juin 2010, 12:47
Revenir en haut Aller en bas
http://misslitchyproduction.yourme.net
Kimy
{ Membre actif }
{ Membre actif }

Féminin Messages : 1190



Barres de navigation ! Empty
Ah ? Ça avait fonctionné chez moi °° Oui c'est IE qui est méchant Barres de navigation ! 3333627970 Faut le mettre à la poubelle x)

Mm le mieux c'est que j'archive ce sujet, et tu en ouvres un autre avec un bon titre. C'est mieux pour l'archivation
MessageSujet: Re: Barres de navigation !   Barres de navigation ! EmptyVen 04 Juin 2010, 12:53
Revenir en haut Aller en bas
Contenu sponsorisé




Barres de navigation ! Empty
MessageSujet: Re: Barres de navigation !   Barres de navigation ! Empty
Revenir en haut Aller en bas
 

Barres de navigation !

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Deux barres de navigation.
» Plus AUCUNES images ne s'affichent + DEUX barres de navigation sur mon forum.
» <Navigation> Mettre une Image sous la Barre de Navigation
» <Navigation> Barre de navigation fixée en haut de la fenêtre
» <Navigation> Barre de navigation qui disparait au scroll

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit