Problème navigation CSS/HTML
Résolu
Heskan
Messages postés
39
Statut
Membre
-
telliak Messages postés 3652 Date d'inscription Statut Membre Dernière intervention -
telliak Messages postés 3652 Date d'inscription Statut Membre Dernière intervention -
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
11 réponses
-
Si vous ajoutez dans le #nav :
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 -
Enlevez maintenant le padding-top, mettez left: 50%; au lieu de 20%
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;
} -
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é -
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
-
Moi et le CSS, j'essaie de vous aider.
Si vous ajoutez
display: block;
dans le #nav ? -
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 -
-
Bonjour,
je n'ai pas pu vous répondre. Vous avez réussi ?
Cordialement -
Salut,
Impossible de te répondre avec ces simples fragments de code.
Le code complet est visible ?
