Jump to content

IE et position fixed


babyssou

Recommended Posts

Bonjour,

 

Pour des besoins "perso", j'ai testé ce WE le hack CSS pour permettre de fixer des éléments dans la page... et bien, ça marche (pour IE5 et IE6) !!! (J'ai testé en <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">, pas dans d'autres DTD)

 

Voici une petite explication pour ceux qui en ont/auront besoin...

 

1) on "éclate" le document en deux parties : <HTML> et l'élément à fixer,

2) on déplace <BODY> sous <HTML> (mais c'est du CSS, donc pas de modif du code html)

3) on "place" sur la page l'élément à fixer et <HTML> (via margin, padding et position)

4) on "joue" sur les ascenceurs pour "faire croire" que <BODY> et <HTML> ne font toujours qu'un

 

Voici le code, il est à mettre dans le fichier "*.css" :

 

@media Screen

{

DIV#menu, DIV#plan {

POSITION: fixed !important; POSITION: absolute;

margin-left: -3%;

}

HTML {OVERFLOW-Y: hidden;}

HTML BODY {

PADDING: 0 !important;PADDING: 0 3% 0 0;

OVERFLOW-Y: auto;

FONT-SIZE: 100%;

HEIGHT: 100%;

WIDTH: 90%;

margin: 0 0 0 5%;

}

}

 

J'ai deux DIV de fixés, "menu" et "plan" ; et "!important", c'est pour FF lorsqu'il a besoin de valeurs différentes de IE

 

Si vous voulez vraiment voir la tricherie, vous scrollez la page avec le bouton du milieu de la souris. Ce bouton agi sur le document, pas sur le BODY, donc...

 

La partie d'un de mes sites où on peut le voir :

http://flyonly.free.fr/La_Carangue_aux_Yeu...or/accueil.html

Link to comment
Share on other sites

Très fort ! Respect !

Tu as trouvé ça seul, ou tu as des sources ?

 

Sachant que le faux IE7 le traite mais ne voulant que ce "correctif", j'ai fait une recherche sur Google : "hack css IE fixed"...

 

Ensuite, j'ai repris le hack en rajoutant quelques "!important", ce qui l'a allégé de quelques lignes...

 

Il est nécessaire de positionner les "margin" et "padding" de chaque page avec dans le <HEAD> un

<style type="text/css" media="screen">
<!--
DIV#menu, DIV#plan {
    WIDTH: xx%;
    PADDING: 0 !important;PADDING: 0 y% 0 0;
    MARGIN: 0 0 0 z%;
}
-->
</style>

 

Voilà. Le seul mérite que j'ai, c'est de l'avoir essayé...

Link to comment
Share on other sites

Vous pouvez m'expliquer un peu plus comment ca fonctionne ??

 

Je ne comprend pas où il faut placer ce code source. Je ne sais pas utiliser les feuilles de style CSS.

 

Merci !

pihug12 (merci)

Bonjour,

 

"Comment ça marche" ?

1) on "éclate" le document en deux parties : <HTML> et l'élément à fixer,

2) on déplace <BODY> sous <HTML> (mais c'est du CSS, donc pas de modif du code html)

3) on "place" sur la page l'élément à fixer et <HTML> (via margin, padding et position)

4) on "joue" sur les ascenceurs pour "faire croire" que <BODY> et <HTML> ne font toujours qu'un

 

Le code est à placer dans ton fichier CSS, mais tu peux le mettre dans le <HEAD> de chacune de tes pages (voir ma réponse à Manu).

 

Heu, les styles, que ce soit en HTML, Word, WordPerfect, Work, OpenOffice, PSP... sont incontournables ! Il faut les utiliser au maximum, ils allègent le document et le rendent homogène... tout en donnant des fonctionnalités bien plus grandes.

 

Pour les CSS, prends "TopStyle Lite", il est parfait et il s'intègre à tous les éditeurs de page web.

Link to comment
Share on other sites

Bonjour tout le monde !!

 

Euh... je comprend toujours pas comment on peut définir l'élément qui doit resté "bloqué".

Il faut placé ton script entre les balises <HEAD> c'est ca ?? Et ensuite comment définir l'élément qui doit rester en haut ??

 

Merci pour ton aide!

pihug12 (merci)

 

[PS : J'ai trouvé TopStyle Lite 3.10 ici.]

Link to comment
Share on other sites

Bonjour tout le monde !!

 

Euh... je comprend toujours pas comment on peut définir l'élément qui doit resté "bloqué".

Il faut placé ton script entre les balises <HEAD> c'est ca ?? Et ensuite comment définir l'élément qui doit rester en haut ??

 

Merci pour ton aide!

pihug12 (merci)

 

[PS : J'ai trouvé TopStyle Lite 3.10 ici.]

 

Bonjour,

 

C'est bien cette version de TopStyle.

 

En fait, "DIV#menu, DIV#plan" signifie que dans ton code, tu as :

 

<DIV id='menu' ...>

et

<DIV id='plan' ...>

 

Ils sont n'importe où dans le code, mais il vaut mieux les mettre juste aprés la balise <BODY> pour des questions de lisibilité.

 

Pour le "script CSS" :

 

1) soit tu le mets dans un fichier externe qui a pour extension *.css, par exemple "monstyle.css", avec une entrée spécifique à la visualisation (@media Screen) et tu l'appelles dans le HEAD par

<link rel="stylesheet" type="text/css" href="monstyle.css">

 

2) soit il est directement dans le HEAD (mais il va alourdir la page) :

<style type="text/css" media="screen">

<!--

... le code css...

-->

</style>

 

PS : tu peux aussi faire une entrée avec le média print pour que ce(s) DIV ne se voi(en)t pas sur les impressions :

<style type="text/css" media="print">

<!--

#menu, #plan {

display:none;

}

-->

</style>

(ou "@media Print" si l'entrée est dans ton *.css)

 

Et pour tes heures de train, consulte

+ selfhtml,

+ la syntaxe des sélecteurs CSS (fait une recherche sur "Syntaxe sélecteurs CSS", plusieurs pages en parlent)

+ et la recommandation CSS2 du W3C en français

 

Cordialement

Link to comment
Share on other sites

Je vais essayer ton truc, j'avais essayé lors, du passage Tableaux => Div de la structure de mon site, de bloqué mon menu de gauche et l'entête via les css sans succès.

Si vous voulez vraiment voir la tricherie, vous scrollez la page avec le bouton du milieu de la souris. Ce bouton agi sur le document, pas sur le BODY, donc...
Cela n'apparait qu'en bas de page ou brutalement l'ascenseur remonte et le bas de celui-çi n'est plus en bas de page.
Link to comment
Share on other sites

Je vais essayer ton truc, j'avais essayé lors, du passage Tableaux => Div de la structure de mon site, de bloqué mon menu de gauche et l'entête via les css sans succès.Cela n'apparait qu'en bas de page ou brutalement l'ascenseur remonte et le bas de celui-çi n'est plus en bas de page.

 

J'ai constaté que le scroll était "mauvais" à la maison, avec une souris à molette, mais au travail, avec ma souris à trois boutons, le scroll se fait bien sur toute la page.

 

Pour voir la supercherie à coup sûr, il suffit de diminuer la taille de la police, l'ascenceur rentre alors dans la page.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.