> Tous les forumsForum des Webmasters

 Plusieurs menu dans une même pageSujet résolu
Statut du sujet : RESOLU Imprimer
 @urore
  Posté le 15/11/2007 @ 11:46  
 Petite astucienne

220 Messages

Bonjour,

Je suis en licence pro atc et j'ai un tp de html à faire. J'ai jamais rien fait de tou ça.

Je dois refaire une page html avec plusieurs menu dans une même page.

Comment je dois écrire le code html pour ke ça face des liste bien propre avec des puces comme ça : >

Le prof est nul il explique pour ceux qui savent déjà.

Aidez moi SVP

 Afficher le profil de @urore Envoyer un message privé à @urore
 
 
Publicité
 y.bli  Posté le 15/11/2007 à 12:27  
Astucien

3864 Messages

Bonjour,

Quels types de menus, verticaux, horizontaux, avec des images, des cases,.... où dans la page, à droite, au milieu, l'un en dessous de l'autre ?

@+



Modifié par y.bli le 15/11/2007 12:28
Afficher le profil de y.bli Voir la configuration de y.bliEnvoyer un message privé à y.bli
 Revenir en haut de la page
 @urore  Posté le 15/11/2007 à 13:12  
Petite astucienne

220 Messages

Il faut refaire ce site en fait :

http://www.quadrissimo.com/

Donc j'ai refait tout le cadre noir et le brun, j'ai intégré les cube de couleurs avec Dreamweaver mais il me manque le menu dans chaque cube.

Merci d'avance

Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
 telliak  Posté le 15/11/2007 à 14:32  
Astucien


1070 Messages
@urore a écrit :

Il faut refaire ce site en fait :

http://www.quadrissimo.com/

Donc j'ai refait tout le cadre noir et le brun, j'ai intégré les cube de couleurs avec Dreamweaver mais il me manque le menu dans chaque cube.

Merci d'avance


Euh, si t'affiches le code source du dit site ?

Afficher le profil de telliak Voir la configuration de telliakEnvoyer un message privé à telliak
 Revenir en haut de la page
 @urore  Posté le 15/11/2007 à 14:48  
Petite astucienne

220 Messages

Oui j'y ai pensé mais c'est un tp noté donc interdiction de tricher tu vois.

J'ai regardé le code mais ça m'a pas apporté de réponse vu que c'est noté et que le prof va s'appercevoir si on a triché ou pas !

Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
 y.bli  Posté le 15/11/2007 à 15:09  
Astucien

3864 Messages

Re,

Je comprends pas trop le problème.

En prenant le code HTML et le code CSS de l'adresse que tu indiques, on obtient bien ta page et les menus sont actifs, qu'est-ce que tu veux faire d'autre ?

D'ailleurs je ne vois pas pourquoi tu prends Dreamweaver, il est préférable de coder directement. Tes cubes sont des DIV placés côte à côte avec pour chacun une image en background et les menus à l'intérieur

Par exemple, le premier cube avec le CSS "petitsformats" :

<div id="petitsformats" title="Atelier petits formats">

<h3>Service d'impression petits formats</h3>
<ul>
<li><a href="petits_formats.htm">> Flyers </a></li>
<li><a href="petits_formats.htm">> Plaquettes </a></li>
<li><a href="petits_formats.htm">> Cartons d'invitation </a></li>
<li><a href="petits_formats.htm">> Cartes de visite </a></li>
<li><a href="petits_formats.htm">> Dossiers/reliures </a></li>
</ul>
</div>

Le CSS "petitsformats" est le suivant :

#petitsformats
{
position: absolute;
left: 30px;
height: 317px;
width: 220px;
background-image: url(images/accueil/acc1.gif);
margin: 0px;
padding: 0px;
}

@+



Modifié par y.bli le 15/11/2007 15:32
Afficher le profil de y.bli Voir la configuration de y.bliEnvoyer un message privé à y.bli
 Revenir en haut de la page
 telliak  Posté le 15/11/2007 à 23:25  
Astucien


1070 Messages
@urore a écrit :

Oui j'y ai pensé mais c'est un tp noté donc interdiction de tricher tu vois.

J'ai regardé le code mais ça m'a pas apporté de réponse vu que c'est noté et que le prof va s'appercevoir si on a triché ou pas !


Tricher n'est pas mon genre et par ma réponse je n'envisageais aucune tricherie. Il faudrait d'ailleurs définir à partir de quel moment la triche commence, dans la mesure où tu sollicites dans un forum la réponse au problème qui t'est posé.

Mon idée était tout simplement de lire le code, le comprendre et en écrire un qui corresponde à l'énoncé.

Ton premier message indique je dois écrire le code html pour ke ça face des liste bien propre avec des puces [sic], ce n'est pas Dreamweaver qui va te permettre d'écrire du code html, il va en générer «à sa sauce» et à mon avis cela ne correspondra pas à un TP de HTML mais à un TP de Dreamweaver, ce qui est bien différent.

Afficher le profil de telliak Voir la configuration de telliakEnvoyer un message privé à telliak
 Revenir en haut de la page
 @urore  Posté le 16/11/2007 à 09:20  
Petite astucienne

220 Messages

Merci pour vos réponses ça m'éclaircit un peu les idées !

Ben pour le tp , le prof veut qu'on fasse ça sur Dreamwever.

Pour ce qui est de la triche, étant donné que le cours est vide, à mon sens, et que je comprends pas tout vu que c'est la première fois que je touche à du html je pense que c'est normal que je demande de l'aide vu qu'il nous à jamaisexpliquer franchement comment on fait un menu.

Y.bli, il faut que je refasse cette page web en fait. En fait c'est vraimant par hasard qu'on est tombé sur le site. On est pas censé savoir qu'il existé car le prof nous à donné 2 fichiers photoshop qu'il faut mettre en html.

Bref je suis pas douée du tout car c'est pas du tout mon parcours à la base.

Pardonnez moi de mon ignorance

Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
 y.bli  Posté le 16/11/2007 à 09:38  
Astucien

3864 Messages

RE,

Bon alors, qu'est-ce que tu voudrais exactement ? Essaie d'être un peu plus précise sur ce que tu dois faire : toute la page telle qu'elle est (là c'est facile, tu as tout le code), quelques menus qui ressemblent à cette page, ...

Par contre, Dreamwever, je n'utilise pas.

@+



Modifié par y.bli le 16/11/2007 09:39
Afficher le profil de y.bli Voir la configuration de y.bliEnvoyer un message privé à y.bli
 Revenir en haut de la page
 @urore  Posté le 16/11/2007 à 13:46  
Petite astucienne

220 Messages

Ben en fait je voudrais savoir qu'est ce que je dois érire pour faire un menu.

et Est ce qu'il faut que je répète la même opération pour faire chaque menu ?

On a fait un tp avant celui dont je vous parle et on a écrit ça pour faire le menu :

<div id="menu"><ul>
<li><a href="page1.htm" class="actif">La loi</a> </li>
<li><a href="page2.htm">SoliMar en bref</a> </li>
<li><a href="../entreprises/index.htm">Entreprises </a></li>
<li><a href="../intermediaires_emploi/index.htm">Interm&eacute;diaires &agrave; l'emploi </a></li>
<li><a href="../groupe_pairs/index.htm">Groupe des pairs </a></li>
<li><a href="../documentation/index.php">Documentation</a> </li>
<li><a href="../liens.htm">liens</a> </li>
</ul></div>

Est ce que qu'il faut que je écrive pareil que ça plusieurs fois pour faire mes menu ?
Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
 y.bli  Posté le 16/11/2007 à 14:27  
Astucien

3864 Messages

Re,

Dans la partie <head> de ta page, tu tapes :

<style type="text/css">

#menu1
{
position: absolute;
left: 30px;
height: 317px;
width: 220px;
margin: 0px;
padding: 0px;
}

#menu2
{
position: absolute;
left: 260px;
height: 317px;
width: 220px;
margin: 0px;
padding: 0px;
}

#menu3
{
position: absolute;
left: 722px;
height: 317px;
width: 220px;
margin: 0px;
padding: 0px;
}

</style>

dans la partie <body> de ta page, tu tapes :

<div id="menu1"><ul>
<li><a href="page1.htm" class="actif">>La loi</a> </li>
<li><a href="page2.htm">>SoliMar en bref</a> </li>
<li><a href="../entreprises/index.htm">>Entreprises </a></li>
<li><a href="../intermediaires_emploi/index.htm">>Interm&eacute;diaires &agrave; l'emploi </a></li>
<li><a href="../groupe_pairs/index.htm">>Groupe des pairs </a></li>
<li><a href="../documentation/index.php">>Documentation</a> </li>
<li><a href="../liens.htm">>liens</a> </li>
</ul></div>

<div id="menu2"><ul>
<li><a href="page1.htm" class="actif">>La loi</a> </li>
<li><a href="page2.htm">>SoliMar en bref</a> </li>
<li><a href="../entreprises/index.htm">>Entreprises </a></li>
<li><a href="../intermediaires_emploi/index.htm">>Interm&eacute;diaires &agrave; l'emploi </a></li>
<li><a href="../groupe_pairs/index.htm">>Groupe des pairs </a></li>
<li><a href="../documentation/index.php">>Documentation</a> </li>
<li><a href="../liens.htm">>liens</a> </li>
</ul></div>

<div id="menu3"><ul>
<li><a href="page1.htm" class="actif">>La loi</a> </li>
<li><a href="page2.htm">>SoliMar en bref</a> </li>
<li><a href="../entreprises/index.htm">>Entreprises </a></li>
<li><a href="../intermediaires_emploi/index.htm">>Interm&eacute;diaires &agrave; l'emploi </a></li>
<li><a href="../groupe_pairs/index.htm">>Groupe des pairs </a></li>
<li><a href="../documentation/index.php">>Documentation</a> </li>
<li><a href="../liens.htm">>liens</a> </li>
</ul></div>

J'ai mis les mêmes menus 3 fois, mais tu peux évidemment changer et j'ai ajouté le symbole ">" devant chaque intitulé de menu

@+

Afficher le profil de y.bli Voir la configuration de y.bliEnvoyer un message privé à y.bli
 Revenir en haut de la page
 @urore  Posté le 16/11/2007 à 16:29  
Petite astucienne

220 Messages

ouha ! C'est Super coool ! Merci je vais essayé ce weekend.

Merci !

Je vous tiens au courant

Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
 y.bli  Posté le 16/11/2007 à 16:58  
Astucien

3864 Messages
@urore a écrit :

ouha ! C'est Super coool ! Merci je vais essayé ce weekend.

Merci !

Je vous tiens au courant


Change peut-être les dimensions des 3 DIV (menu1, menu2 et menu3) si tu ne veux pas que ce soit exactement la même chose, par exemple height=320px et width=215px et tu places exactement leurs positions comme tu veux en ajustant le paramètre 'left"

@+



Modifié par y.bli le 16/11/2007 17:02
Afficher le profil de y.bli Voir la configuration de y.bliEnvoyer un message privé à y.bli
 Revenir en haut de la page
 @urore  Posté le 19/11/2007 à 09:08  
Petite astucienne

220 Messages

Ben voilà j'ai réussit à faire mes menus !!!!!!

Per contre j'avais des polices à faire sous cette forme : >

et donc j'ai fait un gif que j'ai intégrer comme puces.

Ben voilà merci à vous !!!!

Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
 Pomp  Posté le 19/11/2007 à 11:41  
Petit astucien

504 Messages
mets le sujet comme résolu stp
Afficher le profil de PompEnvoyer un message privé à Pomp
 Revenir en haut de la page
 @urore  Posté le 28/11/2007 à 15:07  
Petite astucienne

220 Messages

Bonjour,

Ben voilà j'ai toujours pas fini mon tp et je dois le rendre le 30 !!!!

Il faut queje fasse un chemin de fer et j'arrive pas à mettre tout ça à l'horizontal.

HTML :

div id ="chemin de fer">

CSS :

#chemin de fer ul {
left: 10px;
top: 200px;
}
#chemin de fer li {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
left: 10px;
top: 500px;
}
#chemin de fer li a {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-align: left;
}

Soit un truc trop laid :

Comment je peux faire pour mettre le chemin de fer en blanc sans les petit point ?

Ce que j'ai mis à présent marche pas Et surtout comment on fait pour que ça soit aligné ainsi :

>Accueil >Flyers >Plaquette >Carton d'invitation >Carte de visite >Dossier/reliure

SVP



Modifié par @urore le 28/11/2007 15:10
Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
 elle  Posté le 28/11/2007 à 15:45  
  Maîtresse astucienne


15899 Messages

Je n'ai pas trop le temps présentement, mais pour mettre la liste à l'horizontale, tu mets un display:inline dans le style de la liste. Pour enlever les puces, c'est list-style-type: none;

Pour la couleur, c'est celle des liens qu'il faut modifier...

Afficher le profil de elle Voir la configuration de elleEnvoyer un message privé à elle
 Revenir en haut de la page
 @urore  Posté le 28/11/2007 à 19:56  
Petite astucienne

220 Messages

J'ai fait quelques modifications mais ça n'a rien fait

Voici mon css :

#chemin de fer ul {
float:left;
list-style-type:none;
display:inline;

padding:0;
margin:0;
}
#chemin de fer li {
float:left;
left: 10px;
top: 500px;
}
#chemin de fer li a {
float:left;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-align: left;
}

Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
 elle  Posté le 28/11/2007 à 20:02  
  Maîtresse astucienne


15899 Messages

Et ton code HTML, il est comment?

Utilise pour le mettre sur le forum afin qu'il ne soit pas interprété...



Modifié par elle le 28/11/2007 20:03
Afficher le profil de elle Voir la configuration de elleEnvoyer un message privé à elle
 Revenir en haut de la page
 elle  Posté le 28/11/2007 à 20:04  
  Maîtresse astucienne


15899 Messages
Il faut que tu enlèves les float...
Afficher le profil de elle Voir la configuration de elleEnvoyer un message privé à elle
 Revenir en haut de la page
 @urore  Posté le 28/11/2007 à 20:24  
Petite astucienne

220 Messages

J'ai enlevé tout les float. Je les avais mis pour voir si ça déplacer le menu.

Mon HTML :

  1. <div id ="chemin de fer">
  2. <li><a href="Accueil.html">> Accueil</a></li>
  3. <li><a href="rub1.htm">> Flyers</a></li>
  4. <li><a href="rub1a.htm">> Plaquette</a></li>
  5. <li><a href="rub1b.htm">> Carton d'invitation</a></li>
  6. <li><a href="rub1c.htm">> Carte de visite</a></li>
  7. <li><a href="rub1d.htm">> Dossier/reliure</a></li>
  8. </ul></div>

J'ai déplacé les puces : > dans le lien.

Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
 elle  Posté le 28/11/2007 à 20:31  
  Maîtresse astucienne


15899 Messages

Si tu veux mettre >, il faut utiliser les caractères spéciaux car il s'agit d'un caractère de balisage qui risque d'induire le navigateur en erreur :

http://www.commentcamarche.net/html/htmlcarac.php3

Afficher le profil de elle Voir la configuration de elleEnvoyer un message privé à elle
 Revenir en haut de la page
 @urore  Posté le 28/11/2007 à 20:37  
Petite astucienne

220 Messages

Ben je le ai mis en code mais c'est le forum qui a modifier ce que j'ai marqué soit le: & gt;

tout à ligné bien sûr et pas d'espace.

Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
 elle  Posté le 28/11/2007 à 20:37  
  Maîtresse astucienne


15899 Messages

Si tu tiens à un id de trois mots, réunis-les par _ : chemin_de_fer

Comme ça, ça fonctionne, avec les float:left...



Modifié par elle le 28/11/2007 20:40
Afficher le profil de elle Voir la configuration de elleEnvoyer un message privé à elle
 Revenir en haut de la page
 elle  Posté le 28/11/2007 à 20:38  
  Maîtresse astucienne


15899 Messages
@urore a écrit :

Ben je le ai mis en code mais c'est le forum qui a modifier ce que j'ai marqué soit le: & gt;

tout à ligné bien sûr et pas d'espace.


Ah ok.

Afficher le profil de elle Voir la configuration de elleEnvoyer un message privé à elle
 Revenir en haut de la page
 @urore  Posté le 28/11/2007 à 20:44  
Petite astucienne

220 Messages
Bé en fait la couleur à pas changé et il est toujours à la vertical c'est surtout ça le problème
Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
 elle  Posté le 28/11/2007 à 20:45  
  Maîtresse astucienne


15899 Messages
Chez moi, ça fonctionne. Tu as modifié le nom chemin_de_fer dans ta CSS aussi?
Afficher le profil de elle Voir la configuration de elleEnvoyer un message privé à elle
 Revenir en haut de la page
 @urore  Posté le 28/11/2007 à 20:50  
Petite astucienne

220 Messages
J'ai mis les _ ça à mis la couleur, police, taille et aussi ça a aligné à gauche le menu mais il est toujours à la verticale. A oui, les puces rondes on été suprimer aussi.
Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
 elle  Posté le 28/11/2007 à 20:54  
  Maîtresse astucienne


15899 Messages

Je te mets ce que j'ai et qui fonctionne pour moi :

  1. <div id ="chemin_de_fer">
  2. <li><a href="Accueil.html"> Accueil</a></li>
  3. <li><a href="rub1.htm"> Flyers</a></li>
  4. <li><a href="rub1a.htm"> Plaquette</a></li>
  5. <li><a href="rub1b.htm"> Carton d'invitation</a></li>
  6. <li><a href="rub1c.htm"> Carte de visite</a></li>
  7. <li><a href="rub1d.htm"> Dossier/reliure</a></li>
  8. </ul>
  9. </div>

  1. #chemin_de_fer ul {
  2. float:left;
  3. list-style-type:none;
  4. display:inline;
  5. padding:0;
  6. margin:0;
  7. }
  8. #chemin_de_fer li {
  9. float:left;
  10. left: 10px;
  11. top: 500px;
  12. }
  13. #chemin_de_fer li a {
  14. float:left;
  15. font-family: Arial, Helvetica, sans-serif;
  16. color: #FFFFFF;
  17. text-align: left;
  18. }

Afficher le profil de elle Voir la configuration de elleEnvoyer un message privé à elle
 Revenir en haut de la page
 @urore  Posté le 28/11/2007 à 21:10  
Petite astucienne

220 Messages

ça s'est tourné !!! ça le fait vachement mieux !!! par contre y a tout qui est souligné est ce qu'il existe un moyen d'enlevé ?

il faut que je fasse dans le Css un li a: link

Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
 elle  Posté le 28/11/2007 à 21:13  
  Maîtresse astucienne


15899 Messages
Dans le style des liens : text-decoration: none;
Afficher le profil de elle Voir la configuration de elleEnvoyer un message privé à elle
 Revenir en haut de la page
 @urore  Posté le 28/11/2007 à 21:16  
Petite astucienne

220 Messages

J'essaye de centrer parce que ça fait pas top au final.

Je suis désolée de t'embêté toutes les 3 min avec mon TP, excuse moi mais personne n'a voulu m'aidé à l'école ils sont tous perso (ils lachent riendu tout!) et mon prof m'en envoyé sur les roses il comprends pas que j'arrive pas à tout assimilé d'un coup...mais moi je sors de commerce et de marketing, d'ailleurs c'est ce que je lui ai dis, il m'a laissé en plan sans m'expliquer plus

Excuse moi encore de t'embêter Elle !

Afficher le profil de @urore Voir la configuration de @uroreEnvoyer un message privé à @urore
 Revenir en haut de la page
Haut de la page 
Inscrivez-vous !
- Posez vos questions

- Résolvez vos problèmes

- Aidez les autres

- Participez et créez vos discussions

- Dialoguez en privé avec d'autres membres

- Suivez vos sujets préférés

- Affichez les signatures des membres

TOUT EST GRATUIT !

Je crée mon compte




Vous avez besoin d'aide ?
Des centaines d'experts sont à votre disposition sur les forums PC Astuces pour vous aider gratuitement, 24h/24, 7j/7.

Les derniers sujets résolus !
 

 > Tous les forumsForum des Webmasters

 
Forum PC Astuces© 1997-2008 WebastucesAller en haut de la page