Page d'accueil d'un site web

Résolu/Fermé
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 - 7 juin 2008 à 22:33
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 - 24 juin 2008 à 17:08
Bonjour,
j'ai pas mal tourné sur le forum et je pense que vous serez largement capable de m'aider (à moins que je sous estime ma question). En réalité, je suis en stage dans une entreprise, et je dois leur réaliser leur site web...
le hic c'est que je suis issu de la mécanique, et m'oriente vers une école d'ingénieur dans le design....et pas de la programmation... mais j'essaye de faire de mon mieux. là je suis sur NVU, et je souhaite avoir une barre horizontale avec plusieurs cases qui déroulent un menu quand la souris passe dessus...
donc, j'ai réussi deux choses:
-faire des menus avec les sous menus, mais alignés à la vertical, ca j'abandonne.
-faire des cases (celles qui ont la flèche vers le bas à droite...) qui nous laissent le choix du menu parmi quelques propositions, et qui donne dans une autre case similaire un second choix en fonction du premier choix réalisé.
mais mon problème c'est qu'à partir de là, j'arrive pas à créer les liens...
voila le code:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><endnote><head>
<meta> <title>test</title>
</head>
<body
style="background-color: rgb(255, 204, 51); color: rgb(0, 0, 0);"
alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="text-align: center;"><br />
</div>
<div style="text-align: center; background-color: rgb(255, 204, 51);">
<div style="text-align: center;"><big
style="color: rgb(31, 253, 33); font-weight: bold;"><big><big><span
style="color: rgb(253, 13, 99); text-decoration: underline;">entreprise</span></big></big></big><br />
<br />
</div>
<div style="text-align: center;"><big
style="color: rgb(31, 253, 33); font-weight: bold;"><big><big><br />
<br />
<br />
<br />
<br />
    
       
           
           
     </big></big></big><br />
</div>
<div style="text-align: left;">
<div style="text-align: center;"><br />
</div>
<div style="text-align: center;"><small
style="text-decoration: underline;">Nous
Contacter </small><br />
</div>
<small><br />
<br />
<br />
</small></div>
</div>
<script language="Javascript" type="text/javascript"> function choix(formulaire) { var j; var i = formulaire.boite1.selectedIndex; if (i == 0) for(j = 1; j <5; j++) formulaire.boite2.options[j].text=""; else{ switch (i){ case 1 : var text = new Array( "a","b","c","d","e"); break; case 2 : var text = new Array("f","g","h","i","j"); break; case 3 : var text = new Array("k","l","m","n","o"); break; case 4 : var text = new Array("p","q","r","s","t"); break; case 5 : var text = new Array("u","v","w","x","y"); break; case 6 : var text = new Array("z","aa","ab","ac","ad"); break; } for(j = 0; j<5; j++) formulaire.boite2.options[j+1].text=text[j]; } formulaire.boite2.selectedIndex=0; } </script>
<form style="background-color: rgb(255, 204, 51);"
name="formulaire">
<select name="boite1" onchange="choix(this.form)">
<option selected="selected">...........Nos domaines
d'activités içi...........</option>
<option>domaine 1</option>
<option>domaine 2</option>
<option>domaine 3</option>
<option>domaine 3</option>
<option>domaine 4</option>
<option>domaine 5</option>
</select>
<select name="boite2">
<option selected="selected">...........Leurs
spécifications içi...........</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
</form>
</body>
</html>


je remercie d'avance si vous arrivez à m'aider...
A voir également:

15 réponses

Taxiarque Messages postés 63 Date d'inscription lundi 24 septembre 2007 Statut Membre Dernière intervention 22 juillet 2009 10
8 juin 2008 à 00:55
Coucou Rente,

Alors tout d'abord premier petit conseil, met toutes tes fonctions javascript dans le head de la page c'est mieux ^^
Ensuite, pour rediriger l'internaute vers un lien lorsqu'il clic sur le menu, il faudrait que dans le onchange de ton sous menu on puisse mettre : onchange = "location.href=value;" (que tu arrangeras à ta manière ^_^)
Par exemple :
<select name="boite2" onchange="location.href=value;">
    <option value="lien_de_ta_page.php"></option>
</select>


Moi je procède à peu près comme ça même si je ne suis pas un expert en JavaScript.
En espérant que ça puisse t'éclairer,
Bonne soirée et bon courage.

PS: Pour les menu déroulants verticales je te conseille ce tuto qui est sympa : https://css.developpez.com/tutoriels/menu-deroulant/
0
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 7
8 juin 2008 à 10:08
Merci de t'être intérressé à mes soucis...
euh, mais ta première phrase je comprends pas...
"met toutes tes fonctions javascript dans le head de la page c'est mieux"
c'est quoi les fonctions javascript, et le head c'est quoi...? c'est quoi l'avantage? je sais j'y connais rien, et c'est ca le problème... mais je préfère passer pour un con 5 minutes (ou plus) que de le rester....
mais, ca m'intérresse quand même...

je vais essayer de faire ce que tu me proposes.

et le liens, je l'avais trouvé déjà, mais j'arrive pas à aller jusqu'au bout... en fait c'est le premier truc que j'ai fait.j'arrive à afficher tout les menus à la verticale avec leurs sous-menus... mais au moment de le passer à l'horizontal, je comprends plus....(en suivant sa démarche)

on va dire que en me donnant "une map" j'arrive à la mettre à mon gout, (nombre de menu, de sous menu)(je l'ai fait pour le code que j'ai mis en dessus) je comprends un peu, mais j'arrive pas à créer...
0
Taxiarque Messages postés 63 Date d'inscription lundi 24 septembre 2007 Statut Membre Dernière intervention 22 juillet 2009 10
8 juin 2008 à 16:27
Re coucou ^_^

Bah je voulais dire qu'il faut que tu déclares toutes tes fonctions javascript dans l'entête de ta page (entre les balises head, ça facilite l'appel de la fonction il me semble et c'est pour réussir à le faire passer dans un "vieux" navigateur mais bon comme je te le dis je ne suis pas un expert JS ^^).
Je t'en donne un exemple dans ce tuto : https://javascript.developpez.com/tutoriels/introduction/?page=page_2#LII-B
Mais comme on le dit, il y a un début à tout, nous ne sommes pas des génies qui savent tout dès la naissance ^^

J'ai un autre tutoriel pour les menus si tu veux http://css.alsacreations.com/Galeries-de-menus-en-CSS
J'espère que ça te sera utile.

Bon courage
0
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 7
8 juin 2008 à 17:11
je te remercie de surveiller ce post...
je dois t'avouer que "déclarer mes fonctions javascript" je vois pas trop en quoi ca consiste... désolé, je suis un peu lourd à trainer en programation, j'en ai jamais vraiment fait... quand je faisait du VB, on déclarait les variables, mais là, c'est pas pareil...?
je te remercie du liens que tu a mis, j'ai obtenu ca :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!-- /* CSS issu des tutoriels https://www.alsacreations.com/ */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; }
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href=""
title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
<div id="site">
<h1>Menu horizontal déroulant en CSS</h1>
<p>Testé sous (tested under) Internet Explorer,
Netscape, Mozilla, Opera et Firebird</p>
<p>Il vous suffit d'adapter le code source de cette page
à vos besoins. </p>
<p>Raphaël GOETTER<br>
<a href="https://www.alsacreations.com/">Alsacréations</a><br>
<a
href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Explications
/ Explanations</a></p>
</div>
</body>
</html>


c'est exactement ce que je veux, mais je comprends pas, quand j'affiche la page de démo, ya aucun problème, et quand je l'affiche en local (je crois que ca se dis comme ca...) ya la barre jaune en haut qui me bloque à cause du directX... c'est normal?
0
Taxiarque Messages postés 63 Date d'inscription lundi 24 septembre 2007 Statut Membre Dernière intervention 22 juillet 2009 10
8 juin 2008 à 19:30
Euh je ne sais pas , tu travailles avec quel navigateur?
Je te conseille firefox.
Il existe pour firefox un add-on qui s'appelle "Web Developer" il est interessant de l'utiliser pour corriger tes erreurs.
Il t'avertit quand il y a une erreur dans ton css ou JS. De plus, il peut te fournir des indications sur la position de tes éléments, images...etc
Tu as essayé d'installer les plug-in manquant pour directX?
Je crois que la barre jaune s'affiche quand il manque des trucs.

Sinon pour la déclaration des fonction JS, c'est bien là où tu les as mis. J'appelle déclarer une fonction JS quand tu as dans la balise script : function nom_de_la_fonction() {}. tout simplement ^^
Bon courage.
0
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 7
9 juin 2008 à 15:12
Salut Taxiarque,

bhen, je suis content :-)!!!
j'ai installé firefox, et ya plus de soucis. j'ai installé "web developper" et je sais pas trop où il faut aller chercher pour corriger les erreurs..."outil"puis "valider" css ou js...? ou c'est "console d'erreur"..? et comme je comprends pas trop ce qu'il me dit, je suis pas sûr d'être au bon endroit...
Mais ce qui me trouble c'est qu'en ouvrant le liens avec mon internet explorer7.0, il y a le problème avec le ActiveX...
quand le site sera publié, ca le fera encore?d'ailleurs j'ai essayé sur un autre ordi, ya le même problème...et il se rajoute un problème de largeur d'écran. cad que sur mon pc le menu est tout beau tout nikel, mais sur l'autre ordi le menu est trop large et reviens à la ligne...tu as une solution?

Et je vais t'avouer que le programme, c'est pas moi qui l'ai fait...mais je pense que tu t'en doutes...par contre, j'arrive à le faire évoluer à mon gout (nombre de menus, sous-menus, liens, couleurs....)

Jte remercie du temps que tu passes à m'aider,
@ bientot
0
Taxiarque Messages postés 63 Date d'inscription lundi 24 septembre 2007 Statut Membre Dernière intervention 22 juillet 2009 10
9 juin 2008 à 18:10
Re coucou ^^

La console d'erreur sont les trois petit bouton a gauche.
Le premier te donne les indications sur les erreurs de conformité, le second sur les erreurs css, et le troisième sur le JavaScript.
Cependant ça ne te les corrige pas mais ça t'aide à trouver tes erreurs ^^.
En ce qui concerne ton soucis de menu qui est trop large, ça peut venir de la résolution.
En effet, malheureusement il y a beaucoup de points dans le developpement Web auquel il faut faire attention.
Avant de mettre un site web en ligne, il faut s'assurer qu'il passe sur les principaux navigateurs tel que IE et Firefox (ce sont les deux plus grands actuel) et sur différentes tailles d'écran, des fois on a de belle surprises en croyant que le site est terminé xD
Essayes de voir si tu peux arranger le CSS, ça vient surement de là ;)
Bon courage à toi ^_^
0
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 7
10 juin 2008 à 08:15
Salut,

pour dire où sont les erreurs, j'ai trouvé ca : http://validator.w3.org/#validate_by_uri
ca à l'air pas mal...
et là je viens de trouver les petites icones que tu dis...
mais, en faisant analiser ma page par firefox et par le site que j'ai mis en liens, ca me donne pas les mêmes erreurs...
j'espère qu'ils sont complémentaire, et que si je corrige pour bien passer sur firefox, ca n'en rajoutera pas aux yeux de l'autre....

Et pour la résolution, tu me dis d'arranger le CSS, mais je sais pas ce que c'est, ni où je trouve ca...
c'est dans le code de ma page? un code à rajouter à coté, et à mettre dans le head...?

Et, tu connais d'autre "petits gros détails" à vérifier avant la mise en ligne?

jte remercie, @ bientot
0

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

Posez votre question
Taxiarque Messages postés 63 Date d'inscription lundi 24 septembre 2007 Statut Membre Dernière intervention 22 juillet 2009 10
10 juin 2008 à 08:36
Le CSS c'est ce que tu as entre les balises <style>, il te permet de positionner tous tes éléments dans ta page, de donné à ton style de police une certaine forme, ça te permet aussi de changer les couleurs enfin bref le CSS permet de tout modifier ^_^.
Voici un lien qui te permettra de mieux comprendre : https://openclassrooms.com/fr/courses
Sinon effectivement le w3 validator te permet de corriger toutes tes erreurs si tu veux faire du html strict (ou bien dans les règles internationales :p).
Tu en as un dans le même style avec le CSS et en français :p
http://jigsaw.w3.org/css-validator/#validate_by_upload.
Enfin pour le CSS tu peux le mettre partout dans ta page, dans les éléments aussi mais avant ça, il vaut mieux savoir s'en servir dans le <head> avant de l'appliquer partout ^^
Enfin je pense avoir répondu à ta question.
Bon courage ^^
0
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 7
10 juin 2008 à 14:00
Bon, je viens d'ingérer le site...
j'ai lu la parti sur le html et le css...en gros les trois premières parties.
j'ai compris, mais pas tout enregistré, c'est domage car c'est intéressant!
donc, je sais un peu mieux comment ca marche et je me souviens de se qu'on peu faire et sait où je peu aller piocher des infos...
je vais refaire "mon" site à partir du notepad++, ca à l'air d'être "plus facil" qu'avec NVU... comme ca on est "au coeur" de la page, et je pense que même si c'est plus galère, on sait quoi faire.
pour la largueur de l'écran, comme je demandais ce matin, il explique la solution...
maintenant je connais la différence entre le CSS, le HTML et le xHTML...et comprends mieux ce que tu me disais!
je pense que le PHP est un truc de fou mais ressemble aux algorithmes que je faisait en cours.
je pense prendre le temps de regarder comment ca marche...mais j'y comprendrai rien et ne le mettrai pas dans "mon" site, lol

Merci beaucoup de ton aide, @ bientot
(je te ferai passer le lien du site si j'arrive à le faire ^_^)
0
Taxiarque Messages postés 63 Date d'inscription lundi 24 septembre 2007 Statut Membre Dernière intervention 22 juillet 2009 10
10 juin 2008 à 14:05
Hihi pas de soucis,
Bonne chance pour ton site
@ pluche ^_^
0
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 7
11 juin 2008 à 08:23
Salut,
Bonne nouvelle, j'ai réussi à centrer la page avec une largueur de 780px, comme ca tout le monde pourra le lire!!
enfin, j'espère :-s
j'ai réussi à bloquer mon menu en haut de la page pour qu'il soit tou le temps accésible... "je gère" les couleurs, les tailles, polices...un peu tout!! donc, je suis content!

maintenant j'ai une autre question... quant tu fais ta feuille de style par ex :

p
{
color: black;
font-size:20px;
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
text-align: center;
word-spacing:4px;
letter-spacing:2px
}

tu peux l'appeler en début du html... ca c'est compris.
mais là où je tourne un peu en rond c'est pour savoir si je peux créer un fichier.html avec les menus et les sous-menus ainsi que leurs liens ("fond" que je souhaite toujours présent dans le site), le tout faisant appel à la feuille de style pour les polices, les couleurs... ainsi avoir toujours le même aspect.et en fait que je me serve de "cette map" pour créer toutes mes pages... cad que lorsque je créer une nouvelle page web, elle appelle ce html et j'ai toujours le même menu, avec les mêmes liens, les mêmes couleurs...que je modifi a ma convenance.
possible ou pas??...
c'est peu être tout bête, mais...je demande un peu d'aide...
merci
0
Taxiarque Messages postés 63 Date d'inscription lundi 24 septembre 2007 Statut Membre Dernière intervention 22 juillet 2009 10
11 juin 2008 à 09:30
Oui tu peux le faire avec un .css, je m'explique.
Si ton css doit s'appliquer à toutes tes pages, tu crées alors une page .css (comme tu crées une page .html mais avec l'extension .css)
Dans ta page, il n'y aura que du style comme cela exemple :
#a{
color: #FFFFFF;
font-family: verdana;
}


Là ça veut dire que tous les liens <a> seront d'une couleur blanc et d'une police verdana.
Ensuite, tu peux isoler un élément.
C'est a dire que par exemple dans ta page web tu as un <p> que tu veux mettre avec de l'écriture rouge.
Rien de plus simple, il suffit que tu donne un nom à <p> genre <p class="coucou">

Dans ton css tu n'auras juste qu'à mettre :
.coucou{
color: red;
}


Ça ne s'appliquera qu'a tous les éléments que tu auras appelé coucou.
Une fois que tu auras compris cela, tu auras une multitude de possibilités que tu pourras faire.

Ensuite pour récupérer la feuille .css pour l'appliquer sur ta page web, il te faudra l'appeler entre les balises <head></head> avec une appelation de ta feuille .css comme ceci :
<link rel="stylesheet" type="text/css" href="./nom_de_ta_feuille.css" />


Ça ira alors chercher le css sur cette page .css mais attention au nom du chemin :P ( ./ : dans le même dossier, ../ : retour au dossier précédent)

Enfin si tu veux seulement l'aspect graphique, tu crées ta page et au lieu de la remplir de texte et images en tout genre qui vont caractériser ta page, tu la laisses vide, tu la sauvegarde et quand tu auras une page à créer, tu récupères le code que tu colles dans ta nouvelle page. Comme ça tu auras les mêmes menus etc...

J'espère avoir été assez clair ^^

Bon courage
0
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 7
11 juin 2008 à 09:32
yep, c'est encore moi, j'ai un problème avec mon menu dynamique...
sous Mozilla, ca marche nikel, mais avec IE7 et 6 kan je passe sur les menus la surbrllance marche et les sous-menus se déroulent, mais quand je veux descendre dans le sous-menu, il se barre...
je sais pas trop pourquoi... d'ailleurs, IE me encore c**** avec les ActiveX alors que firefox me pose aucun problème...
j'ai vérifier le code avec firefox, ya aucun soucis. et avec W" validator le CSS est nikel.
j'ai essayer ma page sous plusieurs config, la résolution à l'air de bien passer...

si tu sais quoi faire avec les sous menus...?

voila le code, jle met en petit et ya le css dedans.
si tu peux me dire ce que tu en penses...

"en fait j'ai édité et supprimé le code ...il est plus bas... mais à mettre dans un html et un css"
0
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 7
11 juin 2008 à 09:37
hop, ya un soucis, quant j'ai mis le css dans le html ya u un problème...
ca fais tout moche sous IE, et mozilla trouve une erreur...
je vais voir ce que je peux faire, mais ce code est foireu!
:-s
désolé
0
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 7
11 juin 2008 à 10:01
non, bhen je sais pas d'où ca viens...
je colle les deux fichiers ici, et tu les mets dans des blocs notes en .html et en .css ?
désolé...
et au fait, merci pour la petite précision de tout à l'heure (car je chercher à appeller un .html comme on fait avec les .css)

<!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="en"><head><title>-- --</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="screen.css" title="screen" media="screen">
</head>
<body>
<div>
<ul id="menuDeroulant">
<li>
<a href="#">Acceuil</a>
</li>
<li>
<a href="#">Tournage</a>
<ul class="sousMenu">
<li><a href="#">machines traditionnelles</a></li>
<li><a href="#">machines numériques</a></li>
</ul>
</li>
<li>
<a href="#">Fraisage</a>
<ul class="sousMenu">
<li><a href="#">machine traditionnelle</a></li>
<li><a href="#">machine numérique</a></li>
<li><a href="#">taillage d'engrenage</a></li>
</ul>
</li>
<li>
<a href="#">Moteur</a>
<ul class="sousMenu">
<li><a href="#">Usinages</a></li>
<li><a href="#">Réparation</a></li>
<li><a href="#">Automobile</a></li>
<li><a href="#">Moto</a></li>
<li><a href="#">Poids lourds</a></li>
<li><a href="#">Agriculture</a></li>
<li><a href="#">Industrie</a></li>
</ul>
</li>
<li>
<a href="#">Soudage</a>
<ul class="sousMenu">
<li><a href="#">Nos postes à souder</a></li>
<li><a href="#">Matériaux soudables</a></li>
<li><a href="#">En déplacement </a></li>
</ul>
</li>
<li>
<a href="#">Pièce détachée</a>
<ul class="sousMenu">
<li><a href="#">Moteur thermique</a></li>
<li><a href="#">Moteur électrique</a></li>
<li><a href="#">Outillage</a></li>
<li><a href="#">Motoréducteur</a></li>
</ul>
</li>
<li>
<a href="#">Nos marques</a>
<ul class="sousMenu">
<li><a href="#">----</a></li>
<li><a href="#">----</a></li>
<li><a href="#">----</a></li>
<li><a href="#">-----</a></li>
<li><a href="#">-----</a></li>
<li><a href="#">-----</a></li>
</ul>
</li>
</ul>
</div>
<br>
<br>
<h1>Nom de la boite</h1>
<br>
<br>
<br>
<p class="souligne"> <em> Blabla<br>
<br>
<br>
<br>
<p> on écrit ce qu'on veut...:
<img class ="centered" src="photos/entreprise.jpg" alt="Photo de l'entreprise" title="Photo de l'entreprise" />
<br>
<a href="#" title="Cliquer ici pour obtenir nos coordonnées">Nous contacter</a></p>
<br>
<br>
<br>
</body>
</html>









et le screen.css

div
{ width: 760px;
margin: auto;
margin-top: 0px;
position: fixed;}

body
{ font: 11px "Comic Sans MS", "Trebuchet MS", Georgia, serif;
background-color: #FFFFCC;
padding: 0;
width: 760px;
margin: auto;
margin-top: 10px;
margin-bottom: 50px;
border: 8px solid #CCCCFF;}


#menuDeroulant
{ width: 800px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;}

#menuDeroulant li
{ float: left;
margin: 0;
padding: 0;
border: 0;}

#menuDeroulant .sousMenu
{ list-style-type: none;
margin: 0;
padding: 0;
border: 0;}

#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li
{ float: left;
width: 109px;
margin: 0;
padding: 0;
border: 0;}

#menuDeroulant li a:link, #menuDeroulant li a:visited
{ display: block;
height: auto;
color: #000000;
background: #CCFFFF;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;}

#menuDeroulant li a:hover { background-color: #CCCCFF; }
#menuDeroulant li a:active { background-color: #CCCCFF; }

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{ display: block;
color: #000000;
margin: 0;
border: 0;
text-decoration: none;
background-color:#CCCCCC;}

#menuDeroulant .sousMenu li a:hover
{ background-image: none;
background-color: #CCCCFF;}

#menuDeroulant .sousMenu li
{ float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;}

#menuDeroulant .sousMenu
{ display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;}

#menuDeroulant li:hover > .sousMenu { display: block; }

p
{color: black;
font-size:12px;
font-family: "Arial", Arial, Verdana, serif;
text-align:center;
word-spacing:3px;
letter-spacing:1px}
h1
{color: black;
font-size:20px;
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
text-align: center;
word-spacing:4px;
letter-spacing:2px;
text-decoration: underline;}

.souligne
{text-decoration:underline}
.em
{font-style: italic}

img.centered {
display: block;
margin-left: auto;
margin-right: auto }
0
Taxiarque Messages postés 63 Date d'inscription lundi 24 septembre 2007 Statut Membre Dernière intervention 22 juillet 2009 10
11 juin 2008 à 10:30
Pour la page css pas besoin d'en faire un copié collé, tu n'auras juste qu'a donner le chemin de ta page.
Ensuite pour la page html vi, tu gardes le squelette que tu veux garder pour toutes tes page et tu le colle dans chaque page que tu souhaites. Tu n'auras juste qu'après à t'occuper du skin ;).
c'est l'avantage du .css car avec une seule feuille .css, tu peux donner la même apparence à toutes les feuille html que souhaites.
ensuite quel est ton genre de soucis?
ça passe bien chez moi.
Je ne sais pas comment tu t'y es pris.
Pour la précision, oui il te faut le fichier html pour ta page , et ton fichier css à part. Il faut juste faire attention au nom du chemin que tu mets dans ta page html, mais dans le même dossier, la page html fonctionne que ça soit sous ie et firefox.
0
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 7
11 juin 2008 à 10:32
c'est encore moi, mon menu dynamique est copié à parti de ce lien https://css.developpez.com/tutoriels/menu-deroulant/ c'est toi qui me l'avais donné, mais j'avais déjà fais un tour dessus sans rien y comprendre...
mais maintenant c'est plus compréhensible...
et j'ai rémarqué une phrase :"Inconvénients : seuls quelques navigateurs récents (Mozilla/Firebird, Safari) seront capables de rendre ce menu correctement. En contre-partie, comme IE Windows n'affichera pas les sous-menu, il y a possibilité d'utiliser des PNG avec transparence alpha."
qui m'embête pas mal...
donc, mon problème viendrait de là...d'ailleurs sur sa démo tout en bas, ca fait comme sur "mon" site...
il dit qu'on peu corriger ca avec des png...ca voudrai dire qu'on doit afficher des png au format de nos sous-menus...?
c'est pas très clair pour un apprenti comme moi...
et une autre question, ca serai pas plus facil de rajouter un lien du style : "si les menus fonctionnement pas, cliquer ici" et là les internautes sont dirigé vers un menu tout bête, fixe... affiché sur la gauche de l'écran...
il faudrai effectivement faire deux sites web, ou sinon, changer le css pour garder le même menu et liens en changant la présentation...???
0
Taxiarque Messages postés 63 Date d'inscription lundi 24 septembre 2007 Statut Membre Dernière intervention 22 juillet 2009 10
11 juin 2008 à 11:02
Oui il te faudrait des png de la taille de ton sous menu si tu as des détails, sinon pour un png avec une couleur unie, la taille n'a pas d'influence: si elle est trop petite, elle sera répétée. Tu n'auras juste qu'a rajouter dans ton css:
background: url("./nom_de_l\'image.png");
à la place de ton background-color.
Sinon pour ton alternative ça serait possible, tu pourrais faire la même page en ayant un menu basic. Il faudra juste que tu rajoutes le lien de ta nouvelle page et ça sera à l'internaute de clicker dessus pour y accéder. Mais bon concentre toi plutot qu'avec les navigateur récents, ils sont présent à 95%. Ensuite tu peux envisager des alternatives de la sorte si jamais il te reste du temps et que tu ne sais pas quoi faire ;p
0
Rente Messages postés 129 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 6 juin 2011 7
24 juin 2008 à 17:08
salut
je t'avais dis que je te donnerai l'adresse du site une fois fini...

www.alpes-rectification.com

voila, il fonctionne sous mozilla, et ie7 mais pas ie 6

donc j'y travaille encore.
et j'ai opté pour mettre une image en fond de sous menu, et ca marche
0