Merci pour votre aide permanente
d'abord le site
http://hoteldumenabe.free.fr
Je m'en remet à vous car la solution m'échappe
Les cadres de ma page ne sont pas alignés de la même façon sous Mozilla et IE, pourquoi ? et comment régler ce problème?
regardez plutot le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Le site de l'hotel du Menabe</title><!-- titre -->
<meta name="keywords" content="Madagascar, madagascar, mada, Mada, hotelmenabe, menabehotel, hotel du menabe, Hotel du menabe, hotel menabe, belo, Belo, Belo sur Tsiribihina, belo sur tsiribihina, descente du fleuve, tsiribihina, Tsiribihina, pirogue, Tsingy de Bemaraha, tsingy, voyage madagascar, trek, trekking Madagascar, Kirindy, Kirindy-Mitea, hôtel, auberge, pension, gite, repas, restaurant, Restaurant, Antsirabe, Miandrivazo, Belo sur Mer, camping, Malagasy, malgache, tour operator, hébergements, hebergements, hebergement, hébergement, chambre, chambres, ouest de madagascar, location, 4x4, Belo sur Mer, fitampo, morondava, baobab, lemurien, spyros, spiros, famadihana, fitampoha, prince, retournement, " />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="index.css" href="index.css" />
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:646px;
top:-54px;
width:85px;
height:138px;
border:1px none #000000;
z-index:1;
}
#Layer2 {
position:absolute;
left:773px;
top:10px;
width:88px;
height:82px;
background-color:#CCCCFF;
border:1px none #000000;
z-index:2;
}
#Layer3 {
position:absolute;
left:864px;
top:8px;
width:103px;
height:85px;
background-color:#CCCCFF;
border:1px none #000000;
z-index:3;
}
#Layer4 {
position:absolute;
left:488px;
top:3px;
width:282px;
height:23px;
background-color:#3366CC;
z-index:4;
color: #FFFF33;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 26px;
text-decoration: blink;
}
#Layer5 {
position:absolute;
left:431px;
top:66px;
width:238px;
height:21px;
background-color:#3366CC;
border:1px none #000000;
z-index:5;
color: #FF6600;
text-align: center;
text-decoration: blink;
}
#Layer6 {
position:absolute;
left:0px;
top:2px;
width:452px;
height:91px;
border:1px none #0033CC;
z-index:6;
}
#Layer7 {
position:absolute;
left:441px;
top:431px;
width:542px;
height:98px;
border:1px none #000000;
z-index:7;
}
#Layer8 {
position:absolute;
left:344px;
top:491px;
width:161px;
height:56px;
border:1px none #000000;
z-index:8;
}
#Layer9 {
position:absolute;
left:166px;
top:434px;
width:225px;
height:63px;
border:1px none #000000;
z-index:8;
}
#Layer10 {
position:absolute;
left:204px;
top:447px;
width:123px;
height:74px;
background-color:#CCCCFF;
layer-background-color:#CCCCFF;
border:1px none #000000;
z-index:9;
}
-->
</style>
</head>
<!-- fin de la tete -->
<body> <!-- le corps -->
<div id="Layer10"><img src="gifanime/enconstruction.gif" alt="" width="132" height="89" /></div>
<div id="Layer1"><img src="arriereplan/avionretouche1.jpg" alt="" width="127" height="141" /></div>
<div id="Layer2"><img src="gifanime/helice1.gif" alt="" width="91" height="83" /></div>
<div id="Layer3"><img src="arriereplan/avionretouche.jpg" alt="" width="104" height="88" /></div>
<div id="Layer4">HOTEL DU MENABE </div>
<div id="Layer5"><strong>Belo sur Tsiribihina</strong> </div>
<div id="Layer6"><img src="banniere/tsiribihina.jpg" alt="" width="458" height="95" /></div>
<div id="Layer7"><img src="gifanime/lemurien1.gif" alt="" width="550" height="150" /></div>
<div id="Layer8"><img src="gifanime/www.gif" alt="www" width="463" height="75" /></div>
</div>
<div id="menu"> <!-- Les menus -->
<div class="element_menu">
<h3>Pour venir</h3>
<ul>
<li><a href="larestauration.html"><strong>La restauration</strong></a></li>
<li><a href="leschambres.html"><strong>Les chambres</strong></a></li>
<li><a href="lestarifs.html"><strong>Les tarifs</strong></a></li>
<li><a href="infohotel.html"><strong>Info hôtel</strong></a></li>
</ul>
</div>
<div class="element_menu">
<h3>Aux Alentours</h3>
<ul>
<li><a href="lestsingy.html"><strong>Les Tsingy</strong></a></li>
<li><a href="lesbaobabs.html"><strong>Les Baobabs</strong></a></li>
<li><a href="lestombeaux.html"><strong>Les tombeaux</strong></a></li>
</ul>
</div>
<div class="element_menu">
<h3>Divers</h3>
<ul>
<li><a href="contact.html"><strong>Contact</strong></a></li>
<li><a href="index bis.html"><strong>Nos periples</strong></a></li>
<li><a href="index bis.html"><strong>Diaporama</strong></a></li>
</ul>
</div>
</div>
<!-- Le corps -->
<div id="corps"> <!-- balise paragraphe -->
<p></p><h1>Bienvenue</h1><p></p>
<!-- pour sauter une ligne -->
<h5>Une bâtisse coloniale datant du siècle dernier, dressée aux confins du village vous attend dans la commune de Belo Sur Tsiribihina.
Denise et Spyros, les propriétaires Gréco Franco Malgache (et oui ça existe) vous accueillent de manière très conviviale et détendue.
<!-- pour sauter une ligne -->
</h5>
<h5>Après la descente de la Tsiribihina en pirogue ou en chaland depuis Miandrivazo, avant et après la visite des Tsingy de Bemahara, une halte s'impose à l'Hôtel du Menabe de <em>Belo sur Tsiribihina.</em></h5>
<h5> La douche, le lit (enfin le lit !!!) et les repas succulents sont prévus après l'aventure et pour reprendre des forces avant de continuer le périple malgache. </h5><br />
<p></p><h5>Mais entrez donc pour découvrir votre prochaine halte</h5><p></p>
<!-- fermeture du paragraphe -->
</div>
</body><!-- fin de corps -->
</html>
[#]et le css
/* Mon css */
body /* le corps de la page se situe sous les cadres visibles */
{
background-color: #3366CC; /* couleur de fond du body */
font-weight: bolder;
font-family: Geneva, Arial, Helvetica, sans-serif;
background-repeat: repeat;
}
/* L'en-tête */
.element_entete
{
color:#FF3399;
}
/* Le menu */
#menu /* Se situe sous les cadres visibles */
{
float: left; /* Cadre du menu qui flottera à gauche */
width: 140px; /* Largeur du menu */
height: 125px; /* Hauteur du menu */
margin-top: 90px;
}
.element_menu /* Les elements qui doivent etre modifiés */
{
background-repeat: no-repeat; /* pour répéter dans tous les sens l'image de fond */
border: 1px solid black; /* Bordure du Menu */
margin-bottom: 10px; /* Pour éviter que les éléments du menu ne soient trop collés entre eux */
background-image: url(arriereplan/fond-portail_02.jpg); /* image d'arrire plan */
height: 152px;
width: 170px; /* Très important : donner une taille au menu */
font-family: "Times New Roman", Times, serif;
}
/* Quelques effets sur les menus */
.element_menu h3 /* Tous les titres de menus <h3>Pour venir</h3><h3>Titre menu</h3>*/
{
color: #FFFF33;/* la couleur */
font-family: Georgia, "Times New Roman", Times, serif;/* Une police */
text-align: center;/* la position */
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/puce.png"); /* 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; /* Marge exterieure. 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 */
{
color: #3366CC;/* la couleur */
font-family:Georgia, "Times New Roman", Times, serif;/* Une police */
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
color: #FF33CC; /* la couleur du lien*/
font-family:Georgia, "Times New Roman", Times, serif;/* Une police */
}
/* Le corps de la page */
#corps /* */
{
height: 480px;
width: 750px;
margin-left: 180px;
border: 1px solid black;
background-image: url(arriereplan/fondretouche.jpg);
margin-top: 90px;
}
.element_corps
{
}
h5 p:first-letter /* La première lettre de chaque paragraphe */
{
font-weight: bold; /* En gras */
font-size: 24px; /* Ecrit légèrement plus gros que la normale */
color: #FF0099; /* En bleu */
}
#corps h1 /* le titre en h1 <h1>L'hotel du Menabe</h1>*/
{
color: #3366CC;/* Une couleur */
text-align: center;/* Une position */
font-family: Georgia, "Times New Roman", Times, serif;/* Une police */
}
#corps h4 /* le titre en h1 <h1>L'hotel du Menabe</h1>*/
{
color: #3366CC;/* Une position */
font-family: Georgia, "Times New Roman", Times, serif;
}
#corps h2 /* les titres en h2 <h2>Pourquoi venir ?</h2><h2>L'auteur</h2>*/
{
height: 10px; /* la hauteur du bandeau*/
background-image: url(arriereplan/on_r2_c1.jpg);/* l'image de fond */
background-repeat: no-repeat; /* la non répétion de l'image de fond*/
font-family: Georgia, "Times New Roman", Times, serif;/* Une police */
padding-left: 30px;/* ecart entre la bordure gauche et l'écriture */
color: #B3B3B3;/* la couleur */
/*text-align: center;/* si je veux centrer mon texte dans le bandeau */
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
h12
{
color:#FF0000;
text-decoration: blink;
}
h5 /*texte central */
{
font-family:Georgia, "Times New Roman", Times, serif;/* Une police */
color:#CCFF66}
#larestauration
{
height: 560px;
width: 995px;
background-image: url(arriereplan/titrelarestauration.jpg);
background-repeat: no-repeat;
margin-left: 15px;
}
.element_larestauration
{
height: 100%;
width: 100%;
}
#tarifs
{
background-image: url(arriereplan/titrelarestauration.jpg);
height: 10%;
width: 100%;
border: thin outset #FF0066;
}
Edit par Hermann. : correction de l'URL
Modifié par Hermann (17 May 2007 - 12:12)
