salut je teste un exemple de bandeau haut en image fixe.
Cela fonctionne, par contre la position absolue de ce bandeau m'empêche un centrage horizontal de ma page. Quelqu'un a t'il la solution SVP.
mon code:
merci
Cela fonctionne, par contre la position absolue de ce bandeau m'empêche un centrage horizontal de ma page. Quelqu'un a t'il la solution SVP.
mon code:
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
/* début du hack "fixed" permettant de fixer le menu fixe sous IE */
body { /* redéfini les propriétés de toute la page */
overflow-y: hidden; /* fonction microsoft supprimant les ascenseurs sous IE */
margin: 0; /* la marge du body est à 0 pixels */
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-align: justify;
} /* marge intérieure à 0 pixels */
html > body {overflow-y: auto} /* annule le overflow-y pour firefox 1.5 et supérieur */
.content { /* boite prenant toute la page sauf le menu fixe*/
height: 100%; /* la hauteur de la boite occupe 100% de l'écran */
overflow: auto;
padding-top: 145px;
} /* on rajoute un ascenseur droit à la boite */
/* fin du hack "fixed" permettant de fixer le menu fixe sous IE */
.bandeauhaut { /* menu fixe en bas de l'écran */
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: left top;
position: absolute; /* La gauche du menu est à 0 pixels du bas de l'écran */
width: 807px; /* largeur du menu = 98% de l'écran */
height: 135px; /* hauteur du menu = 20 pixels */
left: 0px;
top: 0px;
} /* Bordure haute du menu */
body>.bandeauhaut {position:fixed} /* annule le hack "fixed" pour les autres navigateurs que IE */
.boite {
width:807px;
height:100%;
padding-right: 10px;
padding-left: 10px;
} /* boite servant à faire défiler l'écran, en débordant de la page */
</style>
</head>
<body>
<div class="bandeauhaut"> <!-- menu fixe en bas de l'écran -->
</div>
<div class="content"> <!-- début du contenu de la page -->
<div class="boite">
<p>La fonction position:fixed permet de fixer une boite ou une image à l'écran.
Malgrès le défilement de la page, l'objet ainsi fixé ne
bouge pas. Mais, encore un bug d'IE, position:fixed ne marche pas.</p>
<p>Il existe un "hack" émulant sous IE cette fonction bien
pratique. Il est décrit ci-contre.<br>
Son principe est assez simple : on force une boite à prendre tout
l'écran, et on affiche le menu ou la zone qu'on veut fixer quelque
part dans cette boite. Le début du "hack" (body { overflow-y:
hidden ; margin: 0;} ) n'est pas indispensable, mais améliore l'affichage
de la page. La partie .content { height: 100% ; overflow: auto} est par
contre obligatoire.</p>
<p>Si on utilise overflow-y:hidden, il faut ensuite mettre un html>body
{overflow-y:auto} pour l'annuler dans les autres logiciels que IE 6 et
inférieur (lequel ne comprend pas html>body - voir ci-dessous).
En effet, à partir de firfox 1.5, overflow-y est interprété,
et le mettre en hidden dans firefox provoque des problèmes.</p>
<p>Enfin le body>.menu1 {position:fixed} ne fait pas partie du "hack".
Mais il est obligatoire si on veut que la page fonctionne sous Mozilla
ou Opéra. Il repasse en effet le menu de position:absolute en position:fixed.
On écrit body>.menu1 car Internet Explorer ne comprend pas cette
graphie (nouveau bug !) ce qui fait qu'il n'en fait rien, et que pour lui,
position reste bien en absolute.</p>
<p>On peut fixer la zone, en haut, à gauche ou en bas. Il sufit de
changer les positionnements indiqués dans .menu1. On utilise généralement
ce genre de zone pour fixer un menu.</p>
<p>Attention, avec une DTD stricte, ce "hack" ne marche plus sous
IE. Il faut alors cacher la DTD à IE en la faisant précéder
d'un commentaire <!-- blabla -->, que IE ne comprend pas (encore
un bug !).</p><p>La fonction position:fixed permet de fixer une boite ou une image à l'écran.
Malgrès le défilement de la page, l'objet ainsi fixé ne
bouge pas. Mais, encore un bug d'IE, position:fixed ne marche pas.</p>
<p>Il existe un "hack" émulant sous IE cette fonction bien
pratique. Il est décrit ci-contre.<br>
Son principe est assez simple : on force une boite à prendre tout
l'écran, et on affiche le menu ou la zone qu'on veut fixer quelque
part dans cette boite. Le début du "hack" (body { overflow-y:
hidden ; margin: 0;} ) n'est pas indispensable, mais améliore l'affichage
de la page. La partie .content { height: 100% ; overflow: auto} est par
contre obligatoire.</p>
<p>Si on utilise overflow-y:hidden, il faut ensuite mettre un html>body
{overflow-y:auto} pour l'annuler dans les autres logiciels que IE 6 et
inférieur (lequel ne comprend pas html>body - voir ci-dessous).
En effet, à partir de firfox 1.5, overflow-y est interprété,
et le mettre en hidden dans firefox provoque des problèmes.</p>
<p>Enfin le body>.menu1 {position:fixed} ne fait pas partie du "hack".
Mais il est obligatoire si on veut que la page fonctionne sous Mozilla
ou Opéra. Il repasse en effet le menu de position:absolute en position:fixed.
On écrit body>.menu1 car Internet Explorer ne comprend pas cette
graphie (nouveau bug !) ce qui fait qu'il n'en fait rien, et que pour lui,
position reste bien en absolute.</p>
<p>On peut fixer la zone, en haut, à gauche ou en bas. Il sufit de
changer les positionnements indiqués dans .menu1. On utilise généralement
ce genre de zone pour fixer un menu.</p>
<p>Attention, avec une DTD stricte, ce "hack" ne marche plus sous
IE. Il faut alors cacher la DTD à IE en la faisant précéder
d'un commentaire <!-- blabla -->, que IE ne comprend pas (encore
un bug !).</p>
</div>
</div><!-- fin du contenu de la page -->
</body>
</html>merci
