Bonjour,
Je suis en train d'essayer de faire la mise en page de mon site mais j'ai un pb avec firefox.
Je sais qu'il est très exigent, il m'agrandi la div en largeur. Je voudrais savoir ce qui ne va pas dans mon script pourqu'il se « comporte » comme ça.
Je vous envoie le lien de la page html et css.
(ne tenez pas compte du contenu, c'est un site (d'apprentissage).
Je vous remercie.
scritp html:
script css :
[/code]
Modifié par livaills (07 May 2008 - 21:44)
Je suis en train d'essayer de faire la mise en page de mon site mais j'ai un pb avec firefox.
Je sais qu'il est très exigent, il m'agrandi la div en largeur. Je voudrais savoir ce qui ne va pas dans mon script pourqu'il se « comporte » comme ça.
Je vous envoie le lien de la page html et css.
(ne tenez pas compte du contenu, c'est un site (d'apprentissage).
Je vous remercie.
scritp html:
[code]<html>
<head>
<title>tentativecss</title>
<link href="tentative.css" rel="stylesheet" type="text/css" />
</head>
<body style="direction: ltr;">
<div id="baniere">
</div>
<div id="header">
<ul id="menu_horizontalalamain">
::: <a href="images/frappe.html" alt="frappe" title="aller à la section 2">Dactylographie</a> :: <a href="frappe.html">Español</a> :: <a href="frappe.html">Basque</a> :: <a href="frappe.html">photoshop élément</a> ::: » <a href="index.html" title="aller à la section 2">accueil</a> :: <a href="frappe.html">contact</a> »
</ul>
</div>
<ul id="menu_horizontal">
<li class="bouton_gauche"><a href="#"><img src="quick_sticky.gif" alt="accueil" />Dactylographie</a></li>
<li class="bouton_gauche"><a href="#"><img src="quick_sticky.gif" alt="accueil" />Español</a></li>
<li class="bouton_gauche"><a href="#"><img src="loupelargebord1cm.jpg" alt="accueil" />Basque</a></li>
<li class="bouton_gauche"><a href="#">Photoshop élément</a> <img src="quick_sticky.gif" alt="accueil" /></li>
<li class="bouton_droite"><a href="#"><img src="quick_sticky.gif" alt="accueil"/>Accueil</a></li>
<li class="bouton_droite"><a href="#"><img src="quick_sticky.gif" alt="accueil"/>Contact</a></li>
</ul>
<div id="menu">
<div class="submenu">
<h3>Apprendre</h3>
<ul>
<li><a href="frappe.html" title="aller à la section 1">DACTYLOGRAPHIE</a></li>
<li><a href="#" title="aller à la section 2">ESPAÑOL</a></li>
<li><a href="#" title="aller à la section 3">BASQUE</a></li>
<li><a href="#" title="aller à la section 4">PHOTOSHOP ELEMENT</a></li>
</li>
</ul>
</div>
<div class="submenu">
<h3>Le Bio</h3>
<ul>
<li><a href="oligo.html">Produits Bio</a></li>
<li><a href="tabper.html">Produits classiques</a></li>
<li><a href="tuto_01.html">Tableau comparatif</a></li>
<li><a href="de.html">liens</a>
</li>
<ul>
<li><a href="dl1.html">Atac</a></li>
<li><a href="de2.html">Leclerc</a></li>
<li><a href="dl3.html">Cremerie</a></li>
<li><a href="dl4.html">Boulangerie</a></li>
</ul>
</li>
</div>
</div>
<div id="body">
<h2>Ce site a été créé pour apprendre et perfectionner la dactylographie</h2>
<p>La vie du 21ème siècle est telle, qu'il nous est demandé constament d'en faire toujours plus mais les journées n'ayant que 24h, c'est le stress qui survient et tout les à coté. Nous passons un grand temps derrière notre écran mais nous souhaiterions parfois pouvoir aller plus rapidement pour être en mesure d'effectuer les tâches qui nous incombent, ou avoir un peu plus de temps pour soi (ce qui n'est pas négligeable).<br><br> N'ayant pas à disposition les heures ou minutes nécessaires, j'estime que de nos jours savoir frapper correctement ainsi que rapidement est un gain de temps et c'est ce que je vous propose d'apprendre en quelques leçons. Le plus gênant sera par la suite, une fois seul(e), de poursuivre les entraînements avec assiduité, mais tout est faisable lorsque l'on y croît et qu'on le veut.
</p>
<p>
Avant toutes choses, il est nécessaire de connaître quelques "règles" qui vous aideront à <span class="police">mieux gérer cet apprentissage</span> et si elles pouvaient être suivies par la suite, ce ne serait que bénéfique, une bonne habitude doit toujours être gardée.
</p>
<span class="conseil">QUELQUES CONSEILS</span><br><br>
<li>a - Etre assis(e) de manière à ce que le dos soit bien calé, les fesses bien au fond de la chaise, utiliser de préférence un fauteuil ergonomique, pour ne pas que des problèmes de dos ne surviennent ; pour les personnes qui en sont sujettes, c'est une "obligation" uniquement si vous devez y passer du temps,
<li>b - bien lire son texte avant, au minimum deux fois car il y a toujours quelque chose qui échappe à la première lecture et bien souvent aussi à la seconde. Il va de soit que celà doit être fait avec attention,
<li>c - frapper sans regarder le clavier pour mémoriser pour mieux mémoriser les touches,
<li>d - ne pas essayer d'aller plus vite que ses capacités, c'est en agissant de cette manière que l'on fait des fautes, la vitesse viendra avec la pratique,
<li>e - bien se relire à la fin, de préférence plus d'une fois,
<li>f - si vous en avez la possibilité, essayez d'effectuer votre frappe dans le calme, sans stress, les résultats n'en seront que meilleurs,
<li>g - être patient(e), il faut du temps pour parvenir à un résultat correct, à une frappe maîtrisée, mais en persévérant, on arrive à tout et je suis d'ailleurs là pour vous y aider.
</li>
<p>Une fois ces conseils donnés, il ne reste plus qu'à les appliquer, nous allons donc pouvoir débuter notre premier cours frappe !!
</p>
<div id="subbody1">
Sur ce site vous pourrez apprendre :<br><BR>==> A positionner les doigts sur le clavier,<br><br>==> les signes propres à la dactylographie,<br><br>⇒ à associer plusieurs touches pour avoir un résultat qui ne peut exister sans celà,<br><br>==> ainsi que vous télécharger mes textes modifiés dont <u><i>vous devrez remettre en forme et que je vous corrigerais</u></i>.
</div>
<div id="subbody2">
<u>POUR ETRE EN MESURE DE PARTICIPER A CES COURS, IL EST NECESSAIRE DE</u> :<br><br>=> POSSERDER ACROBAT READER<br><br>=> DE S'INSCRIRE<br><h6>Une petite participation financière sera demandée pour nous permettre de pouvoir continuer à vous aider.</h6></b>
</div>
</div>
<div id="footer">
<ul id="menu_horizontalalamain">
::: <a href="frappe.html">dactylographie</a> :: <a href="frappe.html">Español</a> :: <a href="frappe.html">Basque</a> :: <a href="frappe.html">photoshop élément</a> ::: » <a href="frappe.html">accueil</a> :: <a href="frappe.html">contact</a> »
<br><br>remerciements : alsacreation.com - html.net - photomagazine.net<br><br>
© copyright — Dernière mise à jour : tôt ou tard...
</ul>
</div>
</body>
</html>script css :
[/code]
body
{
width:100%;
background-color: #cbdaff;
font-size: 0.9em;
}
.police
{
color: green;
font-style: oblique;
font-size: 200%;
background-color: white;
}
#baniere
{
background-image: url("images\dessindefrappe.gif");
background-repeat:no-repeat;
background-position: 5%;
height: 120px;
width:100%;
background-color:#cfe019;
padding-top: 3%;
margin-top: 0%;
margin-left: 0%;
margin-bottom: 0%;
margin-top: none;
}
#header
{
width: 100%; /* largeur du head */
height: 5%; /* hauteur du head */
background-color: #f4f9fd;
margin-bottom: 10px;
margin-right: 0%;
margin-top: 0%;
}
ul#menu_horizontal /*du site du zero*/
{
width : 679px;
height : 30px;
margin-left: 80px;
margin : 2em 0 0 0;
padding : 0;
background-color : #f4f9fd;
border : 1px dashed #6a70b6;
list-style-type : none;
}
ul#menu_horizontal li
{
padding : 6 0.4em;
line-height : 30px;
}
ul#menu_horizontal li.bouton_gauche
{
float : left;
border-right : 1px dashed #6a70b6;
}
ul#menu_horizontal li.bouton_droite
{
float : right;
border-left : 1px dashed #6a70b6;
}
ul#menu_horizontal a
{
color : black;
text-decoration : none;
padding : 0 0.5em;
font : 0.8em "Trebuchet MS";
}
ul#menu_horizontal a:hover
{
text-decoration : underline;
}
ul#menu_horizontal a img
{
border : none;
padding : 0 0.3em;
}
#menu_horizontalalamain
{
text-align: center;
font-family: verdana, arial, serif;"trebuchet ms";
}
ul#menu_horizontalalamain a
{
text-decoration: none;
color: #828282;
}
ul#menu_horizontalalamain a:hover
{
text-decoration: underline ;
color: #c8c8c8;
}
#menu /*mettre le dièse devant quand c'est un ID */
{
float: left;
width: 16%;
}
.submenu h3 /*titre menu. Mettre un point devant quand c'est un CLASS */
{
background-color: #e2e2e7 ;
width: 100% ;
list-style: none ; /*supprimer puce devant enumeration ou liste*/
margin: 0 ;
padding: 0 ;
text-align: center;
color: #98989d;
font-family: courier new, monospace;
}
.submenu ul /*menu*/
{
width:100%;
background-color: #bebec3 ;
list-style: none;
padding-top: 3%;
padding-left: 3%;
padding-bottom: 5%;
margin: 0px;
margin-bottom: 9%;
font-family: verdana, arial, serif;
font-size: 0.7em ;
font-weight: bold ;
border: 1px outset #dfe0e5;
}
.submenu li ul /*sous-menu*/
{
list-style: none;
padding: 0px;
margin: 0px;
font-size: 1em;
font-weight: normal ;
font-style: italic;
border: none;
text-align: center;
}
.submenu a
{
text-align: left;
text-decoration: none;
color: #ffffff; /*couleur police menu*/
line-height: 1.8em ;
}
.submenu a:hover
{
background-color: #51d8f6; /*couleur surlignement passage souris*/
color: #7c7c7c; /*couleur police au passage de la souris*/
display: block;
width: 140px;
}
.couleurlienpage {
color: red;
}
#body
{
width:99%;
margin-left: 17.5%;
margin-right: 0%;
margin-bottom: 0px;
padding-bottom: 10px;
padding-right: 4%;
padding-left: 4%;
padding-top: 20px;
color: #000000;
background-color: #f3f6ff;
text-align: justify;
font-family: verdana, arial, serif;
}
#body h2 /*titre rose*/
{
font-size: 1em;
color: #666666;
background-color: #ffccff;
width: 90%;
border: 1px solid #FF6CF0;
text-align: center;
padding: 10px;
margin-left: 10%;
}
h6
{
font style: italic;
}
.conseil{
margin-left: 10%;
color: red;
}
#subbody1
{
margin-left: 12%;
margin-right: 12%;
margin-top: 20px;
width: 100%;
padding : 20px;
font-size: 1em;
color: #ffffff;
background-color: #000000;
border : 1px solid #ffffff;
}
#subbody2
{
margin-left: 12%;
margin-right: 11.5%;
margin-top: 20px;
width: 100%;
padding : 20px;
font-size: 1em;
color: #ffffff;
background-color: #000000;
border : 1px solid #ffffff;
}
#footer
{
width:99%;
margin-left: 17.7%;
margin-right: 0%;
margin-top: 3em;
margin-bottom: 0em;
margin-right: 0em;
padding-top: 0.3em;
padding-bottom: 0.4em;
color: #666666;
background-color: #f3f6ff;
text-align: center;
font-size: 0.7em;
}Modifié par livaills (07 May 2008 - 21:44)
