Problème navigation CSS/HTML
Résolu
Heskan
Messages postés
39
Statut
Membre
-
telliak Messages postés 4387 Statut Membre -
telliak Messages postés 4387 Statut Membre -
Bonjour,
Récemment, j'ai codé mon site et je voulais faire une navigation, une barre qui prend toute votre écran, et mettre une navigation dedans sans quelle dépasse de l'image en long mais je n'y arrive pas, je vais vous expliquez grâce à cette image: http://www.hostingpics.net/viewer.php?id=522659commentcamarche.png
le rouge c'est là ou apparaît ma navigation
et le violet la ou je voudrais le mettre !
Mon code HTML :
<div id="nav">
<nav>
<ul>
<li><a href=""><h1>Acceuil</a></h1></li>
<li><a href=""><h1>Guides</a></h1></li>
<li><a href=""><h1>Classes</a></h1></li>
</ul>
</nav>
</div>
-----------------------------
(Mon div nav est ma barre)
-----------------------------
Mon code CSS :
#nav
{
background: url('images/nav1.png');
height: 29px;
width: 101.6%;
margin: auto;
margin-top: -2.5%;
margin-left: -1%;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
}
nav
{
display: inline-block;
width: 740px;
text-align: left;
}
nav ul
{
list-style-type: none;
}
nav li
{
display: inline-block;
margin-right: 15px;
}
nav a:hover
{
font-size: 1.3em;
color: #181818;
padding-bottom: 3px solid #760001;
}
Aidez moi s'il vous plait!!
Cordialement
Récemment, j'ai codé mon site et je voulais faire une navigation, une barre qui prend toute votre écran, et mettre une navigation dedans sans quelle dépasse de l'image en long mais je n'y arrive pas, je vais vous expliquez grâce à cette image: http://www.hostingpics.net/viewer.php?id=522659commentcamarche.png
le rouge c'est là ou apparaît ma navigation
et le violet la ou je voudrais le mettre !
Mon code HTML :
<div id="nav">
<nav>
<ul>
<li><a href=""><h1>Acceuil</a></h1></li>
<li><a href=""><h1>Guides</a></h1></li>
<li><a href=""><h1>Classes</a></h1></li>
</ul>
</nav>
</div>
-----------------------------
(Mon div nav est ma barre)
-----------------------------
Mon code CSS :
#nav
{
background: url('images/nav1.png');
height: 29px;
width: 101.6%;
margin: auto;
margin-top: -2.5%;
margin-left: -1%;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
}
nav
{
display: inline-block;
width: 740px;
text-align: left;
}
nav ul
{
list-style-type: none;
}
nav li
{
display: inline-block;
margin-right: 15px;
}
nav a:hover
{
font-size: 1.3em;
color: #181818;
padding-bottom: 3px solid #760001;
}
Aidez moi s'il vous plait!!
Cordialement
A voir également:
- Problème navigation CSS/HTML
- Navigation privée - Guide
- Editeur html - Télécharger - HTML
- Supprimer les données de navigation - Guide
- Simulateur de navigation maritime gratuit - Télécharger - Loisirs créatifs
- Espace en html ✓ - Forum HTML
11 réponses
Si vous ajoutez dans le #nav :
top: 0%;
left: 20%;
et enlevez les margin-top et margin-left
Cordialement
top: 0%;
left: 20%;
et enlevez les margin-top et margin-left
Cordialement
Bonjour,
j'ai fais votre modification:
#nav
{
background: url('images/nav1.png');
height: 29px;
width: 101.6%;
margin: auto;
top: 0%;
left: 20%;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
}
Cela ma juste baisser ma barre de quelque cm de plus.
Cordialement
j'ai fais votre modification:
#nav
{
background: url('images/nav1.png');
height: 29px;
width: 101.6%;
margin: auto;
top: 0%;
left: 20%;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
}
Cela ma juste baisser ma barre de quelque cm de plus.
Cordialement
Enlevez maintenant le padding-top, mettez left: 50%; au lieu de 20%
Le web n'est pas une science exacte ^^
Cordialement
Le web n'est pas une science exacte ^^
Cordialement
Ca m'a juste baisser ma barre encore une fois :/
#nav
{
background: url('images/nav1.png');
height: 29px;
width: 101.6%;
margin: auto;
top: 0%;
left: 50%;
text-align: left;
padding-bottom: 10px;
}
#nav
{
background: url('images/nav1.png');
height: 29px;
width: 101.6%;
margin: auto;
top: 0%;
left: 50%;
text-align: left;
padding-bottom: 10px;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
C'est ... déroutant
Essayez en mettant
top: -20%;
juste pour voir si la barre remonte.
Une autre chose : attention, mais votre code
nav
{
display: inline-block;
width: 740px;
text-align: left;
}
nav ul
{
list-style-type: none;
}
nav li
{
display: inline-block;
margin-right: 15px;
}
nav a:hover
{
font-size: 1.3em;
color: #181818;
padding-bottom: 3px solid #760001;
}
n'a pas de # devant le nav. Ce ne sera pas le même paragraphe qui sera touché
Essayez en mettant
top: -20%;
juste pour voir si la barre remonte.
Une autre chose : attention, mais votre code
nav
{
display: inline-block;
width: 740px;
text-align: left;
}
nav ul
{
list-style-type: none;
}
nav li
{
display: inline-block;
margin-right: 15px;
}
nav a:hover
{
font-size: 1.3em;
color: #181818;
padding-bottom: 3px solid #760001;
}
n'a pas de # devant le nav. Ce ne sera pas le même paragraphe qui sera touché
Que ce soit 0% ou -20% la barre est toujours resté plus en bas, et oui j'ai bien modifié le #nav et non le nav tout court
J'ai fais votre modification:
#nav
{
background: url('images/nav1.png');
height: 29px;
width: 101.6%;
margin: auto;
top: 0%;
left: 50%;
text-align: left;
padding-bottom: 10px;
display: block;
}
Sur le rendu, cela m'a fais aucune modification comparé a celle d'avant, la barre est toujours resté un peu plus basse malheureusement, je ne sais pas d'où vient ce problème.
Cordialement
#nav
{
background: url('images/nav1.png');
height: 29px;
width: 101.6%;
margin: auto;
top: 0%;
left: 50%;
text-align: left;
padding-bottom: 10px;
display: block;
}
Sur le rendu, cela m'a fais aucune modification comparé a celle d'avant, la barre est toujours resté un peu plus basse malheureusement, je ne sais pas d'où vient ce problème.
Cordialement
