Bonsoir
L'idée est de faire un menu de 6 images en page d'accueil avec un texte d'accompagnement.
La page est valide en Xhtml, mais je patauge sans arriver à obtenir le même rendu entre IE et Firefox. L'image en background est décalée sur la gauche dans IE, et je ne maitrise pas la position : "absolute" pour les images qui sont parfois, fidèlement à la bonne place (la 1 et la 6), et parfois décalées d'un navigateur à l'autre (les autres).
Je n'ai pas encore trouvé de solution dans "Recherche" ou "FAQ" et je demande votre aide s'il vous plait.
Voici mon code :
Merci beaucoup pour une piste.
Serge
L'idée est de faire un menu de 6 images en page d'accueil avec un texte d'accompagnement.
La page est valide en Xhtml, mais je patauge sans arriver à obtenir le même rendu entre IE et Firefox. L'image en background est décalée sur la gauche dans IE, et je ne maitrise pas la position : "absolute" pour les images qui sont parfois, fidèlement à la bonne place (la 1 et la 6), et parfois décalées d'un navigateur à l'autre (les autres).
Je n'ai pas encore trouvé de solution dans "Recherche" ou "FAQ" et je demande votre aide s'il vous plait.
Voici mon code :
#CACHE{7200}
<!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" dir="#LANG_DIR" lang="#LANG">
<head>
<title>[(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{160}|textebrut)" />]
<INCLURE{fond=inc-head}>
<!--[if lt IE 7]>
<style type="text/css">
div#page {
width: expression(document.body.clientWidth <= 742? "740px" : document.body.clientWidth >= 1004? "1002px" : "auto");
}
</style>
<![endif]-->
</head>
<body class="page_sommaire">
<div id="page">
[(#REM) Entete de la page + titre du site ]
<INCLURE{fond=inc/inc-entete_sommaire}>
<h1 class="invisible">#NOM_SITE_SPIP</h1>
[<div class="chapo">(#DESCRIPTIF_SITE_SPIP)</div>]
<div id="conteneur">
[(#REM) Contenu principal]
<div id="contenu">
[(#REM) Afficher le logo ou le titre du site ]
<div id="logo">
<a rel="start" href="#URL_SITE_SPIP/">
[(#LOGO_SITE_SPIP||?{
[(#LOGO_SITE_SPIP
||image_reduire{770,200}
|inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut)]}
|inserer_attribut{title,[(#NOM_SITE_SPIP|textebrut)]}
)]
,
<span id="nom_site_spip">#NOM_SITE_SPIP</span>
})]
</a>
</div>
<div id="signature_chapo">
<p>...</p>
</div>
[(#REM) Afficher les images ! ]
<div id="img_1">
<a href="http://www.mon_site/spip.php?rubrique1"><img src="squelettes/images/photo_1.jpg" alt="..." title="..." width="160" height="99" /></a>
</div>
<div id="img_2">
<a href="http://www.mon_site/spip.php?rubrique2"><img src="squelettes/images/photo_2.jpg" alt="..." title="..." width="160" height="99" /></a>
</div>
<div id="img_3">
<a href="http://www.mon_site/spip.php?rubrique3"><img src="squelettes/images/photo_3.jpg" alt="..." title="..." width="160" height="99" /></a>
</div>
<div id="img_4">
<a href="http://www.mon_site/spip.php?rubrique4"><img src="squelettes/images/photo_4.jpg" alt="..." title="..." width="160" height="99" /></a>
</div>
<div id="img_5">
<a href="http://www.mon_site/spip.php?rubrique5"><img src="squelettes/images/photo_5.jpg" alt="..." title="..." width="160" height="99" /></a>
</div>
<div id="img_6">
<a href="http://www.mon_site/spip.php?rubrique6"><img src="squelettes/images/photo_6.jpg" alt="..." title="..." width="160" height="99" /></a>
</div>
<div class="texte">
<div id="titre">
<h1>...</h1>
</div>
<div id="paragraphe">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="signature">
<p>...</p>
</div>
</div>
</div><!-- fin contenu -->
</div><!-- fin conteneur -->
</div><!-- fin page -->
</body>
</html>
body {
margin: 0;
padding: 0;
color: #BCE6FC;
background: #162579
font-size: 0.96em;
line-height: 1.25;
text-align: center; /* -------- "text-align: center;" pour centrer dans IE -------- */
}
#page {
position: relative;
text-align: left; /* pour annuler l'heritage de text-align: center dans body */
margin: 0 auto; /* auto pour centrer horizontalement la boite dans body pour les navigateurs autres que IE/Windows */
top: 20px;
max-width: 960px;
min-width: 740px;
}
#contenu {
}
/* -------- Pied de page -------- */
#pied {
clear: both;
margin-top: -25px;
height: 30px;
text-align: center;
}
#pied a {
font-weight: normal;
text-decoration: none;
}
#pied a:hover {
color: #70AAEE;
}
#pied img {
vertical-align: bottom;
}
/* ----------------------------------------------------------
Page sommaire - Page sommaire - Page sommaire
----------------------------------------------------------- */
.page_sommaire #logo {
position: absolute; top: -3000em; height: 1%;
}
.page_sommaire #contenu { /* -------- Montage site extensible - contenu top left sommaire -------- */
border: 4px solid black;
background: url(images/fond.jpg) top center no-repeat;
padding: 0;
width: 960px;
height: 594px;
}
.page_sommaire .chapo { /* -------- Début - typographie page d'accueil -------- */
position: absolute;
top: 0px;
left: 0px;
font-size: 0.71em;
text-align: left;
width: 300px;
height: 100px;
padding-top: 30px;
z-index: 50;
}
.page_sommaire .chapo p {
color: #DCFDFF;
margin: 0;
line-height: 1.25;
}
.page_sommaire #signature_chapo {
position: absolute;
top: 7em;
left: 12%;
color: #DCFDFF;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 0.65em;
text-align: left;
z-index: 50;
}
#img_1 {
position: absolute;
top: 400px;
left: 440px;
font-size: 1px;
line-height: 1px;
z-index: 20;
}
#img_2 {
position: absolute;
top: 425px;
right: 60px;
font-size: 1px;
line-height: 1px;
}
#img_3 {
position: absolute;
top: 200px;
right: 3%;
font-size: 1px;
line-height: 1px;
}
#img_4 {
position: absolute;
top: 18px;
left: 51%;
font-size: 1px;
line-height: 1px;
}
#img_5 {
position: absolute;
top: 120px;
left: 18%;
font-size: 1px;
line-height: 1px;
}
#img_6 {
position: absolute;
top: 350px;
left: 7%;
font-size: 1px;
line-height: 1px;
}
.page_sommaire #titre {
position: relative;
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #DCFDFF;
padding-top: 190px;
margin-left: 45%;
text-align: left;
font-size: 80%;
line-height: 1px;
font-weight: normal;
z-index: 50;
}
.page_sommaire #paragraphe {
position: relative;
line-height: 0;
margin-top: 15px;
margin-left: 2%;
z-index: 50;
}
.page_sommaire #paragraphe p {
position: relative;
text-align: center;
font-family: Verdana, Tahoma, Arial, sans-serif;
margin: 0;
line-height: 1.4;
font-size: 0.77em;
font-weight: normal;
}
.page_sommaire #signature {
position: relative;
font-family: Verdana, Tahoma, Arial, sans-serif;
margin-top: 10px;
margin-left: 28%;
font-size: 0.71em;
text-align: left;
z-index: 50;
}Merci beaucoup pour une piste.
Serge
