28220 sujets

CSS et mise en forme, CSS3

Css externe

Bonsoir,

j'ai lu les tutoriaux mais je n'arrive pas à mettre les menus déroulants que j'ai trouvé sur le site en css externe, l'intégration dans la page html cela a été plutôt bien mais en externe je ne vois rien qui marche. Pour la partie javascript j'ai crée à l'aide du bloc note un fichier js et pour la partie script CSS un fichier CSS (toujours avec bloc note). Mais pour les sous menus je ne sais pas où les placer.
a écrit :
j'aimerais bien aider ou répondre sur ce forum mais je suis un peu jeune
Merci de me répondre : une fois que j'ai enregistré les fichiers js et css, dans dream mx je les attache par la commande attacher une feuille de style dans le panneau création, style css
Le fichier que voici je le met en .js (dans bloc note)
[code]<script language="JavaScript" 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>


la partie css, je le met en .css (dans bloc notes) :

[/code]
<STYLE type=text/css>
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 90%; BACKGROUND: white; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #990000; PADDING-TOP: 0px; FONT-FAMILY: verdana, arial, sans-serif
}
DL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DT {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DD {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu {
	LEFT: 1em;
	WIDTH: 10em;
	POSITION: absolute;
	TOP: 1em;
	background-color: #FFFFFF;
}
#menu DT {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; FONT-WEIGHT: bold; BACKGROUND: #FFFFFF; MARGIN: 2px 0px; BORDER-LEFT: gray 1px solid; CURSOR: pointer; LINE-HEIGHT: 20px; BORDER-BOTTOM: gray 1px solid; HEIGHT: 20px; TEXT-ALIGN: center
}
#menu DD {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; MARGIN-TOP: -1.4em; Z-INDEX: 100; BACKGROUND: #FFFFFF; RIGHT: 8em; BORDER-LEFT: gray 1px solid; WIDTH: 10em; BORDER-BOTTOM: gray 1px solid; POSITION: absolute
}
#menu UL {
	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
#menu LI {
	FONT-SIZE: 85%; LINE-HEIGHT: 18px; HEIGHT: 18px; TEXT-ALIGN: center
}
#menu LI A {
	DISPLAY: block; COLOR: #FFFFFF; TEXT-DECORATION: none
}
#menu DT A {
	DISPLAY: block; COLOR: #FFFFFF; TEXT-DECORATION: none
}
#menu LI A:hover {
	TEXT-DECORATION: underline
}

}
.Style2 {color: #FFFFFF}
</STYLE>


et par contre la partie DL je ne sais pas où la mettre :

[code]<DL id=menuD name="menu">
            <DT onmouseover="javascript:montre('smenuD6');"><font color="#990000"><span class="navigation Style63">TELECHARGEMENT</span></font></DT>
              <DD class="Style59" id="smenuD6" onmouseover="javascript:montre('smenuD6');" 
  onmouseout=javascript:montre();> 
                <UL>
                  <LI><font color="#FF9933"><span class="navigation"><A href="A%20notre%20propos.htm">Rôle de l'abus & indétermination du prix</A> 
                  <LI><font color="#FF9933"><span class="navigation"><A href="Info%20%E9diteur.html">Guide la consommation, édition banque</A> </span></font></LI>
                </UL>
              </DD>
			<DT onmouseover="javascript:montre('smenuD1');"><span class="Style59"><span class="Style63"><font color="#990000">CONTRAT & MODELES</font></span></span></DT>
              <DD id="smenuD1" onmouseover="javascript:montre('smenuD1');" 
  onmouseout=javascript:montre();> 
                <UL>
				  <LI><font color="#FF9933"><span class="navigation"><A href="Abus%20de%20position%20dominante.html">Statut EURL</A> </span></font></LI>
                  <LI><font color="#FF9933"><span class="navigation"><A href="Abus%20de%20position%20dominante.html">Statut association avec bureau</A> <A href="Concurrence%20d%E9loyale.html">Concurrence 
                    d&eacute;loyale</A> <A href="Prix%20abusivement%20bas.html">Statut association avec conseil d'administration</A> <A href="Pratiques%20abusives.html">Clause de non concurrence</A> </span></font></LI>
                  <LI><font color="#FF9933"><span class="navigation"><A href="Transparence%20tarifaire.html">Clause de mobilité</A> </span></font></LI>
                </UL>
  </DD>
			<DT onmouseover="javascript:montre('smenuD5');"><font color="#990000"><span class="navigation">FICHES PRATIQUES</span></font></DT>
              <DD id="smenuD5" onmouseover="javascript:montre('smenuD5');" 
  onmouseout=javascript:montre();> 
                <UL>
                  <LI><font color="#FF9933"><span class="navigation"><A href="Indices%20et%20taux.html">Fiscalité </A> </span></font></LI>
				  <LI><font color="#FF9933"><span class="navigation"><A href="Indices%20et%20taux.html">Internet </A> </span></font></LI>
				  <LI><font color="#FF9933"><span class="navigation"><A href="Indices%20et%20taux.html">Santé </A> </span></font></LI>
				  <LI><font color="#FF9933"><span class="navigation"><A href="Indices%20et%20taux.html">Droit des affaires </A> </span></font></LI>
				  <LI><font color="#FF9933"><span class="navigation"><A href="Indices%20et%20taux.html">Consommation </A> </span></font></LI>
				  <LI><font color="#FF9933"><span class="navigation"><A href="Indices%20et%20taux.html">Concurrence </A> </span></font></LI>
                </UL>
  </DD>
            <DT onmouseover="javascript:montre('smenuD2');" 
  onmouseout=javascript:montre();><font color="#990000"><span class="navigation">RECHERCHE</span></font></DT>
              <DD id="smenuD2" onmouseover="javascript:montre('smenuD2');" 
  onmouseout=javascript:montre();> 
                <UL>
				  <LI><font color="#FF9933"><span class="navigation"><A href="Carte%20bancaire.html">Rechercher un document</A> </span></font></LI>
                </UL>
              </DD>
          </DL>
Pour ta feuille de style css, tu dois l'appeler depuis la partie head de ton code, par exemple avec link rel:
<link rel="stylesheet" type="text/css" href="monstyle.css">

ou bien avec @import:
<style type="text/css" media="screen" title="default">@import url(monstyle.css);</style>

Note qu'il ne faut pas mettre "<STYLE type=text/css>" et "</STYLE>" dans ta feuille de style.

Le code html du menu doit être placé dans la body de ta page là où il doit se trouvé.
Sujet clos
Aller à