Positionnement CSS et flèche de navigation

Fermé
WebDesignCSS - 26 mai 2012 à 16:32
 WebDesignCSS - 26 mai 2012 à 20:07
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;
}

3 réponses

djosfr Messages postés 1163 Date d'inscription dimanche 30 août 2009 Statut Membre Dernière intervention 22 novembre 2016 191
Modifié par djosfr le 26/05/2012 à 19:08
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
26 mai 2012 à 20:07
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é
26 mai 2012 à 18:35
Salut,

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

-1