Positionnement CSS et flèche de navigation
WebDesignCSS
-
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;
}
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:
- Positionnement CSS et flèche de navigation
- Navigation privée - Guide
- Supprimer les données de navigation - Guide
- Simulateur de navigation maritime gratuit - Télécharger - Loisirs créatifs
- Exemple test de positionnement greta - Forum Windows
- Logiciel positionnement gratuit - Guide
3 réponses
Bonjour,
Ajoute cette classe
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
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
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é. :)
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é. :)