28173 sujets

CSS et mise en forme, CSS3

Problème d'affichage

Bonjour à tous,
Je suis débutant et j'ai beaucoup à apprendre,comme je suis retraité j'ai franchi le cap il est jamais trop tard n'est ce pas?
J'ai copié le code html d'un menu dynamique sur ce site, puis je l'ai modifié pour l'adapter à mon propre site, tout fonctionne à merveille mais au moment ou je l'inclus dans ma page le fond de page devient blanc.Je précise que je travaille avec frontpage.
Merci de votre aide
Salut,

Je suis retraité également et je t'avoue que sans ton code, je ne vois rien du tout. J'ai beau chausser mes triple foyers, je ce n'est pas mieux.

Bref, communique nous ton code ou un lien vers une page en ligne pour qu'on puisse t'aider.

@+

Bon courage
Bonsoir scrool,

Si tu débutes, le mieux serait d'apprendre à te passer de frontpage (pour diverses bonnes raisons) dès maintenant, et de coder tes pages avec un autre éditeur html/css (en cherchant un peu sur ce forum tu trouveras moultes exemples des logiciels utilisés par bon nombre de visiteurs de ce forum)

En ce qui concerne ton soucis, le mieux serait de poster ton code ou mieux, ta page en ligne, afin que nous puissions regarder ce qui cloche et éventuellement te répondre Smiley cligne

En tout cas je te confirme qu'il n'est jamais trop tard, bonne retraite et belle année 2008 Smiley smile

<Edith> Trop rapide ces retraités...pfff Smiley lol </>
Modifié par 6l20 (03 Jan 2008 - 22:42)
Salut,
Oupss désolé de poster des demi questions, j'ai pas encore trop l'habitude.
Voici le code source du menu:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>un menu déroulant en CSS et javascript</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  http://css.alsacreations.com  */
body {
background: white;
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 80%;
color: black;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 17em;
left: 13em;
width: 9em;
}

#menu dt {
cursor: pointer;
background: #ADFF2F;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}

#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
}

#menu li a:hover {
text-decoration: underline;
}


#mentions {
font-family: verdana, gras;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}

-->
</style>

</head>
<body>

<!-- Menu  -->

<dl id="menu">
		<dt onmouseover="javascript:montre('smenu1');"><a href="#">ACCUEIL</a></dt>
				
			</dd>	
			
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">PRESENTATION</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Tarif et Horaires</a></li>
					<li><a href="#">Dojo</a></li>
                                                                                                    <li><a href="#">Encadrement</a></li>
				</ul>

			</dd>	

		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">RESULTATS</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Mini-poussins(nes)</a></li>
					<li><a href="#">Poussins(nes)</a></li>

					<li><a href="#">Benjamins(nes)</a></li>

					<li><a href="#">Minimes</a></li>
					<li><a href="#">Cadet(tes)</a></li>
					<li><a href="#">Juniors</a></li>
                                                                                                    <li><a href="#">Séniors</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">BUREAU</dt>

			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Comité</a></li>
				</ul>
                                                          </dd>
                                  	
                                    <dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">PHOTOS</dt>
			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
				<ul>
                                                                                              <li><a href="#">2003-2004</a></li>
				              <li><a href="#">2004-2005</a></li>

				             <li><a href="#">2005-2006</a></li>

				             <li><a href="#">2006-2007</a></li>
				             <li><a href="#">2007-2008</a></li>
				             <li><a href="#"></a></li>
                                                                                             <li><a href="#"></a></li>
				</ul>
			</dd>

                                     <dt onmouseover="javascript:montre('smenu6');"><a href="#">VIDEO</a></dt>
				
			</dd>  

                                <dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">CALENDRIER</dt>
			<dd id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">
				<ul>
                                                                                              <li><a href="#">Benjamins(nes)</a></li>
				              <li><a href="#">Minimes</a></li>

				             <li><a href="#">Cadets(tes)</a></li>

				             <li><a href="#">Juniors</a></li>
				             <li><a href="#">Séniors</a></li>   
                                                                              </ul>
			</dd>

                                     <dt onmouseover="javascript:montre('smenu8');"><a href="#">MEDIA</a></dt>
				
			</dd> 

                                                
                                    <dt onmouseover="javascript:montre('smenu9');"><a href="#">JUDO</a></dt>
				
			</dd>

                                    <dt onmouseover="javascript:montre('smenu10');"><a href="#">STEP</a></dt>
				
			</dd>
                                   

</body>
</html>


Et là le code source de ma page web:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>VIDE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.over {
	background-image: url(images/nav2.gif);
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-small;
	color: #FFFFFF;
}
a:link {
	font-weight: bold;
	color: 5A9F00;
	text-decoration: none;
}
a:hover {
	font-weight: bold;
	color: #FFFFFF;
}
a:visited {
	color: 5A9F00;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[ i ])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[ i ].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[ i ];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[ i ][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[ i ].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[ i ]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
input {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	border: 1px; 
	background-color: #4A4A4A;
}
-->
</style>
</head>

<body bgcolor="#262626" onLoad="MM_preloadImages('images/showshoutboxover.gif')">
<table width="407" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td><img src="images/topleftheader.jpg" width="225" height="40"></td>
          <td><img src="images/topdigitanimated.gif"><br>
            <img src="images/topbaranimated.gif" width="300" height="22"></td>
          <td><img src="images/toprightheader.jpg"></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td>
	<img src="images/Logo%20entete.jpg" width="740" height="127"></td>
  </tr>
  <tr> 
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td><img src="images/tleftm.gif" width="225" height="43"></td>
          <td valign="top"><img src="images/bottombaranimated.gif" width="300" height="22"><br>
            <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sb','','images/showshoutboxover.gif',1)"><img src="images/showshoutbox_blank.gif" name="sb" width="300" height="18" border="0"></a><br>
          </td>
          <td><img src="images/tlrightm.gif" width="231" height="43"></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td width="172" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/bgleftnav.gif">
              <tr>
                <td>
				<p>&nbsp;<img border="0" src="images/navigation.gif" width="172" height="44"><p>&nbsp;&nbsp; 
				<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>                                
				<p>
				<p>				                  
				<p><p><p></td>
              </tr>
            </table> 
            <table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/bgleftnav.gif">
              <tr> 
                <td><img src="images/blank_leftheaders.gif" width="172" height="45"></td>
              </tr>
              <tr> 
                <td><table width="90%" border="0" align="right" cellpadding="0" cellspacing="0">
                    <tr> 
                      <td><div align="center"><strong><font size="1">LIENS</font></strong></div>
						<div align="center">&nbsp;</div>
						<div align="left">
							<font size="1"><b>
							<a href="http://www.ijf.org/">
							<img border="0" src="images/Mini%20%20bottomeftheader.jpg" width="57" height="10"></a>F.I.J</b></font></div>
						<div align="left">
							<font size="1"><b>
							<a href="http://www.ffjudo.com/">
							<img border="0" src="images/Mini%20%20bottomeftheader.jpg" width="57" height="10"></a>FFJDA</b></font></div>
						<div align="left">
							<font size="1"><b>
							<a href="http://judo-lorraine.123asso.com">
							<img border="0" src="images/Mini%20%20bottomeftheader.jpg" width="57" height="10"></a>L. 
							DE LORRAINE</b></font></div>
						<div align="left">
							<font size="1"><b>
							<a href="http://www.cd57judo.com/">
							<img border="0" src="images/Mini%20%20bottomeftheader.jpg" width="57" height="10"></a>C.DE 
							MOSELLE</b></font></div>
						<div align="left">
							<font size="1"><b>
							<a href="http://www.ufolep.org/">
							<img border="0" src="images/Mini%20%20bottomeftheader.jpg" width="57" height="10"></a>UFOLEP</b></font></div></td>
                    </tr>
                  </table></td>
              </tr>
              <tr> 
                <td><img src="images/blank_leftheaders.gif" width="172" height="45"></td>
              </tr>
              <tr> 
                <td><table width="90%" border="0" align="right" cellpadding="0" cellspacing="0">
                    <tr> 
                      <td><strong><font size="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
						CLUBS</font></strong><p>
						<b><font size="1">
						<a href="http://jcstiring.free.fr/">
						<img border="0" src="images/Mini%20%20bottomeftheader.jpg" width="57" height="10"></a>Stiring-Wendel</font></b></p>
						<p>
						<font size="1"><b>
						<a href="http://www.judo-amneville.com/">
						<img border="0" src="images/Mini%20%20bottomeftheader.jpg" width="57" height="10"></a>Amneville</b></font></td>
                    </tr>
                  </table></td>
              </tr>
              <tr> 
                <td><img src="images/blank_leftheaders.gif" width="172" height="45"></td>
              </tr>
             
              <tr>
                <td><table width="90%" border="0" align="right" cellpadding="0" cellspacing="0">
                    <tr> 
                      <td><div align="center">
						<a href="http://www.mairie-petiterosselle.fr/">
						<img border="0" src="images/bannierer%20PR.gif" width="150" height="45"></a></div></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td><img src="images/bleft.gif" width="172" height="45"></td>
              </tr>
            </table></td>
          <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/mcbg.gif">
              <tr>
                <td><img src="images/maincontent_blank.gif" width="584" height="45"></td>
              </tr>
              <tr>
                <td><table width="95%" border="0" align="center" cellpadding="0" cellspacing="1">
                    <tr> 
                      <td width="10%">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td><div align="center">
					<img src="images/maincontent_blank.gif" width="584" height="45" border="0" usemap="#Map"></div></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
<map name="Map">
  <area shape="rect" coords="304, 4, 531, 41" nohref>
</map>
</body>
</html>



Merci de m'avoir répondu si vite
Modifié par Florent V. (04 Jan 2008 - 12:34)
Hello,

J'ai un peu édité tes messages, scrool, parce que là c'était le bazar complet...
(À ta décharche, poster de longs morceaux de code sans oublier une balise [ /code] fermante n'est pas évident, et il y a aussi la subtilité des [ i ] dans le code Javascript qui sont interprétés comme une mise en italiques. Smiley smile )

Sinon, je souscris aux remarques de 6|20:
6|20 a écrit :
Si tu débutes, le mieux serait d'apprendre à te passer de frontpage (pour diverses bonnes raisons) dès maintenant, et de coder tes pages avec un autre éditeur html/css (en cherchant un peu sur ce forum tu trouveras moultes exemples des logiciels utilisés par bon nombre de visiteurs de ce forum)

Avec une réserve toutefois: on peut très bien ne pas avoir envie d'apprendre à coder (dans les règles de l'art ou pas...), et simplement vouloir faire un site. Dans ce cas, Alsacréations n'est pas le lieu idéal (mais j'aurais tendance à dire qu'il n'y en a aucun: la réalisation de sites web est essentiellement un sujet technique, et les seuls moyens corrects de s'en affranchir tout en obtenant un résultat correct c'est 1) d'engager un professionnel ou 2) de passer par un service en ligne pour créer un site hébergé par ce service, le plus souvent un blog).

Au cas où, un peu de lecture: À qui s'adresse Alsacréations.com?
OK Florent j'ai bien compris ton message
Je vais tout de même apprendre le code , ça prendra le temps qui'il faut.
Lorsque mes connaissances seront plus étendues je reviendrait sur ce forum
En attendant merci quand pour ta franchise.
scrool a écrit :
Je vais tout de même apprendre le code , ça prendra le temps qui'il faut.

Mon but n'est pas de décourager qui que ce soit, bien sûr. On n'est pas obligé d'être un professionnel pour apprendre les technologies de base du Web, et notamment HTML/CSS. Ce sont des sujets techniques, et qui demandent donc un apprentissage assez important pour êtres maitrisés, mais ces sujets sont facilement abordables (tutoriels et cours pour débutants, sites collaboratifs comme Alsacréations, etc.). Il y a peut-être plus d'«amateurs éclairés» que de professionnels sur Alsacréations. Smiley smile

Bonne continuation et bon apprentissage.
Modifié par Florent V. (04 Jan 2008 - 13:54)
Sujet clos
Aller à