Problème navigation CSS/HTML

Résolu
Heskan Messages postés 35 Date d'inscription   Statut Membre Dernière intervention   -  
telliak Messages postés 3668 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
A voir également:

11 réponses

BioK03 Messages postés 655 Date d'inscription   Statut Membre Dernière intervention   134
 
Si vous ajoutez dans le #nav :

top: 0%;
left: 20%;

et enlevez les margin-top et margin-left

Cordialement
0
Heskan Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
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
0
BioK03 Messages postés 655 Date d'inscription   Statut Membre Dernière intervention   134
 
Enlevez maintenant le padding-top, mettez left: 50%; au lieu de 20%


Le web n'est pas une science exacte ^^

Cordialement
0
Heskan Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
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;
}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
BioK03 Messages postés 655 Date d'inscription   Statut Membre Dernière intervention   134
 
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é
0
Heskan Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
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
0
BioK03 Messages postés 655 Date d'inscription   Statut Membre Dernière intervention   134
 
Moi et le CSS, j'essaie de vous aider.
Si vous ajoutez
display: block;
dans le #nav ?
0
Heskan Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
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
0
Heskan Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
Peut être que ça viendrait d'un position ou d'un margin?
0
BioK03 Messages postés 655 Date d'inscription   Statut Membre Dernière intervention   134
 
Bonjour,

je n'ai pas pu vous répondre. Vous avez réussi ?

Cordialement
0
telliak Messages postés 3668 Date d'inscription   Statut Membre Dernière intervention   883
 
Salut,
Impossible de te répondre avec ces simples fragments de code.
Le code complet est visible ?
0