Bonjour à tous,
Il reste deux soucis.
Le premier concerne le conteneur que je n’arrive à étendre sur toute la hauteur de l’écran et ce pour les navigateurs testés (Firefox, IE6 et 7, Opera).
Le second concerne IE6 sur un écran de 1024 par 768 px (sur un écran 1240 par 1024 px c’est ok). L’image, entre les deux séries de boutons, reste obstinément décentrée vers la droite.
Merci d’avance pour les pistes que vous me donnerez pour faire avancer mon problème.
Marc
Voici l’URL où vous pourrez trouver la page http://users.skynet.be/marc.laenen/page002.html
Les codes CSS et HTML, ci-dessous
Le code CSS
Le code HTML
Modifié par MLA (15 Feb 2008 - 11:26)
Il reste deux soucis.
Le premier concerne le conteneur que je n’arrive à étendre sur toute la hauteur de l’écran et ce pour les navigateurs testés (Firefox, IE6 et 7, Opera).
Le second concerne IE6 sur un écran de 1024 par 768 px (sur un écran 1240 par 1024 px c’est ok). L’image, entre les deux séries de boutons, reste obstinément décentrée vers la droite.
Merci d’avance pour les pistes que vous me donnerez pour faire avancer mon problème.
Marc
Voici l’URL où vous pourrez trouver la page http://users.skynet.be/marc.laenen/page002.html
Les codes CSS et HTML, ci-dessous
Le code CSS
body
{
margin: 0;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background-image: url(courballon4.jpg);
text-align:center;
}
div#conteneur
{
width: 724px ;
height:100%;
position:relative;
margin-left: auto;
margin-right: auto;
border-left: 2px solid #c0c0c0 ;
border-right: 2px solid #c0c0c0 ;
background: #fff ;
text-align:left;
}
h1
{
padding-top:30px;
/*text-align: center;*/
}
.image
{
background: url(imagepourmenu.jpg);
width:521px;
height:287px;
/*float:left;*/
margin-top:0%;
/*margin-left:50px;*/
background-repeat:no-repeat;
}
/* Définition des boutons pour sous menu haut*/
.menuhaut a
{
width:138px;
height:25px;
text-decoration:none;
color:white;
text-align:center;
font-size:1.4em;
padding-top:2px;
float:left;
margin-top:3%;
margin-left:72px;
border-style:outset;
border-width:3px;
border-color:silver;
background:url(boutonout.gif);
}
.menuhaut a:hover
{
width:138px;
height:25px;
text-decoration:none;
color:white;
font-size:1.4em;
padding-top:2px;
text-align:center;
float:left;
margin-top:3%;
margin-left:72px;
border-style:inset;
border-width:3px;
border-color:silver;
background:url(boutonover.gif);
}
.menuhaut a span
{
display: none;
}
.menuhaut a:hover span
{
display: block;
background-image:url('courballonr4.jpg');
position:absolute;
top:230px;
left:170px;
width: 350px;
height: 160px;
text-align: center;
margin: 5px;
padding-top:40px;
border-style:outset;
border-width:5px;
border-color:silver;
color: rgb(0, 102, 0);
}
/* Définition des boutons pour sous menu bas*/
.menubas a
{
width:138px;
height:25px;
text-decoration:none;
color:white;
text-align:center;
font-size:1.4em;
padding-top:2px;
float:left;
margin-top:0%;
margin-left:72px;
border-style:outset;
border-width:3px;
border-color:silver;
background:url(boutonout.gif);
}
.menubas a:hover
{
width:138px;
height:25px;
text-decoration:none;
color:white;
font-size:1.4em;
padding-top:2px;
text-align:center;
float:left;
margin-top:0%;
margin-left:72px;
border-style:inset;
border-width:3px;
border-color:silver;
background:url(boutonover.gif);
}
.menubas a span
{
display: none;
}
.menubas a:hover span
{
display: block;
background-image:url('courballonr4.jpg');
position:absolute;
top:230px;
left:170px;
width: 350px;
height: 160px;
text-align: center;
margin: 5px;
padding-top:40px;
border-style:outset;
border-width:5px;
border-color:silver;
color: rgb(0, 102, 0);
}
.spacer
{
clear: both;
}Le code HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Page002</title>
<link href="css_ff_page002.css" rel="stylesheet" type="text/css" -="">
<style type="text/css"></style><!--[if IE 7]>
<style type="text/css"> @import url("css_ie7_page002.css");
</style> <![endif]-->
<!--[if IE 6]>
<style type="text/css"> @import url("css_ie6_page002.css");
</style> <![endif]-->
</head>
<body>
<div id="conteneur">
<h1><img src="bannieremenu.gif" alt"Bannière menu"></img></h1>
<p class="menuhaut">
<a href="page_presentation_menu.html">Présentation<span>Mot
d'accueil <br>
Historique <br>
Localisation <br>
Equipe Educative <br>
CG - AP </span></a>
</p>
<p class="menuhaut">
<a href="page_projets_menu.html">Projets<span>Educatifs<br>
Pédagogiques<br>
D'établissement</span></a>
</p>
<p class="menuhaut">
<a href="page_reglements_menu.html">Réglements<span>D'ordre
intérieure<br>
Des études<br>
Ma vie à l’école (règlement)
</span></a>
</p>
<div class="spacer"> </div>
<p class="image"></p>
<div class="spacer"> </div>
<p class="menubas">
<a href="enconstruction.html">Actualité<span>Classe de neiges<br>
Classes de mer<br>
Carnaval </span></a>
</p>
<p class="menubas">
<a href="enconstruction.html">Agenda<span>Congés<br>
Manifestations<br>
Dates de départ pour...</span></a>
</p>
<p class="menubas">
<a href="enconstruction.html">Un Plus<span>La gestion mentale<br>
</span></a>
</p>
<div class="spacer"> </div>
</div>
</body>
</html>Modifié par MLA (15 Feb 2008 - 11:26)
