Bonjour,
Je pars de ce tutorial:
AlsaCreations
Le probleme de ce tuto c'est que la frame possede son propre ascenceur, ce qui n'est pas trop joli vu qu'il est collé a l'ascenceur du navigateur.
Existe t'il un moyen de fixer le menu tout en faisant defiler le contenu (comme dans une frame) a l'aide de l'ascenceur du navigateur ??
Et ainsi eviter le diouble ascenceur...
Version complète: sur le forum Webmaster Hub : Pseudo Frame en CSS
Salut,
Heu..je n'ai pas pleinement compris ton message..
Tu parles de la page d'Alsacréation, ou de l'application de son tutoriel ?
xpatval
Heu..je n'ai pas pleinement compris ton message..
Tu parles de la page d'Alsacréation, ou de l'application de son tutoriel ?
xpatval
en fait c'est l'exemple donné dans le tuto.
En gros ce que je veux faire c'est de bloquer mon menu a gauche pour qu'il soit toujours present.
Le contenu etant a droite.
Mais si j'utilise des iframe ou des pseudos frame en CSS je me retrouve avec deux ascenceurs: celui de la frame et celui du navigateur.
La grande question c'est de savoir si je peux bloquer mon menu a gauche mais n'avoir qu'un seul ascenceur: celui du navigateur...
C'est plus clair ??
En gros ce que je veux faire c'est de bloquer mon menu a gauche pour qu'il soit toujours present.
Le contenu etant a droite.
Mais si j'utilise des iframe ou des pseudos frame en CSS je me retrouve avec deux ascenceurs: celui de la frame et celui du navigateur.
La grande question c'est de savoir si je peux bloquer mon menu a gauche mais n'avoir qu'un seul ascenceur: celui du navigateur...
C'est plus clair ??
Salut Gontran,
La première chose qui me vient à l'idée, c'est de placer le div #menu en absolute par rapport à la fenêtre du navigateur.
Tu auras donc toujours le menu à l'écran, et plus besoin d'utiliser le overflow ce qui supprime du coup la barre de défilement.
Perso, j'ai jamais mis en place ce genre de menu, mais ça doit être faisable.
La première chose qui me vient à l'idée, c'est de placer le div #menu en absolute par rapport à la fenêtre du navigateur.
Tu auras donc toujours le menu à l'écran, et plus besoin d'utiliser le overflow ce qui supprime du coup la barre de défilement.
Perso, j'ai jamais mis en place ce genre de menu, mais ça doit être faisable.
Je teste ca et je donne des nouvelles
Ok, je viens de tester...
Ce n'est pas l'effet desiré.
Voici le code:
En fait, ce que je veux faire (si c'est possible en CSS) c'est desolidariser mon div gauche (le rectangle rouge) pour qu'il soit TOUJOURS visible meme lorsque l'on fais defiler le contenu a droite en utilisant l'ascenceur du navigateur...
(Je desirais eviter le double ascenceur que provoque l'overflow.)
Est ce possible en CSS ?
On peux le faire en javascript mais bon, un peu la flemme de copier un code snas le comprendre...
Ce n'est pas l'effet desiré.
Voici le code:
CODE
<html>
<head></head>
<title></title>
<style type="text/css">
<!--
.gauche {
position:absolute;
left:0;
width: 180px;
height: 338px;
background-color:red;
}
.frame {
margin-left: 180px;
width: auto;
height: 338px;
font-size: 14px;
}
-->
</style>
<body>
<div class="gauche"></div>
<div class="frame">
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
</div>
</body>
<head></head>
<title></title>
<style type="text/css">
<!--
.gauche {
position:absolute;
left:0;
width: 180px;
height: 338px;
background-color:red;
}
.frame {
margin-left: 180px;
width: auto;
height: 338px;
font-size: 14px;
}
-->
</style>
<body>
<div class="gauche"></div>
<div class="frame">
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p>
</div>
</body>
En fait, ce que je veux faire (si c'est possible en CSS) c'est desolidariser mon div gauche (le rectangle rouge) pour qu'il soit TOUJOURS visible meme lorsque l'on fais defiler le contenu a droite en utilisant l'ascenceur du navigateur...
(Je desirais eviter le double ascenceur que provoque l'overflow.)
Est ce possible en CSS ?
On peux le faire en javascript mais bon, un peu la flemme de copier un code snas le comprendre...
Normal que
Ce qu'il te faut c'est utiliser la propriété
Voir aussi cette solution, mais je n'ai pas testé...
Pour faire tout ça correctement, faire attention aux calques imbriqués, car le mécanisme de la "cascade" est impitoyable avec les erreurs....
CODE
position:absolute
ne donne pas l'effet désiré. Ce qu'il te faut c'est utiliser la propriété
CODE
position:fixed
mais comme d'habitude, cela pose des problèmes de compatibilité avec IE ce qui oblige si on veut l'utiliser à se tourner vers le fameux IE7, qui rappelons le est un script côté serveur qui rend IE standards compliant...Voir aussi cette solution, mais je n'ai pas testé...
Pour faire tout ça correctement, faire attention aux calques imbriqués, car le mécanisme de la "cascade" est impitoyable avec les erreurs....
Les trucs de la page que tu donne marche plutot bien.
Mais comme d'hab c'est une pure galere de compatibilité avec les differents navigateurs...
Plus je fais du html/css et plus je me dis que je vais devenir flasheur
Mais comme d'hab c'est une pure galere de compatibilité avec les differents navigateurs...
Plus je fais du html/css et plus je me dis que je vais devenir flasheur
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.