Positionnement CSS et flèche de navigation

WebDesignCSS -  
 WebDesignCSS -
Bonjour à tous,

Je travaille sur une barre de navigation horizontale assez simple. Celle-ci est dans un bloc (.globalheader). Dans le bloc du dessous (#mainbody) se trouve le texte de la page. J'aimerais insérer une petite flèche du bloc corps de texte vers barre de navigation, pour indiquer au visiteur quelle section du site il visite.

Mon problème : je n'arrive pas à positionner la flèche pour qu'elle coïncide de manière systématique (comprendre, quelle que soit la taille de la fenêtre) avec le bouton de la barre de navigation. En position:absolute, il calcule par rapport à le fenêtre, car je ne vois pas comment "fixer" la boite #navbar_pointer_box, pour qu'il calcule par rapport à cette boîte. Merci d'avance pour votre aide !

Code source HTML :
<header>
<nav id="globalheader">
<div class="gn_button"><a href="index.php"><span id="logo_navbar"><img src="images/logo.png" width="40" /></span></a></div>
<div class="gn_button"><a href="aboutus.php">Activités</a></div>
<div class="gn_button"><a href="store.php">Boutique</a></div>
<div class="gn_button"><a href="support.php">Assistance</a></div>
<div class="gn_button"><a href="contact.php">Contact</a></div>
</nav>
</header>
<div id="navbar_pointer_box">
<img src="images/navbar_pointer.png" class="navbar_pointer_support" width="40"/>
</div>

<div id="main_body">
.....

Code source CSS :

.gn_button
{
font-size: 26px;
width: 195px;
height:26px;
margin: auto;
float: left;
text-align: center;
margin-top: 2px;
margin-bottom: 4px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color: #888;
}

#globalheader
{
width: 980px;
height: 36px;
margin: auto;
margin-top: 18px;
border-radius: 10px;
padding: 5px;
}

#navbar_pointer_box {width: 980px; height: 10px; margin: auto;}
.navbar_pointer_support {position: absolute; left: 805px;}

#main_body
{
width: 980px;
margin: 10px auto;
border: 1px solid #d7d7d7;
padding: 5px;
word-wrap: break-word;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color: #888;
background-color: white;
}
A voir également:

3 réponses

djosfr Messages postés 1163 Date d'inscription   Statut Membre Dernière intervention   191
 
Bonjour,
Ajoute cette classe
.gn_button a:active{ 
background-image: url('images/logo.png'); 
background-repeat:no-repeat; 
background-position:left; 
}

Il va certainement falloir redimmensionner ton image à 40px de largeur.
Pour placer précisément ta flèche, amuse toit avec la propriété background-position avec des valeurs en pixels.
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position&preval=10px%20200px
CM ECS FSB 222MHz OC, AMD Athlon X2 4450e OC 2.55GHz, 4890 de base, 4Go DDR2 425MHz OC, DD BARRACUDA
1
WebDesignCSS
 
Merci pour vos réponses !

J'avais essayé position:relative avant d'avoir l'idée de créer la boite #navbar_pointer_box. Forcément, ça ne marchait pas car ça calculait la distance par rapport au bord de la fenêtre. Mais avec la boite ça marche parfaitement ! Merci !

@djosfr :
Merci pour la classe .gn_button a:active. Par contre j'ai essayé pour le background-position, mais il ne m'affichait pas la flèche (sauf quand j'ouvrais l'inspecteur web sous Safari). Peut-être est-ce parce qu'il y a déjà un motif de fond ? Peu importe, mon problème est résolu, mais je ne connaissais pas cette propriété. :)
0
Profil bloqué
 
Salut,

Tu as essayé de mettre un "position: relative" au lieu du "position: absolute" ?

-1