Bonjour,
Problème résolu au niveau de la disposition. Voici le code HTML et le CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="L'EPS au collège Bréart, un outil au service des élèves, parents et collègues " />
<meta name="Keywords" content="Collège Bréart, Bréart, EPS, eps, Mâcon " />
<title>L'EPS au collège Bréart</title>
<link href="EPS_Bréart.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {background-color: #000;}
h3 {
font-size : 120%;
text-align : center;
margin : 8px;
color: #DEFD02;
font-family: "Comic Sans MS", cursive;
padding-top: 6px;
}
</style>
</head>
<body >
<div id="page">
<div id= "header">
<!--début menu-->
<ul id="menu">
<li><span>ACCUEIL</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl><dt><a href="hebergement.htm">ACCUEIL</a></dt></dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span>E.P.S</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href="menu/index.html">E.P.S</a></dt>
<dd><a href="http://www.openrunner.com/index.php?id=794121" >Programmation</a></dd>
<dd><a href="Recompenses_2011.pdf" >Contenus</a></dd>
<dd><a href="records.pdf" >Evalation</a></dd>
<dd><a href="records.pdf" >Règlement</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span>U.N.S.S</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href="index.html">U.N.S.S</a></dt>
<dd><a href=" http://www.openrunner.com/index.php?id=794059" >Programmation</a></dd>
<dd><a href="Recompenses_2011.pdf" >Les résultats</a></dd>
<dd><a href="classement course nature 2008.pdf" >La charte</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span>RECORDS</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href="Reglement_course_2011.pdf">RECORDS</a></dt>
<dd><a href="photoscourse.htm" >Garçons</a></dd>
<dd><a href="photoscourse2.htm" >Filles</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span>PHOTOS</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href="../mozilla/index.html">PHOTOS</a></dt>
<dd><a href="photoscourse.htm" >EPS</a></dd>
<dd><a href="photoscourse2.htm" >UNSS</a></dd>
<dd><a href="photoscourse3.htm" >CROSS</a></dd>
<dd><a href="photoscourse4.htm" >CARNAVAL</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span>PROJETS</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href="hebergement.htm">PROJETS</a></dt>
<dd><a href="photoscourse.htm" >Section Sportive Hand</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span>LIVRE D'OR</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href="http://www.i-services.net/membres/livredor/livredor.php?uid=139360&sid=84714">LIVRE D'OR</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--fin menu-->
</div>
<!--fin header-->
<div id="bienvenue_titre">
<div id="bloc_bienvenue"></div> <!-- fin bloc_bienvenue -->
<div id="bloc_titre">
<img src="Images/titre.png" width="325" height="62" alt="EPS" />
<p class="Style2">Il n'est pas rare d'entendre dans la cour de récréation : «T'as sport, aujourd'hui ?» «Ouiais mais mon prof de gym dit que c'est de l'EPS....».
Voilà toute l'ambiguité d'une discipline scolaire qui existe depuis 1869 !
Mais l'EPS ne se confond pas avec les APS qu'elle propose et organise. Ca richesse et son originalité vient du fait qu'elle s'attache autant au corps, qu'à l'esprit mais aussi à l'âme de l'élève.</p><p class="Style2">- Elle développe ses capacités physiques afin d'enrichir ses possibilités d'agir, dans un but de santé et de sécurité.</p><p class="Style2">- Elle donne les connaissances pour connaître son corps et permettre de l'entretenir.</p><p class="Style2">- Elle offre l' accès au patrimoine de la culture physique et sportive.</p><p class="Style2">- Elle transforme les attitudes dans un souci de respect, de citoyenneté et de solidarité.</p>
</div>
</div>
<div id="news_sondage">
<div id="bloc_news">
<h3>- NEWS - </h3>
<p class="Style3"> > 29/03/2011 - Mise en ligne du site</p>
</div> <!-- fin bloc_news -->
<div id="bloc_sondage">
<h3>- SONDAGE - </h3>
<p class="Style4"><script type="text/javascript" src="http://www.i-services.net/membres/sondage/sondage.php?uid=139360&sid=84714&idsond=5554"></script></p>
</div> <!-- fin bloc_sondage -->
</div>
<div id="footer">
<p>Création Web <a href="mailto:pointup@free.fr">Pointup</a> I 2011</p>
</div> <!-- fin footer -->
</div> <!-- fin page -->
</body>
</html>
CSS:
#page {
height: auto;
width: 960px;
background-image: url(Images/fond.png);
margin: auto;
}
#header {
background-image: url(Images/header3.png);
background-repeat:no-repeat;
height: 205px;
width: 100%;
margin: auto;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
#footer {
clear: both;
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
color: #666;
width: 960;
text-align: center;
margin-top: 40px;
}
#bienvenue_titre {
clear:both;
}
#bloc_bienvenue {
float: left;
height: 261px;
width: 257px;
background-image: url(Images/bienvenue.png);
margin-left: 50px;
z-index: 2;
}
#bloc_titre {
float: right;
width: 550px;
height: auto;
margin-right: 40px;
}
#news_sondage {
clear: both;
}
#bloc_news {
float: left;
height: 312px;
width: 280px;
background-image: url(Images/news.png);
margin-left: 100px;
margin-top: 20px;
}
#bloc_sondage {
float: right;
height: 312px;
width: 280px;
background-image: url(Images/news.png);
margin-right: 100px;
margin-top: 20px;
}
#bloc_sondage div {margin:0 auto;}
.Titre {
font-family: "Comic Sans MS", cursive;
font-size: 20px;
font-style: normal;
color: #C5D32C;
text-decoration: none;
text-align: center;
}
a {
color: #999;
text-decoration: none;
}
a:visited {
color: #999;
text-decoration: none;
}
a:hover, a:focus, a:active {
text-decoration: none;
color: #FF0;
}
.Style2 {
font-size: 13px;
font-style: normal;
color: #FFF;
font-family: "Comic Sans MS", cursive;
margin-bottom: 10px;
margin-top: 3px;
}
.Style3 {
font-family: "Comic Sans MS", cursive;
font-size: 10px;
color: #DEFD02;
margin-top: 20px;
margin-left: 20px;
}
#menu {
list-style-type:none;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
width: 960px;
text-align: center;
margin-top: 85px;
position: absolute;
top: 80px;
}
#menu li {
display:block;
float:left;
position:relative;
z-index:100;
margin-right:0px;
margin-top: 0px;
width: 14%;
text-align: center;
border-right-color:#FF0;
border-right-style: solid;
border-right-width: 1px
}
#menu li span {
display:block;
z-index:100;
font-size:12px;
padding: 5px 10px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#menu li a, #menu li a:visited {
display:block;
padding:0;
margin: 0;
text-align: center;
}
#menu dl {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
width: 100%;
}
#menu dt {
margin:0;
font-size: 12px;
float:left;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
}
#menu dd {
display:none;
border-bottom:1px solid #cce;
clear:left;
margin:0;
padding:0;
color: #fff;
font-size: 12px;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
}
#menu dt a, #menu dt a:visited {
display:block;
color:#ff8;
padding: 5px 10px;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#menu dd a, #menu dd a:visited {
color:#ff8;
text-decoration:none;
display:block;
padding:5px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 100%;
background-color: #b2ab9b;
border-bottom:1px solid #ffffcc
}
#menu li a:hover {
border:0;
}
#menu li:hover dd, #menu li a:hover dd {
display:block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {
color:#534;
}
N.B.: si vous utilisez la dernière image que je vous ai envoyée le 27/03/11 à 20:50:35, vous ne devez pas mettre de border à vos li du menu. De plus j'ai ajusté la couleur de l'image à celle de la page
Modifié par lddsoft (31 Mar 2011 - 09:47)
