Site - barre de navigation avec CSS

Fermé
loloune Messages postés 12 Date d'inscription jeudi 11 mars 2010 Statut Membre Dernière intervention 15 mars 2010 - 12 mars 2010 à 09:48
 chico95 - 15 mars 2010 à 13:28
Bonjour,

Alors pour commencer je ne suis pas calée en création de site internet mais je dois refaire le site de mon travail alors pour me familiariser j'ai essayé un tutoriel pour faire une barre de navigation. Je l'ai reproduis tel qu'il est dit pour me faire un exercice.

Le tuto : http://www.w3.org/Style/Examples/011/firstcss.fr.html

A savoir que j'emploie namo web editor 5.5 (qu'il soit bien ou pas n'est pas la question, je travaille avec ce qu'on me fourni)

Donc à l'étape 4 :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Ma première page avec du style</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>

<body>
[etc.]

Mon logiciel namo ne reconnait pas navbar, qu'est-ce que je peux faire pour que ma barre de navigation se déporte sur la gauche?

Si on peut me l'expliquer simplement histoire que ce ne soit pas du chinois aussi... sorry ^^

Merci d'avance!

20 réponses

rudak Messages postés 587 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 4 juin 2011 46
12 mars 2010 à 09:57
tu peu coller ton menu en haut a gauche de la fenetre comme ca :

ul .navbar 
{ 
     position: absolute; 
     top:0px; 
     left:0px; 
     width: 9em;
} 



dans ton code tu as bien une liste <ul> comme ca a peu pres ?


<ul class='navbar'>
     <li>menu 1 </li>
     <li>menu 2</li>
     <li>menu 3</li>
     etc etc
</ul>
0
loloune Messages postés 12 Date d'inscription jeudi 11 mars 2010 Statut Membre Dernière intervention 15 mars 2010
12 mars 2010 à 10:44
Oui oui j'ai bien ca, tu peux aller regarder le tuto sur le site il est pas très long....
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="reflexions.html">Réflexions</a>
<li><a href="ville.html">Ma ville</a>
<li><a href="liens.html">Liens</a>
</ul>


J'ai essayé comme tu as dit mais ca ne fonctionne pas.

Tu sais dans un éditeur de site il y a des couleurs. Et quand il ne connait pas une saisie il le met d'une couleur différente. La il me reconnait pas la saisie navbar.

Est-ce que namo web editor 5 est trop vieux pour reconnaitre le css? ou alors il lui faut un nom à lui?
0
rudak Messages postés 587 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 4 juin 2011 46
12 mars 2010 à 10:50
ah oui ok j'avai pas fait gaffe a ton lien pour le coller a gauche vire le padding left
remplace le par ca :


padding-left:0px;
0
loloune Messages postés 12 Date d'inscription jeudi 11 mars 2010 Statut Membre Dernière intervention 15 mars 2010
12 mars 2010 à 10:56
J'ai mis ca mais ca ne change rien...

J'ai toujours le problème du navbar. Tu sais y a des couleurs sur l'editeur. Et quand il ne reconnait pas une saisie il a sa couleur. La le navbar il est inconnu pour lui.

C'est namo web editor 5 qui est trop vieux? ou il lui faut un nom à lui pour qu'il comprenne?
0

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

Posez votre question
rudak Messages postés 587 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 4 juin 2011 46
12 mars 2010 à 10:57
qu'appelle tu le navbar ? tu veux parler de la liste ? <ul>
0
loloune Messages postés 12 Date d'inscription jeudi 11 mars 2010 Statut Membre Dernière intervention 15 mars 2010
12 mars 2010 à 11:00
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }

la combinaison la, ce que j'ai mis en gras dans le premier message. c'est justement ca qu'il ne reconnait pas...
0
rudak Messages postés 587 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 4 juin 2011 46
12 mars 2010 à 11:09
ecri le comme je te l'ai ecri dans ma réponse...

ul .navbar
{
position: absolute;
top:0px;
left:0px;
width: 9em;
}
0
loloune Messages postés 12 Date d'inscription jeudi 11 mars 2010 Statut Membre Dernière intervention 15 mars 2010
12 mars 2010 à 11:17
ca ne fonctionne pas le texte ne bouge pas. j'ai meme enregistrer et rouvert la page...
0
rudak Messages postés 587 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 4 juin 2011 46
12 mars 2010 à 11:25
donne moi l'url stp que je verifie ta source directement
0
loloune Messages postés 12 Date d'inscription jeudi 11 mars 2010 Statut Membre Dernière intervention 15 mars 2010
12 mars 2010 à 11:35
ha mais ce n'est pas sur le serveur c juste sur namo. ou alors je comprends pas bien
0
rudak Messages postés 587 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 4 juin 2011 46
12 mars 2010 à 11:41
bah alors colle toute ta source jvai la coller dans dream weaver j'y verrai plus clair :)
0
loloune Messages postés 12 Date d'inscription jeudi 11 mars 2010 Statut Membre Dernière intervention 15 mars 2010
12 mars 2010 à 13:00
ca envoie ou pas bon sang!!!
0
loloune Messages postés 12 Date d'inscription jeudi 11 mars 2010 Statut Membre Dernière intervention 15 mars 2010
12 mars 2010 à 13:27
je peux plus envoyé de message ou quoi
0
loloune Messages postés 12 Date d'inscription jeudi 11 mars 2010 Statut Membre Dernière intervention 15 mars 2010
12 mars 2010 à 13:28
<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Ma premire page avec du style</title>
<meta name="GENERATOR" content="Namo WebEditor v5.0">
<meta name="description" content="Document vierge sans aucun style">
<style type="text/css">
body {
paddig-left:1px;
font-family: Georgia, arial;
color: #3cb371;
background-color: #ff6600 }
ul .navbar
{
position: absolute;
top:0px;
left:0px;
width: 9em;
} h1 {
font-family: Helvetica, geneva, arial }
</style>
</head>
<body>

<!-- menu de navigation du site -->
<ul class:"navbar">
<li><a href="index.html">Home page</a></li>
<li><a href="reflexions.html">Réflexions</a></li>
<li><a href="ville.html">Ma ville</a></li>
<li><a href="liens.html">Liens</a></li>
</ul>

<!-- contenu principal -->
<h1>Ma premiere page avec du style</h1>
<p>Bienvenue sur ma page av du style!

<p>Il lui manque des images, mais au moins, elle a du style. Et elle a des liens,…

<p>Je devrais étayer, mais je ne sais encore.</p>

<!-- Signer et dater la page, c'est une question de politesse! -->
<adresse> Fait le 11 mars 2010<br>
par moi.</adresse>
</body>
</html>
0
rudak Messages postés 587 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 4 juin 2011 46
12 mars 2010 à 14:15
remplacer
<ul class:"navbar"> 

par
<ul class="navbar"> 
0
loloune Messages postés 12 Date d'inscription jeudi 11 mars 2010 Statut Membre Dernière intervention 15 mars 2010
12 mars 2010 à 14:23
j'ai changé ca mais ne me règle pas le problème du code css de navbar toujours au même endroit...
0
rudak Messages postés 587 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 4 juin 2011 46
12 mars 2010 à 14:33
voila la partie du css qui place ton menu dont la classe est navbar a 0pixel du haut et 0pixel de gauche


ul.navbar
{
position: absolute;
top:0px;
left:0px;

width: 9em;
}

modifie les données pour le place ou tu veu
si tu ne veu pas le placer en absolute il faut rien mettre et voila il sera a l'endoit ou il est dans ton html

ul.navbar
{

}
0
loloune Messages postés 12 Date d'inscription jeudi 11 mars 2010 Statut Membre Dernière intervention 15 mars 2010
12 mars 2010 à 16:43
Oui sauf que moi dans mon appercu le texte reste en haut et le but est bien qu'il soit à gauche... Comme je dis c'est le navbar qui veut pas fonctionner
0
loloune Messages postés 12 Date d'inscription jeudi 11 mars 2010 Statut Membre Dernière intervention 15 mars 2010
15 mars 2010 à 09:30
alors qui peut m'aider???
0
essaye d'enlever le ul dans ul.navbar

OU

essaye de remplacer class="navbar" par id="navbar" et donc :

ul.navbar
{
position: absolute;
top:0px;
left:0px;
width: 9em;
}

par

ul #navbar
{
position: absolute;
top:0px;
left:0px;
width: 9em;
}

OU

.navbar
{
float:left;
}
0