Mise en place d un dictionnaire

Mise en place d un dictionnaire - HTML/CSS - Programmation

Marsh Posté le 09-11-2004 à 09:41:29    

Bonjour,
 
Je dois mettre en place, une sorte de mini intranet pour le service.
Il doit contenir des informations classe Alphabetiquement.
Je voulais faire une sorte de menu a droite et a gauche avec des "onglet" comportant l alphabet.
J arrive pas demarrer, j arrive pas mettre en place tous ses onglets.
Avez vous une idee, une fonction adequate, ou quelquechose qui puisse me faire avance ?
 
 :jap:

Reply

Marsh Posté le 09-11-2004 à 09:41:29   

Reply

Marsh Posté le 09-11-2004 à 09:43:00    

question pas kler, mais je dirai d'utiliser les listes

Reply

Marsh Posté le 09-11-2004 à 09:52:15    

une liste utilisée comme un menu (tout ce qu'il y a de plus classique) [:spamafote]
 
Si tu possèdes déjà les connaissances de base en HTML/CSS, tu peux trouver des infos sur l'utilisation des listes chez Listamatic
Sinon, ben tu peux aussi mais tu risques de pas tout comprendre :D


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 09-11-2004 à 09:54:33    

HTML sa va, bien que je suis loin d etre un expert, pour le css faut que je decouvre.
Donc je vais me renseigner sur les listes.
Si j ai bien compris, les listes se font en css ?

Reply

Marsh Posté le 09-11-2004 à 09:56:56    

non, tu crées des listes en html (histoire de faire quelque chose de propre et ordonné)
et ensuite grâce aux CSS tu transformes tes listes en menus
 
genre dans ton html t'auras des listes qui vont s'afficher
/*/*/*

  • A
  • B
  • C

.
.
.

  • Z

*\*\*\
 
Et ensuite dans ton CSS tu dis comment afficher la liste (ajout de fonds, positionnement, ajout d'images, ...)


Message édité par masklinn le 09-11-2004 à 09:58:27

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 09-11-2004 à 09:59:55    

Oui effectivement, en regardant le code de "Listmatic" (que j avais pas fait avant de poster  :ange: ).
C'est tout a fait ce que je cherchais, c'est tres beau et simple.  [:mad_overclocker]  
merci  :jap: , et a bientot avec mes prochains bloquage


Message édité par bubblegum le 09-11-2004 à 10:00:33
Reply

Marsh Posté le 09-11-2004 à 10:04:29    

ballades toi un peu dans les topics de la sous cat html, tu devrais trouver plein de liens vers des tutos/sites HTML/CSS, ca devrait te permettre de résoudre la majorité de tes problèmes ;)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 09-11-2004 à 10:08:53    

merci ;)

Reply

Marsh Posté le 09-11-2004 à 15:10:11    

Donc voila j'ai bien reussi a faire ma liste en CSS, je modifie les proprietes et tout,c'est vraiment bien.
La je m arrete sur un autre probleme, pas forcement bloquant, mais juste penible.
Voila je voulais donc faire une marge sur le cote gauche de ma page, pour y inclure la liste.
Le probleme c'est que quand on fait une frame, dreamweaver, veut l enregistrer a part, ce qui est pas top.
Jai donc fait un tableau de deux colonne ( 20% - 80% ), pour simuler ma marge.
Y a t il un autre moyen plus propre de faire cela ?

Reply

Marsh Posté le 09-11-2004 à 15:19:03    

pourquoi utiliser une frame ou faire un tableau?
 
en CSS il y a la propriété "margin" :D (enfin ici tu utiliserais plutôt la sous propriété "margin-left" )


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 09-11-2004 à 15:19:03   

Reply

Marsh Posté le 09-11-2004 à 15:23:45    

ok .....
Je vais de mettre sa en place
Merci

Reply

Marsh Posté le 09-11-2004 à 16:00:59    

Je viens de tester, mais le probleme, c'est que si je tape du texte a cote, il le gere tres mal.

Reply

Marsh Posté le 09-11-2004 à 16:18:04    

?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 09-11-2004 à 16:47:08    

enfait ce qu il me faudrait, c'est une donc une marge sur la gauche avec ma liste, separer par une barre vertical, et a cote du text dont je peux gerer la mise en forme.
Car actuelllment quand je met du text a cote de ma liste, bah le retour de ligne se fesait entre deux "menu" de ma liste.
a savoir que j ai bien mis un margin-left.
 
exemple :  
 
 - categorie 1
 - categorie 2    ghhfhhfhf
hfhfghfhhfh
 - categorie 3


Message édité par bubblegum le 09-11-2004 à 16:50:13
Reply

Marsh Posté le 09-11-2004 à 17:02:59    

On ma parle de iframe ... C'est bien ?

Reply

Marsh Posté le 09-11-2004 à 17:11:47    

Code :
  1. <!DOCTYPE html
  2.      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  5.     <head>
  6.         <title>Test page</title>
  7.         <style type="text/css">
  8.         <!-- /*a utiliser si on utilise pas des feuilles de style externes
  9.             pour empecher les vieux navigateurs (NS 4) de tenter d'interpreter
  10.             les CSS*/
  11.            
  12.             ul {
  13.                 float: left; /* fait sortir la liste du flux (flow) et la
  14.                                 colle a gauche de la page */
  15.                 list-style-type: none; /* evite les * des listes
  16.                                         on peut en profiter pour mettre des
  17.                                         images a la place*/
  18.                 border-right: solid black; /* la barre verticale */
  19.                 width: 80px; /* La taille du menu (en largeur) */
  20.                 margin-left: 0px; /* ie = boulet, il comprend pas le padding
  21.                                     alors il fout des margins */
  22.                 padding-left: 0px; /* les ul ont une partie vide a gauche
  23.                                     pour mettre les signes de listes ou
  24.                                     des images, on en a pas besoin ici */
  25.             }
  26.             .text {
  27.                 margin-left: 100px; /* on decale de 80px pour le menu, + 20px
  28.                                         pour faire joli (que le texte
  29.                                         ne soit pas colle a la separation) */
  30.                 /* Attention: si on ne met pas de marge (ou une marge < 80px)
  31.                 le texte se retrouve colle contre le menu, pas beau.
  32.                 En plus l'implementation actuelle permet d'utiliser
  33.                 position: fixed (en conservant un float:left, parce que ie ne
  34.                 gere pas position: fixed donc il lui faut autre chose
  35.                 a la place */
  36.             }
  37.         -->
  38.         </style>
  39.     </head>
  40.     <body>
  41.         <!-- ici on met la liste qui compose le menu.
  42.             c'est une liste tout ce qu'il y a de plus normale, avec des liens
  43.             a l'interieur et tout
  44.         -->       
  45.         <ul>
  46.             <li><a href="#" title="lien">element_1</a></li>
  47.             <li><a href="#" title="lien">element_2</a></li>
  48.             <li><a href="#" title="lien">element_3</a></li>
  49.             <li><a href="#" title="lien">...</a></li>
  50.             <li><a href="#" title="lien">...</a></li>
  51.             <li><a href="#" title="lien">element_n</a></li>
  52.         </ul>
  53.         <!-- la on met le texte, j'ai donne une classe spécifique pour la marge
  54.             de cette maniere il est possible de creer plein de zones de texte
  55.             differentes, en leur donnant la classe "text" elles auront la marge
  56.             qui va bien automatiquement
  57.         -->
  58.         <div class="text">
  59.             <h1>un_titre_moisi</h1>
  60.             <p>
  61.                 blablablablabla
  62.                 blablablablabla
  63.             </p>
  64.             <p>
  65.                 blibliblibli
  66.                 blibliblibliblib
  67.                 blibli
  68.                 bliblibliblibli
  69.             </p>
  70.         </div>
  71.     </body>
  72. </html>


Citation :

On ma parle de iframe ... C'est bien ?


Les iframes, ce sont des frames au milieu des pages (souvent dans des cases de tableaux)
et les frames, c'est mal (sauf dans quelques rares cas)


Message édité par masklinn le 09-11-2004 à 17:13:14

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 09-11-2004 à 17:23:09    

Bah ecoute, ca me parait excellent !
Malheureusement je quitte mont af, donc je verais demain.

Reply

Marsh Posté le 10-11-2004 à 20:58:29    

J'ai un probleme, avec mon code css.
J arrive pas a centrer mon menu.
pourtant j ai bien suivi les principes de padding.
 
Code HTML :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Document sans titre</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <link href="ListeCSS.css" rel="stylesheet" type="text/css">
  7. </head>
  9. <body>
  10. <p align="center"><font color="#003366" size="4" face="Arial, Helvetica, sans-serif"><strong><em>Menu
  11.   </em></strong></font></p>
  12. <div id="navcontainer" >
  13. <ul id="navlist">
  14.     <li id="active"> <a href="#" id="current">-A-</a></li>
  15.     <li> <a href="#">-B-</a></li>
  16.     <li> <a href="#">-C-</a></li>
  17.     <li> <a href="#">-D-</a></li>
  18.     <li> <a href="#">-E-</a></li>
  19.   </ul>
  20. </div>
  23. </body>
  24. </html>


 
Code CSS :

Code :
  1. /* Menu */
  2. #navcontainer { width: 200px; }
  4. #navcontainer ul
  5. {
  6. margin-left: 0;
  7. padding: 0;
  8. list-style-type: none;
  9. text-align: center;
  10. font-family: Arial, Helvetica, sans-serif;
  11. }
  13. #navcontainer a
  14. {
  15. display: block;
  16. width: 30%;
  17. margin-left: auto;
  18. margin-right: auto;
  19. background-color: #036;
  20. border-bottom: 1px solid #eee;
  21. }
  23. #navcontainer a:link, #navlist a:visited
  24. {
  25. color: #EEE;
  26. text-align: center;
  27. text-decoration: none;
  28. }
  30. #navcontainer a:hover
  31. {
  32. background-color: #369;
  33. color: #fff;
  34. }


Message édité par bubblegum le 10-11-2004 à 21:07:39
Reply

Marsh Posté le 10-11-2004 à 21:43:35    

Citation :

<p align="center"><font color="#003366" size="4" face="Arial, Helvetica, sans-serif"><strong><em>Menu  
  </em></strong></font></p>


mais c'est quoi ce gros kaka là?
et je vois pas ou est le probleme dans le rendu de ton truc, tu veux obtenir quoi?


Message édité par masklinn le 10-11-2004 à 21:47:00

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 10-11-2004 à 21:44:57    

J'ai voulu mettre le mot "menu" au dessus de la liste centré et en bleu.
C'est pas bon ?

Reply

Marsh Posté le 10-11-2004 à 21:48:15    

Bien sur que non c'est pas bon [:spamafote]
Un titre, tu utilises les balises <h1> à <h6> pour les indiquer, et ensuite ton style tu l'appliques depuis ton CSS


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 10-11-2004 à 22:58:47    

J'avance, mais, mais maintenant, je suis bloque avec une image que j'ai faite, mais le probleme, c'est qu elle est trop petite.
Y a t-il un moyen de mettre l image a la resolution de la page ?
 
Code HTML

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Document sans titre</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <link href="ListeCSS.css" rel="stylesheet" type="text/css">
  7. <style>
  8. H1 {
  9. color: #004080;
  10. text-align: center;
  11. font-family: Arial, Helvetica, sans-serif;
  12. }
  13. </style>
  14. <H1>menu</h1>
  15. </head>
  18. <body >
  19. <div id="navcontainer" >
  20. <ul id="navlist">
  21.     <li id="active"> <a href="#" id="current">-A-</a></li>
  22.     <li> <a href="#">-B-</a></li>
  23.     <li> <a href="#">-C-</a></li>
  24.     <li> <a href="#">-D-</a></li>
  25.     <li> <a href="#">-E-</a></li>
  26.   </ul>
  27. </div>
  30. </body>
  31. </html>


 
Code CSS

Code :
  1. /* Menu */
  2. #navcontainer { width: 200px; }
  4. #navcontainer ul
  5. {
  6. margin-left: 0;
  7. padding-left: 0;
  8. list-style-type: none;
  9. font-family: Arial, Helvetica, sans-serif;
  10. }
  12. #navcontainer a
  13. {
  14. display: block;
  15. padding: 3px;
  16. width: 160px;
  17. background-color: #036;
  18. border-bottom: 1px solid #eee;
  19. }
  21. #navcontainer a:link, #navlist a:visited
  22. {
  23. color: #EEE;
  24. text-decoration: none;
  25. }
  27. #navcontainer a:hover
  28. {
  29. background-color: #369;
  30. color: #fff;
  31. }
  33. BODY{
  34. background-image : url("Frame.png" );
  35. background-repeat: no-repeat;
  36. background-color:black
  37. }

Reply

Marsh Posté le 10-11-2004 à 23:16:16    

heuu
pas a ma connaissance non


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 10-11-2004 à 23:20:06    

zut  :(


Message édité par bubblegum le 10-11-2004 à 23:23:55
Reply

Marsh Posté le 11-11-2004 à 12:44:18    

Sinon j'ai un autre pti probleme.
Je fais un menu horizontal.
le probleme, c'est que sa ne prend pas exactement toute la largeur de la page.
J'ai tenter le margin: left; mais sa donne rien.
 

Code :
  1. H1 {
  2. color: #FFFFFF;
  3. width: 100%;
  4. padding-top: 5px;
  5. padding-bottom: 5px;
  6. padding-right: 10px;
  7. margin-top: 40px;
  8. margin-left: 0px;
  9. text-align: right;
  10. font-size : 11pt;
  11. font-family: Arial;
  12. font-weight: bold;
  13. background-color: #004080;
  14. }

Reply

Marsh Posté le 11-11-2004 à 12:57:16    

mais!
POURQUOI LE H1 EST DANS LE HEAD???
 
<h1> c'est du contenu, ca se fout dans le body
et

Citation :

<li id="active"> <a href="#" id="current">


j'ai un peu beaucoup de mal à en voir l'intérêt


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 11-11-2004 à 13:20:19    

Masklinn a écrit :

mais!
POURQUOI LE H1 EST DANS LE HEAD???
 
<h1> c'est du contenu, ca se fout dans le body
et

Citation :

<li id="active"> <a href="#" id="current">


j'ai un peu beaucoup de mal à en voir l'intérêt


 
Pour le H1, on ma conseiller de le mettre dans le HEAD, d'ou mon erreur.
 
L interet de mon menu, c'est que je veux une bande bleu qui fasse toute la largeur de la page, ou j'y inclu mon menu horizontalement.
Mais peut etre que je mis prend mal ?
 
La ligne  

Citation :

<li id="active"> <a href="#" id="current">


colle bien la bande sur le cote droit, mais ya toujours un petit retrait au niveau de la gauche.

Reply

Marsh Posté le 11-11-2004 à 13:21:58    

BuBBleGuM a écrit :

Pour le H1, on ma conseiller de le mettre dans le HEAD, d'ou mon erreur.


Qui a osé dire ça? [:rofl]

Reply

Marsh Posté le 11-11-2004 à 13:23:25    

BuBBleGuM a écrit :

Pour le H1, on ma conseiller de le mettre dans le HEAD, d'ou mon erreur.


trucide sur le champ la personne l'imbécile qui t'a dit ca :pfff:  
mais vraiment hein, à coup de pelle et tout :fou:  
non parce qu'une remarque d'une stupidité pareille, hein [:mmmfff]  
 
 
Pour le reste, j'ai jamais essayé de faire des trucs pareils donc je peux pas vraiment te conseiller
va voir du côté de Listamatic ;)
(le menu listamatic ou les demos de menus horizontaux)


Message édité par masklinn le 11-11-2004 à 13:25:27

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 18-11-2004 à 16:34:10    

Bon j'ai avance dans mon petit site qui sert de dictionnaire.
J ensuis toujours a la mise en page.
Pour expliquer grossierement, j'ai cree une "frame" en haut, en bas, a gauche, et au centre.
Tout ceci, contenu, dans un fichier html. et un CSS.
Il faut savoir que dans la "frame de gauche sera positionner une liste en CSS ( dans un deuxieme fichier).
Mon probleme, etant que une barre de scrolling est toujours visible, sur la droite, ainsi qu'une deuxieme pour la parti centrale.
Celle de la partie central est volontaire, mais l'autre non, et je n'arrive pas a la faire enlever.
J expose le code de mes fichiers.
 
HTML :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Document sans titre</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <link href="frame.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <title>mon site</title>
  10. </head>
  12. <body>
  13. <div class="topframe">blablabla</div>
  14. <div class="leftframe"></div>
  15. <div class="centerframe">
  16.   <p>blablabla</p>
  17.   <p>bla</p>
  18.   <p>bla</p>
  19.   <p>bla</p>
  20.   <p>bla</p>
  21.   <p>bla</p>
  22.   <p>bla</p>
  23.   <p>&nbsp;</p>
  24. </div>
  25. <div class="bottomframe"></div>
  26. </body>
  27. </html>


 
CSS:

Code :
  1. /* CSS Document height totale 629px*/
  2. body {
  3. margin: 0;/* sans marges, la page sera collée aux bords */
  4. font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
  5. font-size: 48px; /* on définit la taille de police de base dans la page */
  6. }
  8. .topframe {
  9. background-color: #06C;
  10. width: auto; /*largeur*/
  11. height: 60px; /*hauteur*/
  12. }
  14. .leftframe {
  15. position: absolute;
  16. left: 0; /* on place le bloc gauche à gauche en position absolue */
  17. background-color: #CC3300;
  18. width: 100px;
  19. height: 529px;
  20. }
  22. .centerframe {
  23. margin-left: 100px;
  24. width: auto;
  25. height: 529px;
  26. /*background-color: #33FF66;*/
  27. background-image: url('frame.png');
  28. overflow: auto;
  29. }
  31. .bottomframe {
  32. width: auto;
  33. height: 30px;
  34. background-color: #06C;
  35. color: #fff;
  36. font-size: 12px;
  37. padding: 10px;
  38. }


 
Voila pour les codes, et je penses pas que ce codes soit super optimiser, donc si vous avez aussi des conseils, je suis tout ouie.
 
 :jap:

Reply

Marsh Posté le 19-11-2004 à 10:01:26    

up

Reply

Marsh Posté le 19-11-2004 à 16:24:57    

J'ai resolu mon problem pour le scrolling.
Maintenant viens un autre probleme.
J'ai une liste css avec un navcontainer pour un menu vertical, et un autre fichier css avec des navcontainer pour un menu horizontal.
Les deux fichier css sont bien linker sur l index.html.
Mon probleme, c'est apparement, les menu recoivent la meme mise en forme, on dirait qu il ne differencie pas les deux fichier CSS.
Pouvez-vous me guider la dessus.
merci

Reply

Marsh Posté le 19-11-2004 à 17:54:46    

Quand tu link 2 fichiers CSS, il les fusionne (c'est comme si t'en avais un seul avec le contenu des deux), et ensuite il applique l'ordre normal, c'est à dire que c'est la dernière définition qui a la précédence.
 
Donc pour différencier tes menus il faut bien penser à donner des classes (ou des ids) différents, et ensuite dans tes fichiers CSS tu utilises ces classes/id
 
genre dans le premier fichier

Code :
  1. ul#menuvertical {
  2.     /* blabla */
  3. }


 
et dans le 2e

Code :
  1. ul#menuhorizontal {
  2.     /* blabla */
  3. }


 
et ensuite dans ton source tu auras

Code :
  1. <ul id='menuvertical>
  2.     <li>...</li>
  3.     <li>...</li>
  4.     <li>...</li>
  5. </ul>
  6. <ul id='menuhorizontal'>
  7.     <li>...</li>
  8.     <li>...</li>
  9.     <li>...</li>
  10. </ul>


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-11-2004 à 18:54:52    

sinon c'est pas trop degeux le code citer un peu plus haut ?

Reply

Marsh Posté le 19-11-2004 à 19:00:47    

ben a part le  

Code :
  1. </head>
  2. <title>...</title>
  3. </head>


qu'il suffit de la passer au validateur pour qu'il t'envoier chier (à raison)
 je vois rien de monstrueux
 
la taille fixe (en vertical) du centre du document, peut être, ca va faire bizarre sur de hautes résolutions
 
ah si, quand même
margin: 0;
et left: 0;
TOUJOURS préciser l'unité
le font-size à 48 je trouve ca un peu violent aussi, mais bon si c'est ce qui va pour ta page


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed