> Tous les forums > Forum des Webmasters
 Menu horizontal avec affichage d'un texteSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
griggione
  Posté le 07/03/2010 @ 20:15 
Aller en bas de la page 
Grand Maître astucien

Bonsoir tous

Je me suis essayé à cet execice qui consiste à faire afficher une ligne, différente selon les onglets pour un menu horizontal.

Ma foi j'ai à peu prés réussi mais reste un problème (ben voyons c'est pas marrant sinon ) , la ligne qui s'affiche dessous commence à chaque onglet au lieu de commencer à s'écrire à partir du 1er onglet.

Ha oui j'ai mis deux images selon l'over, sinon c'est trop fastoche a

les codes:

<div id="menu1">
<ul>
<li><a href="#1">Accueil</a></li>
<li><a href="#2">Installation<span>grbsrthbqtrhbqtr</span></a></li>
<li><a href="#2">Utilisation<span>grbsrthbqtrhbqtr</span></a></li>
<li><a href="#2">D&#233;veloppement<span>grbsrthbqtrhbqtr</span></a></li>
<li><a href="#2">Divers<span>grbsrthbqtrhbqtr</span></a></li>
<li><a href="#2">Plugins<span>grbsrthbqtrhbqtr</span></a></li>
<li><a href="#2">Boucles<span>grbsrthbqtrhbqtr</span></a></li>
<li><a href="#2"><span></span></a></li>
</ul>
</div>

#menu1
{
margin-top: 3px;
margin-left: 15px;
}
#menu1 li
{
float: left;
display: inline;
}
#menu1 a
{
width: 120px;
height: 25px;
background-image: url('/img/fondmenu1.gif');
display: block;
text-align: center;
color: #000000;
text-decoration: none;
padding: 2px 0 0 0;
}
#menu1 a:hover
{
width: 120px;
height: 25px;
color: #ffffff;
background-image: url('/img/fondmenu2.gif');
color: #4040FF;
font-weight: bolder;
}
#menu1 a span
{
display: none;
}
#menu1 a:hover span
{
display: block;
margin-top: 27px;
margin-left: 1px;
width: 600px;
text-align: left;
border-top: 1px solid #EC8916;
color: #000000;
}

Publicité
elle
 Posté le 07/03/2010 à 20:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Ben t'as un lien pour qu'on puisse voir?

qmike549
 Posté le 07/03/2010 à 20:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

bonjour

effectivement donnes nous le lien concerné

après nous allons au mieux pouvoir d'aider

Dreamer
 Posté le 07/03/2010 à 20:38 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Il est où le lien , hein ???

griggione
 Posté le 08/03/2010 à 08:29 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

Bonjour tous

Pas besoin de lien pour vérifier mais bon c'est demandé si gentiment

http://thelia.griggione.fr/

y.bli
 Posté le 08/03/2010 à 09:49 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Bonjour,

Ajoute une position absolute à ton #menu1 a:hover span (tu adapteras les valeurs)

#menu1 a:hover span
{
display: block;
width: 600px;
text-align: left;
border-top: 1px solid #EC8916;
color: #000000;
position:absolute;
top:50px;
left:100px;
}

@+



Modifié par y.bli le 08/03/2010 09:56
griggione
 Posté le 08/03/2010 à 16:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

Bonjour y.bli

Même si j'essaie d'éviter au maximum les position absolute à cause d'IE, j'avais quand même fait l'essai.
Franchement je vois pas.......

y.bli
 Posté le 08/03/2010 à 17:48 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien
griggione a écrit :

Bonjour y.bli

Même si j'essaie d'éviter au maximum les position absolute à cause d'IE, j'avais quand même fait l'essai.
Franchement je vois pas.......

j'ai fait l'essai et ça marche pour moi Firefox 3.6, IE8, Opera, Safari...

en mettant le curseur souris sur Divers :

à moins que j'ai pas compris...

@+

edit : je viens d'essayer sur un vieux PC où tourne IE6 et ça marche aussi



Modifié par y.bli le 08/03/2010 17:58
griggione
 Posté le 09/03/2010 à 09:20 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

RE

L'erreur vient du fait que j'avais marqué margin- devant left et top.

Merci y.bli

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
14,99 €Ensemble fitness (rouleau abdos, poignées de pompes, corde à sauter, pince à mains, tapis) à 14,99 €
29,99 € -50%

Amazon fait une promotion sur l'ensemble fitness Aeike qui passe à 14,99 € grâce à un coupon à activer sur la page du produit. On le trouve habituellement à 29,99 €. Cet ensemble comporte une roue abdominale, une paire de poignée de pompe, une corde à sauter réglable, une pince d’exercice des doigts et un coussinet pour genou.


Voir l'offre
49,99 €SSD Crucial MX500 500 Go à 49,99 €
65,99 € -24%

Amazon propose actuellement le SSD Crucial MX500 500 Go à 49,99 € livré gratuitement. On le trouve ailleurs à partir de 65,99 €. Ce SSD salué par la critique par son rapport qualité prix imbattable offre des débits de 560 Mo/s en lecture et 510 Mo/s en écriture. Il est garanti 5 ans. 


Voir l'offre
189,99 €Ecran 27 pouces Acer Nitro RG271Pbiipx (FHD, IPS, 165 Hz, 1ms) à 189,99 €
249,99 € -24%

Cdiscount fait une belle promotion sur l'écran 27 pouces Acer Nitro RG271Pbiipx (Full HD 1920x1080, IPS, 1ms, 165 Hz) à 189,99 € au lieu de 249,99 €. L'écran est Adaptive Sync et compatible Freesync et GSync.


Voir l'offre
199,99 €Ecran 23,8 pouces Acer Nitro XV240Y (FullHD, IPS, 1 ms, 165 Hz, FreeSync; pied réglable) à 199,99 €
259 € -23%

La Fnac fait une promotion sur l'écran 23,8 pouces Nitro XV240YPbmiiprx qui passe à 199,99 € alors qu'on le trouve ailleurs à partir de 259 €. Cet écran dédié aux joueurs dispose d'une dalle IPS Full HD de 1920x1080 pixels. Grâce à sa compatibilité Freesync et Gsync (165Hz) et son temps de réponse rapide de 1 ms, ce moniteur Acer offre une excellente fluidité d'affichage. Interfaces : 2 x HDMI, DP (1.2), Sortie de ligne audio. Pied ergonomique avec réglage de l'inclinaison, de la hauteur, du panoramique et de la rotation.


Voir l'offre

Sujets relatifs
Affichage d'un menu avec images
Pas d'affichage de la zone de saisie avec IE11
Problème avec menu en javascript à éditer
Texte déroulant avec arret, click et pop-up
Pb d'affichage de mon site avec FireFox
Mauvais affichage d'une lightbox avec ie7 et ie8
Menu de largeur fixe avec espacement régulier
Problème de menu horizontal centré
Probleme de texte avec flash
probleme avec dreamweaver en mode affichage creéat
Plus de sujets relatifs à Menu horizontal avec affichage d''un texte
 > Tous les forums > Forum Forum des Webmasters