Mise en place d un dictionnaire

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Mise en place d un dictionnaire

bubblegum

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:

Publicité

Profil supprimé

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

masklinn

í dag viðrar vel til loftárása

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

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r

bubblegum

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 ?

masklinn

í dag viðrar vel til loftárása

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
/*/*/*

.
.
.

*\*\*\

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

bubblegum

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

masklinn

í dag viðrar vel til loftárása

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

bubblegum

merci

bubblegum

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 ?

masklinn

í dag viðrar vel til loftárása

pourquoi utiliser une frame ou faire un tableau?

en CSS il y a la propriété "margin" (enfin ici tu utiliserais plutôt la sous propriété "margin-left" )

Publicité

bubblegum

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

bubblegum

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

masklinn

í dag viðrar vel til loftárása

bubblegum

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

bubblegum

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

masklinn

í dag viðrar vel til loftárása

Code :

<!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" lang="fr">
<head>
<title>Test page</title>
<style type="text/css">
<!-- /*a utiliser si on utilise pas des feuilles de style externes
pour empecher les vieux navigateurs (NS 4) de tenter d'interpreter
les CSS*/
ul {
float: left; /* fait sortir la liste du flux (flow) et la
colle a gauche de la page */
list-style-type: none; /* evite les * des listes
on peut en profiter pour mettre des
images a la place*/
border-right: solid black; /* la barre verticale */
width: 80px; /* La taille du menu (en largeur) */
margin-left: 0px; /* ie = boulet, il comprend pas le padding
alors il fout des margins */
padding-left: 0px; /* les ul ont une partie vide a gauche
pour mettre les signes de listes ou
des images, on en a pas besoin ici */
}
.text {
margin-left: 100px; /* on decale de 80px pour le menu, + 20px
pour faire joli (que le texte
ne soit pas colle a la separation) */
/* Attention: si on ne met pas de marge (ou une marge < 80px)
le texte se retrouve colle contre le menu, pas beau.
En plus l'implementation actuelle permet d'utiliser
position: fixed (en conservant un float:left, parce que ie ne
gere pas position: fixed donc il lui faut autre chose
a la place */
}
-->
</style>
</head>
<body>
<!-- ici on met la liste qui compose le menu.
c'est une liste tout ce qu'il y a de plus normale, avec des liens
a l'interieur et tout
-->
<ul>
<li><a href="#" title="lien">element_1</a></li>
<li><a href="#" title="lien">element_2</a></li>
<li><a href="#" title="lien">element_3</a></li>
<li><a href="#" title="lien">...</a></li>
<li><a href="#" title="lien">...</a></li>
<li><a href="#" title="lien">element_n</a></li>
</ul>
<!-- la on met le texte, j'ai donne une classe spécifique pour la marge
de cette maniere il est possible de creer plein de zones de texte
differentes, en leur donnant la classe "text" elles auront la marge
qui va bien automatiquement
-->
<div class="text">
<h1>un_titre_moisi</h1>
<p>
blablablablabla
blablablablabla
</p>
<p>
blibliblibli
blibliblibliblib
blibli
bliblibliblibli
</p>
</div>
</body>
</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

bubblegum

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

bubblegum

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 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="ListeCSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<p align="center"><font color="#003366" size="4" face="Arial, Helvetica, sans-serif"><strong><em>Menu
</em></strong></font></p>
<div id="navcontainer" >
<ul id="navlist">
<li id="active"> <a href="#" id="current">-A-</a></li>
<li> <a href="#">-B-</a></li>
<li> <a href="#">-C-</a></li>
<li> <a href="#">-D-</a></li>
<li> <a href="#">-E-</a></li>
</ul>
</div>
</body>
</html>

Code CSS :

Code :

/* Menu */
#navcontainer { width: 200px; }
#navcontainer ul
{
margin-left: 0;
padding: 0;
list-style-type: none;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
width: 30%;
margin-left: auto;
margin-right: auto;
background-color: #036;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-align: center;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}

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

masklinn

í dag viðrar vel til loftárása

Citation :

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

bubblegum

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

masklinn

í dag viðrar vel til loftárása

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

bubblegum

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 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="ListeCSS.css" rel="stylesheet" type="text/css">
<style>
H1 {
color: #004080;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<H1>menu</h1>
</head>
<body >
<div id="navcontainer" >
<ul id="navlist">
<li id="active"> <a href="#" id="current">-A-</a></li>
<li> <a href="#">-B-</a></li>
<li> <a href="#">-C-</a></li>
<li> <a href="#">-D-</a></li>
<li> <a href="#">-E-</a></li>
</ul>
</div>
</body>
</html>

Code CSS

Code :

/* Menu */
#navcontainer { width: 200px; }
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
BODY{
background-image : url("Frame.png" );
background-repeat: no-repeat;
background-color:black
}

masklinn

í dag viðrar vel til loftárása

heuu
pas a ma connaissance non

bubblegum

zut

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

bubblegum

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 :

H1 {
color: #FFFFFF;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 10px;
margin-top: 40px;
margin-left: 0px;
text-align: right;
font-size : 11pt;
font-family: Arial;
font-weight: bold;
background-color: #004080;
}

masklinn

í dag viðrar vel til loftárása

mais!
POURQUOI LE H1 EST DANS LE HEAD???

<h1> c'est du contenu, ca se fout dans le body
et

Citation :

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

bubblegum

Masklinn a écrit :

mais!
POURQUOI LE H1 EST DANS LE HEAD???

<h1> c'est du contenu, ca se fout dans le body
et

Citation :

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 :

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

Ayuget

R.oger

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]

masklinn

í dag viðrar vel til loftárása

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

bubblegum

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 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="frame.css" rel="stylesheet" type="text/css">
</head>
<title>mon site</title>
</head>
<body>
<div class="topframe">blablabla</div>
<div class="leftframe"></div>
<div class="centerframe">
<p>blablabla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p> </p>
</div>
<div class="bottomframe"></div>
</body>
</html>

CSS:

Code :

/* CSS Document height totale 629px*/
body {
margin: 0;/* sans marges, la page sera collée aux bords */
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
font-size: 48px; /* on définit la taille de police de base dans la page */
}
.topframe {
background-color: #06C;
width: auto; /*largeur*/
height: 60px; /*hauteur*/
}
.leftframe {
position: absolute;
left: 0; /* on place le bloc gauche à gauche en position absolue */
background-color: #CC3300;
width: 100px;
height: 529px;
}
.centerframe {
margin-left: 100px;
width: auto;
height: 529px;
/*background-color: #33FF66;*/
background-image: url('frame.png');
overflow: auto;
}
.bottomframe {
width: auto;
height: 30px;
background-color: #06C;
color: #fff;
font-size: 12px;
padding: 10px;
}

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:

bubblegum

bubblegum

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

masklinn

í dag viðrar vel til loftárása

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 :

ul#menuvertical {
/* blabla */
}

et dans le 2e

Code :

ul#menuhorizontal {
/* blabla */
}

et ensuite dans ton source tu auras

Code :

<ul id='menuvertical>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<ul id='menuhorizontal'>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

bubblegum

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

masklinn

í dag viðrar vel til loftárása

ben a part le

Code :

</head>
<title>...</title>
</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

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

Mise en place d un dictionnaire

Sujets relatifs
Creation d'un outil de mise à jour d'un site	Creer un outil de mise à jour
Help : Mise En Page	Mise à jour des fichier dans les makefiles
Mise en forme d'un date	Mise en place de wamp5 en intra et attribuer un url...
[CSS] Mise ne forme des liens dans une class ?	Mise en forme d'un texte saisie avec HTML
que veut dire "->" à la place du "=" ?
Plus de sujets relatifs à : Mise en place d un dictionnaire

Page générée en 0.136 secondes