Bonjour
,
Si quelqu'un veut jeter un coup d'oeil, parce qu'à gratter tout seul dans son coin, ....pas évident.
L'affichage est sensiblement différent selon les navigateurs IE & Firefox. :
Mes titres de coprs sont inopérants dans Firefox, s'affichent comme le texte du corps. j'essaie avec des div element_coprs, mais ça ne va pas mieux.
Le menu déroulant sous FFox colle au bas du 1er cadre de menu.
Le texte déroulant pour les infos se décale aussi légèrement .... selon l'enplacement choisi.
Je suis à chaque fois obligé d'accepter les activex dans I.E. Normal ? Chercher une alternative à javascript ?
Mais pour la question du sujet...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon Super site warffff</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="styles/apprentissage.css" />
<!--//PLF-http://www.jejavascript.net/ scprit pour le menu déroulant. //-->
<script language="JavaScript">
function menuderoulant(selection)
{
window.location=selection.options[selection.selectedIndex].value;
}
</script>
</head>
<body>
<!-- L'en-tête -->
<div id="en_tete">
Il reste à inclure une bannière<br>
ou une image dans la feuille de style et du texte dans l'en tête.
</div>
<!-- L'info déroulant pouvant suivre l'actualité de l'école....t -->
<div id="infosderoulante">
<noscript>
</noscript>
<marquee Class="Scroller" behavior="scroll" direction="left" width="100%" height="19" scrollamount="3" scrolldelay="" onmouseover="this.stop()" onmouseout="this.start()">
<font size="3" face="Helvetica, Times, Arial, sans-serif">
<strong>
<em>Bienvenue à l'école des Vennes.<font color="#B3B3B3">Des renseignements pratiques, pour les parents, les collègues. Des liens pour les enfants. Les actions, activités de l'école....Et Haddock pour les sigles de l'E.N. Mille Sabords !!!
</em>
<strong>
<font color="red"> ROGER, tu restes ! Y'a que des nanas! Sinon je réclame 1Oh de sport hebdo ... pour voir J.Marc. Heeeeeeeeeeeeeeeeeelp.
</font>
</font>
</marquee>
<!-- Fin du code du texte défilant -->
</div>
<div id="siglehaddock">
<a href="http://www.educnet.education.fr/documentation/guide/siglesU.htm"><img src="images/haddock.jpg" alt="haddock" width="47" height="68"></a>
</div>
<!-- Les menus -->
<!--<form method="post" action="traitement.php"..................... Ce que j'ai remplacé par le javascript,du menu deroulanta voir si solution en php>-->
<div id="menu">
<div class="element_menu">
<a href="apprentissage.html"><h3>Accueil</h3></a> <!-- Lien pour retour en page d'accueil-->
<form name="form1"> <div align="center">
<select name="menu" onChange="menuderoulant(this)">
<optgroup label="Vennes primaire">
<option value="siteconstruction.html">Présentation</option>
<option value="Projet d'ecole">Projet d'ecole</option>
<option value="Réglement intérieur">Réglement intérieur</option>
<option value="Inscriptions">Inscriptions</option>
<option value="Le Rased">Le Rased</option>
</optgroup>
<optgroup label="Sites institutionnels">
<option value="http://www.ia01.ac-lyon.fr/">Site de l'I.A.</option>
<option value="http://www2.ac-lyon.fr/etab/ien/ain/aisbourg/accueil.html">Site de l'AIS.</option>
<option value="http://www.lyon.iufm.fr/index.html">IUFM de Lyon</option>
<option value="http://www.education.gouv.fr/">Site du Ministère</option>
<option value="http://www.ac-lyon.fr/">Site du Rectorat</option>
</optgroup>
<optgroup label="Infos">
<option value="http://www.ia01.ac-lyon.fr/ecoles_et_etablissements/ecoles/calendrier_scolaire.php">Calendrier scolaire</option>
<option value="http://www.ia01.ac-lyon.fr/ecoles_et_etablissements/ecoles/pdf/mercredis_samedis.pdf">Mercredis libérés</option>
<option value="...">...</option>
</optgroup>
</optgroup>
<optgroup label="Pratique">
<option value="https://bv.ac-lyon.fr/iprof/ServletIprof">I.Prof</option>
<option value="...">...</option>
</optgroup>
</select>
</form>
</div>
</div>
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="siteconstruction.html">Site construction</a></li>
<li><a href="siteconstruction.html">Lien</a></li>
<li><a href="siteconstruction.html">Lien</a></li>
<li><a href="siteconstruction.html">Lien</a></li>
<li><a href="siteconstruction.html">Lien</a></li>
<li><a href="siteconstruction.html">Coin des parents</a></li>
</ul>
</div>
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page4.html">Pour les collègues</a></li>
<li><a href="page5.html">Les CP</a></li>
<li><a href="page6.html">Les CE</a></li>
<li><a href="page3.html">Les CM</a></li>
<li><a href="page6.html">La Clis</a></li>
<li><a href="page3.html">Archives</a></li>
<li><a href="page5.html">Lien</a></li>
</ul>
</div>
</div>
<!-- Le corps -->
<div id="corps">
<p>
<h1>Mon Super site</h1>
Bienvenue sur mon Super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site : RIGOLEZ PAS, now, c'est You qui Bossez.... Après c'est l'vôtre.
</p>
<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de la féminisation de l'enseignement ou adhérents à la LPM (Ligue de la Protection des Maîtres), ce site est fait pour vous ! Si si ! J'suis pas trop chien.
</p>
<h1>L'auteur</h1>
<P>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de "peut mieux faire !" (Ca ne doit pas être bien compliqué), mais ce n'est pas gagné.<br /> Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire Diabolique).<br> (Là, j'ai pompé ce texte, je ne pense pas à ça, pas encore !)
Ca va bien les chevilles ? IIIArk !!! (Autre rire Diabolique)<br />
Non, en fait, je m'exerce pour vous, ce n'est qu'un galop d'essais. MAIS SI Y'EN A
UN POUR M'FILER UN COUP D'PALUCHE....
</p>
</div>
<!-- Le pied de page -->
<div id="pied_de_page">
<p>Copyright "Tout pourri Corporation" 2006, tous droits réservés<Br>
Et si cela ne vous convient pas, toujours aussi sympa et ours, moi t'en fiche. Z'aurai toujours appris des trucs et des bidules...
</p>
</div>
</body>
</html>
_____________________________________________________
Et le CSS :
body
{
padding: 20px; /* Ajoutre un padding pour que les cadres ne collent pas sur les bords pour rendre le site extensible; je remplace width: 760 px*/
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin: auto; /* Pour centrer notre page */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("../images/fond5.gif"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
background-repeat: repeat;
}
a img {border: 0;} /*suppression de la bordure des'images de liens*/
/* L'en-tête */
#en_tete
{
width: 760px;
height: 75px;
margin-left: 180px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
background-image: url("../images/fond2.gif");
background-repeat: repeat;
margin-bottom: 10px;
}
#infosderoulante
{
position: absolute;
top: 80px;
left: 190px;
padding-right:30px;
}
#siglehaddock
{
float: right;
padding-top:10px;
padding-right:10px;
}
/* Le menu */
#menu
{
float: left; /* Le menu flottera à gauche */
width: 170px; /* Très important : donner une taille au menu */
}
.element_menu
{
/*background-color: #626262;*/
background-image: url("../images/fond2.gif");
background-repeat: repeat;
border: 1px outset wheat;
margin-bottom: 10px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
/* Quelques effets sur les menus */
.element_menu h3, h4 /* Pour la mise en forme des titres des menus*/
{
color: #B3B3B3;
font-family: Times, Arial, Times New Roman, Arial Black, serif;
text-align: center;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("../boutons/billejaune1.gif"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
text-decoration:none;
font-size: 0.9em;
color: #B3B3B3;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #F0E4C4;
color: black;
}
/* Le corps de la page */
#corps
{
margin-left: 180px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 10px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: #B3B3B3;/*background-color: #626262; /* Une couleur de fond pour le corps */
background-image: url("../images/fond2.gif");/*background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
}
#corps h1 /* Tous les titres h1 du corps */
{
color: #B3B3B3;
text-align: center;
font-family: Times New Roman, Arial, Arial Black, Times, serif;
}
#corps h2 /* Tous les titres h2 du corps */
{
height: 60px;
background-image: url("../gif/insolite.gif"); /* Une petite image de fond sur les titres h2 */
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
padding-left: 45px;
color: #B3B3B3;
text-align: left;
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
#pied_de_page
{
margin-left: 180px; /* De 140px, comme pour le corps.*/
padding: 5px;
text-align: center;
color: black; /*background-color: #626262;*/
background-image: url("../images/fond2.gif");
background-repeat: repeat;
}
Merci