Bonjour à tous,
Je me suis permis de poster sur ce forum parce que j'ai quelques problèmes avec la mise en page d'un site.
Le premier problème est le fond de ma Div principale, il s'applique sous la bannière et le menu mais pas sous le reste du site, comme s'il n'en faisait pas partie... (uniquement sous firefox)
Le deuxième problème est que sur certaines pages, le corps se décale en dessous du menu de gauche (uniquement sous IE).
Et le dernier problème est que je n'arrive pas à centrer les liens du menu verticalement (menu du haut).
Voici le code d'une des pages décalées :
Et la CSS commune à toutes mes pages :
Merci beaucoup à ceux qui auront pris le temps de lire mon post, en espérant que certains d'entres vous ont déjà été confrontés à ce problème et pourront m'aider à le résoudre !
Bonne journée
Modifié par Blop (22 Jan 2009 - 12:16)
Je me suis permis de poster sur ce forum parce que j'ai quelques problèmes avec la mise en page d'un site.
Le premier problème est le fond de ma Div principale, il s'applique sous la bannière et le menu mais pas sous le reste du site, comme s'il n'en faisait pas partie... (uniquement sous firefox)
Le deuxième problème est que sur certaines pages, le corps se décale en dessous du menu de gauche (uniquement sous IE).
Et le dernier problème est que je n'arrive pas à centrer les liens du menu verticalement (menu du haut).
Voici le code d'une des pages décalées :
<!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=iso-8859-1" />
<title>Festival de la Marionette de Grenoble - Bienvenue</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Style1 {font-weight: bold}
-->
</style>
</head>
<body>
<div id="principale">
<div id="banniere"></div>
<div id="menu">
<div id="btn_accueil"><a href="../index.html">Accueil</a></div>
<div id="btn_programme"><a href="escurial.html">Spectacles</a></div>
<div id="btn_tempsspeciaux"><a href="../temps_speciaux/repasspectacles.html">Temps speciaux</a></div>
<div id="btn_infospratiques"><a href="../infos.html">Infos pratiques</a></div>
</div>
<div id="menu_gauche">
<div align="right" class="Style1">
<h2>SPECTACLES</h2>
<h3><a href="escurial.html">. Escurial</a></h3>
<h3><a href="zazie.html">. Zazie a-t-elle<br />
un Zizi ?</a></h3>
<h3><a href="valises.html">. Valises</a></h3>
<h3><a href="habaka.html">. Habaka</a></h3>
<h3><a href="tracheu.html">. Tracheu</a></h3>
<h3><a href="dormir.html">. Dormir, Moi ? Jamais !</a></h3>
<h3><a href="jesuiscontent.html">. Il Me Déplait de Mourir Mais<br />
Je Suis Content</a></h3>
<h3><a href="mabel.html">. Mabel Spring</a></h3>
<h3><a href="fantomas.html">. Fantômas</a></h3>
<h3><a href="petitcirque.html">. Le Petit Cirque</a></h3>
<h3><a href="formuleun.html">. Formule 1</a></h3>
<h3><a href="zepatrecathodics.html">. Ze Patre-<br />
cathodics</a></h3>
</div>
</div>
<div id="corps">
<h3>Valises</h3>
<p>Clastic Théâtre (Ile de France)</p>
<p>Suite de courtes pièces pour marionnettes à gaine<br />
50 min,<br />
déconseillé aux - de 8 ans</p>
<p>A propos du départ, de l'arrivée, du voyage, de la séparation, des retrouvailles, de l'errance et de l'exil … Et de ceux qui, la valise à la main, ne savent plus où ils sont. Une porte, une valise, quelques accessoires, les voilà au cœur de l’essentiel. Les personnages entrent et sortent par la porte, se plient, se cassent, au sens propre et au figuré, ont mille démêlés avec leur valise qui les poursuit, les dévore ou les révèle.</p>
<p><em>De l’intelligence et du pur plaisir. La compagnie sait jouer de la contrainte du texte, de l’objet, de la marionnette et nous faire tour à tour rire, nous émouvoir, nous donner à penser. Chaque valise contient le même nombre de mots. L’auteur voulait ce format unique, comme à l’aéroport quand on tente de mettre le maximum de choses tout en mettant les choses les plus précieuses dans un bagage de seulement 30 kilos.</em></p>
<p><strong>Texte</strong> : Rémi Checchetto<br />
<strong>Mise en scène et interprétation</strong> : Aurelia Ivan et François Lazaro<br />
<strong> Scénographie </strong>: Aurélia Ivan</p>
<p><strong>Vendredi 13 février à 12h30 (Repas spectacle) et 21h00 - La Bobine</strong></p>
</div>
<div id="footer">festivaldelamarionette.org<br />
tél: 06.42.81.41.54 </div>
</div>
</body>
</html>
Et la CSS commune à toutes mes pages :
*{
margin:0;
padding:0;
}
body {
background-color:#B0B0B0;
}
#principale {
width: 523px;
background-color:white;
margin-left:auto;
margin-right:auto;
margin-top: 7px;
}
#banniere {
background-image: url(images/banniere.jpg);
height: 160px;
width: 508px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
background-position: bottom;
margin-top: 7px;
}
#btn_accueil {
background-color: #FC00A6;
height: 20px;
width: 127px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
float: left;
}
#menu {
height: 20px;
width: 508px;
margin-right: auto;
margin-left: auto;
}
#menu a{
text-decoration:none;
color:white;
font-size: 11px;
font-weight: bold;
}
#menu a:hover{
color:black;
}
#btn_programme {
background-color: #72FC00;
height: 20px;
width: 127px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
float: left;
font-variant: normal;
}
#btn_tempsspeciaux {
background-color: #00B6FC;
height: 20px;
width: 127px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
float: left;
}
#btn_infospratiques {
background-color: #E08E1C;
height: 20px;
width: 127px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
float: left;
}
#menu_gauche {
clear: both;
float: left;
width: 127px;
background-color: #72FC00;
margin-top: 14px;
padding-bottom: 7px;
margin-left: 7px;
}
#menu_gauche h2{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: right;
margin-bottom: 7px;
margin-top: 7px;
margin-right: 3px;
}
#menu_gauche h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-align: right;
margin-bottom: 7px;
margin-top: 3px;
margin-right: 3px;
}
#corps {
float: left;
margin-right: 28px;
margin-left: 28px;
margin-top: 21px;
width: 324px;
}
#corps h3{
color:#00B6FC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
margin-bottom: 7px;
font-variant: small-caps;
}
#menu_gauche a{
text-decoration:none;
color:#FFFFFF;
}
#menu_gauche a:hover{
background-color:#00B6FC;
}
#corps p {
color:#000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin-bottom: 7px;
}
#footer {
width: 324px;
clear: both;
float: left;
margin-top: 7px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
padding-left: 155px;
}
#menu_gauche_temps {
clear: both;
float: left;
width: 127px;
background-color: #00B6FC;
margin-top: 14px;
padding-bottom: 7px;
margin-left: 7px;
}
#menu_gauche_temps h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: right;
margin-bottom: 7px;
margin-top: 7px;
margin-right: 3px;
}
#menu_gauche_temps h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-align: right;
margin-bottom: 7px;
margin-top: 3px;
margin-right: 3px;
}
#menu_gauche_temps a {
text-decoration:none;
color:#FFFFFF;
}
#menu_gauche_temps a:hover {
background-color:#72FC00;
}
Merci beaucoup à ceux qui auront pris le temps de lire mon post, en espérant que certains d'entres vous ont déjà été confrontés à ce problème et pourront m'aider à le résoudre !
Bonne journée
Modifié par Blop (22 Jan 2009 - 12:16)