Partage

Désepéré pour mon beau menu....

20 juillet 2006 à 15:55:10

Bonjour,

j'ai lu un tutorial et quelques postes mais je n'y arrive pas.
je souhaite faire un menu vertical, pour l'instant je n'arrive qu'à faire "un menu" sous forme de liste "verticale"...bon je sais pas si vous me comprenais mais en gros il n'y a pas les encadrés, les bordures...car dans le tutorial que je lis, il ne précise pas ( ou je ne comprends pas) ou il faut mettre ces balises CSS (je crois)
faut-il les mettres avant <li> ou après, et le <ul> il est ou dans l'histoire

ca ne marche pas, ça me déprime je suis débutante mais sans doute la pire que vous puissiez trouver....

Merci de vos aides

si quelqu'un est courageux et qu'il veut bien m'aider par message privé pour ne pas embéter tout le monde

Merci d'avance à ce dévoué

lastsseldon

20 juillet 2006 à 15:59:11

Effectivement, on ne comprends rien. Un lien vers le tuto serait le bienvenu..

(et puis les messages privés, c'est le mal - on obtient de meilleurs résultats quand toute la communauté donne son avis. Par ailleurs, tu t'es plantée de section :D)

mylena

20 juillet 2006 à 16:04:30

j'ai cru jle retrouverai jamais le tuto...

http://www.siteduzero.com/tuto-3-6812-1-creer-un-menu-vertical-en-jouant-sur-l-affichage-des-liens.html

Si je fais n'importe quoi dites le moi....

merci

erdnaxeli

20 juillet 2006 à 16:07:46

montre nous un peu ton code

mylena

20 juillet 2006 à 16:10:34

Merci beaucoup du temps que vous me consacrez...

<ul id="Accueil">
<li>
#sous_menu{
margin: 0; /* on retire les marges intérieures et extérieures */
padding:0;
width: 20%; /* J'ai mis une largeure pour ne pas prendre toute la largeur de l'écran */
border : solid 1px #a3c0d5; /* on applique des bordures à la balise ul */
border-bottom: none; /* et on retire celle du bas */
}
<a href="http://mylena33.skyblog.com/">Mes vacances</a>
</li>
<li>
<a href="http://mylena77.skyblog.com/">Ma passion : Aquariophilie</a>
</li>
<li>
<a href="http://mylena3377.skyblog.com/">Ma famille</a>
</li>
<li>
<a href="">Mon CV</a>
</li>
<li>
<a href="">Mes amis</a>
</li>
</ul>

Je sens que c'est une catastrophe

erdnaxeli

20 juillet 2006 à 16:14:18

il faut que tu mette ceci

dans la feuille de style css.

Zazou

20 juillet 2006 à 16:15:23

Déjà, tu mélanges 2 langages donc ça ne peut que pas fonctionner. Sépare html et CSS déjà pour commencer, ça marchera sans doute après.

mylena

20 juillet 2006 à 16:19:11

:-), d'accord donc mon problème est bien plus grave que c'que je pensais....

qu'entendez-vous par faire "feuille de style css"

il faut faire plusieurs répertoire réunis dans un gros répertoire?

désolée pour les termes vous devez vous arracher les cheveux...

merci à vous

lastsseldon

20 juillet 2006 à 16:24:07

c.f. da tuto :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>petit menu sympa</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>
</head>
<body>
<ul id="sous_menu">
<li>
<a href="#">C / C++</a>
</li>
<li>
<a href="#">Site web</a>
</li>
<li>
<a href="#">PHP</a>
</li>
<li>
<a href="#">Mapping</a>
</li>
<li>
<a href="#">Vos tutos</a>
</li>
</ul>

</body></html>

Et plus particulierement :

Tout ton css doit etre placé dedans

(le css, en l'occurence, c'est le #sous_menu { ... } ).
EDIT : et puis, hum, un petit détour par les cours de matéo serait le bienvenu si tu ne me comprends pas.

erdnaxeli

20 juillet 2006 à 16:24:38

met le code css dans un fichier que tu appeleras (par exemple) style.css .
Met ensuite entre les balises <head> et </head> de ta page html cet ligne : <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />

EDIT :griller

mick3y

20 juillet 2006 à 16:25:37

Non en fait tu dois avoir un fichier qui se termine par .html (ce sera ta page) et un autre fichier qui se termine avec .css (ce sera ton code css). Il suffit simplement de faire ta page html dans le bloc-note (ou notepad++ etc., peu importe) et que tu l'enregistres en prenant bien soin de mettre .html comme extension. Tu fais exactement pareil pour ton css, tu tapes tout ton code dans le bloc-note et tu l'enregistres en mettant .css comme extension. Tu auras donc deux fichiers : un fichier html (ta page) et un fichier css (ton design).

har1bo

20 juillet 2006 à 16:26:01

Salut

Un bon conseil:lis ces cours:Ici,pas autre part

mylena

20 juillet 2006 à 16:29:30

:-/

<style type="text/css">


<ul id="Accueil">
<li>
#sous_menu{
margin: 0; /* on retire les marges intérieures et extérieures */
padding:0;
width: 20%; /* J'ai mis une largeure pour ne pas prendre toute la largeur de l'écran */
border : solid 1px #a3c0d5; /* on applique des bordures à la balise ul */
border-bottom: none; /* et on retire celle du bas */
}
<a href="http://mylena33.skyblog.com/">Mes vacances</a>
</li>
<li>
<a href="http://mylena77.skyblog.com/">Ma passion : Aquariophilie</a>
</li>
<li>
<a href="http://mylena3377.skyblog.com/">Ma famille</a>
</li>
</ul>
</style>

mick3y

20 juillet 2006 à 16:30:42

Si tu fais comme je t'ai dit, tu pourras mieux comprendre la suite Mylena

mylena

20 juillet 2006 à 16:32:52

Ok j'ai très bien compris ce que tu m'as dis Salvat0, (enfin une partie) mais comment sont-elles liées après ces 2 "feuilles"?
comment sait-il à quel endroit il doit insérer le CSS...

Zazou

20 juillet 2006 à 16:34:46

Pour relier tes 2 fichiers fait comme te l'a dit erdnaxeli

Citation

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />

mylena

20 juillet 2006 à 16:43:09

quelle partie exactement dans les cours de Mateo...car j'avais déjà entammée une logue lecture...je ne sais plus ou je m'étais arrétée

faut-il remplacé des choses entre les guillemets? et par quoi?

merci

Zazou

20 juillet 2006 à 16:48:39

Tu n'as rien à changer... Juste mettre ma citation dans tes balises <head></head> et appeler ta feuille de style style.css

mylena

20 juillet 2006 à 16:53:03

j'ai bien mis cette balise entre mes balises <head> mais ma feuille html... :-/

je lis et relis cque vous m'écrivez et lis et relis cque je fais mais jvois toujours pas....

Extrait de ma page index.html
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="css.css" />
<title>
Mon premier site : Essai
</title>
<style>background-image : URL(file:C:\Documents and Settings\Tison\Bureau\Clé USB\Autre\Personnel\Mon site\JPEG\Pupuce.jpeg)</style>
</head>

Ma page css.css

<style type="text/css">

<ul id="Accueil">
<li>
#sous_menu{
margin: 0; /* on retire les marges intérieures et extérieures */
padding:0;
width: 20%; /* J'ai mis une largeure pour ne pas prendre toute la largeur de l'écran */
border : solid 1px #a3c0d5; /* on applique des bordures à la balise ul */
border-bottom: none; /* et on retire celle du bas */
}
<a href="http://mylena33.skyblog.com/">Mes vacances</a>
</li>
<li>
<a href="http://mylena77.skyblog.com/">Ma passion : Aquariophilie</a>
</li>
<li>
<a href="http://mylena3377.skyblog.com/">Ma famille</a>
</li>
</ul>
</style>

mick3y

20 juillet 2006 à 20:41:37

Oui mais tu t'es trompée pour ton fichier css. Tu ne dois mettre QUE ton code css à l'intérieur. Donc dans ton fichier css.css tu dois mettre :

Etc.

Il ne doit pas y avoir d'html dans ton fichier css. Tu comprends?

jover

20 juillet 2006 à 22:15:40

bah il faut tout d'abords qu'lle commence par lire le cours "officiel" de matheo tout s'clairera

Anonyme

21 juillet 2006 à 14:11:34

Ça devrait mieux marcher comme ça :

css.css

#sous_menu
{
margin: 0; /* on retire les marges intérieures et extérieures */
padding:0;
width: 20%; /* J'ai mis une largeure pour ne pas prendre toute la largeur de l'écran */
border : solid 1px #a3c0d5; /* on applique des bordures à la balise ul */
border-bottom: none; /* et on retire celle du bas */
}

body
{
background-image : URL(file:C:\Documents and Settings\Tison\Bureau\Clé USB\Autre\Personnel\Mon site\JPEG\Pupuce.jpeg); /* Même si tu devrais utiliser un lien relatif et non pas absolu... */
}

ta_page_xhtml.html

<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="css.css" />
<title>
Mon premier site : Essai
</title>
</head>

<body>
<ul id="Accueil">
<li>
<a href="http://mylena33.skyblog.com/">Mes vacances</a>
</li>
<li>
<a href="http://mylena77.skyblog.com/">Ma passion : Aquariophilie</a>
</li>
<li>
<a href="http://mylena3377.skyblog.com/">Ma famille</a>
</li>
</ul>
</body>
</html>

erdnaxeli

21 juillet 2006 à 14:16:29

Plutôt comme ça :
ta_page_xhtml.html

<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="css.css" />
<title>
Mon premier site : Essai
</title>
</head>

<body>
<ul id="sous_menu">
<li>
<a href="http://mylena33.skyblog.com/">Mes vacances</a>
</li>
<li>
<a href="http://mylena77.skyblog.com/">Ma passion : Aquariophilie</a>
</li>
<li>
<a href="http://mylena3377.skyblog.com/">Ma famille</a>
</li>
</ul>
</body>
</html>

Anonyme

21 juillet 2006 à 15:01:37

C'est quoi la différence à part le css en moins ? :-°

Zazou

21 juillet 2006 à 16:38:28

La différence réside dans le nom de l'id o_O

erdnaxeli

21 juillet 2006 à 19:29:49

dans le css il y a

#sous_menu

donc il faut

id="sous_menu"