Aller au contenu

Pseudo Frame en CSS


furious Gontran

Sujets conseillés

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...

Lien vers le commentaire
Partager sur d’autres sites

Salut,

Heu..je n'ai pas pleinement compris ton message.. :whistling:

Tu parles de la page d'Alsacréation, ou de l'application de son tutoriel ?

xpatval

Lien vers le commentaire
Partager sur d’autres sites

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 ??

Lien vers le commentaire
Partager sur d’autres sites

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.

Modifié par Azon
Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)

Ok, je viens de tester...

Ce n'est pas l'effet desiré.

Voici le 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>

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...

Modifié par furious Gontran
Lien vers le commentaire
Partager sur d’autres sites

Normal que

position:absolute

ne donne pas l'effet désiré.

Ce qu'il te faut c'est utiliser la propriété

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....

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)

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... :boude:

Plus je fais du html/css et plus je me dis que je vais devenir flasheur :whistling:

Modifié par furious Gontran
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...