Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Remplacer un frameset ?

64 réponses
Avatar
Pascale
Bonjour à tous,

Paraît que les « cadres » c'est désuet, pas bien tout ça (vrai ou faux ?).
Donc je me suis dit que ce serait bien des les remplacer par des div mises
en forme correctement avec une CSS qui va bien.
Mon souci est cette page : http://www.valinfo.org/galpres.php
La liste de gauche doit pouvoir défiler de haut en bas et de bas en haut
sans que la partie droite ne bouge. Facile théoriquement, en mettant
position: fixed sur la div de droite (l'affichage de contenu).
Seulement, là où ça se gâte, c'est que si on clique sur l'un des sigles à
gauche, on affiche à droite un contenu qui dans la plupart des cas
nécessite lui aussi un défilement vertical, indépendant de celui de la
liste à gauche. Et c'est là que le positionnement fixed ne convient pas,
car il n'y a pas de défilement possible (ce qui se comprend).
Si quelqu'un pouvait m'aider, ce serait BIEN, parce que là, compte tenu de
mon niveau d'ignorance en CSS, je galère un peu beaucoup...

--
Pascale

10 réponses

1 2 3 4 5
Avatar
Sergio
Pascale a couché sur son écran :

Paraît que les « cadres » c'est désuet, pas bien tout ça (vrai ou faux ?).
Donc je me suis dit que ce serait bien des les remplacer par des div mises
en forme correctement avec une CSS qui va bien.
Mon souci est cette page : http://www.valinfo.org/galpres.php
La liste de gauche doit pouvoir défiler de haut en bas et de bas en haut
sans que la partie droite ne bouge. Facile théoriquement, en mettant
position: fixed sur la div de droite (l'affichage de contenu).
Seulement, là où ça se gâte, c'est que si on clique sur l'un des sigles à
gauche, on affiche à droite un contenu qui dans la plupart des cas
nécessite lui aussi un défilement vertical, indépendant de celui de la
liste à gauche. Et c'est là que le positionnement fixed ne convient pas,
car il n'y a pas de défilement possible (ce qui se comprend).
Si quelqu'un pouvait m'aider, ce serait BIEN, parce que là, compte tenu de
mon niveau d'ignorance en CSS, je galère un peu beaucoup...



AMHA, c'est le menu (à gauche) qui devrait être fixe, et le contenu (à
droite) qui devrait pouvoir scroller.

En fait c'est ton menu est trop long. essaie de faire un menu plus
court, sans les logos (tu peux faire apparaître le logo quand on passe
la souris dessus). Tu peux aussi essayer de faire des menus
hiérarchisés (avec sous menu).

Bref revoir un peu l'ergonomie du truc qui fait un peu "vieillot".

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
Pascale
Sergio écrivait
news::

AMHA, c'est le menu (à gauche) qui devrait être fixe, et le contenu (à
droite) qui devrait pouvoir scroller.



Vu sa longueur, ce n'est pas possible.

En fait c'est ton menu est trop long. essaie de faire un menu plus
court, sans les logos (tu peux faire apparaître le logo quand on passe
la souris dessus). Tu peux aussi essayer de faire des menus
hiérarchisés (avec sous menu).



Même sans les logos et en écrivant en xxx-small, ça n'ira pas...

Bref revoir un peu l'ergonomie du truc qui fait un peu "vieillot".



Ben... quand je vois le design et le manque de lisibilité de certains trucs
« très mode », je me dis que le vieillot, ce n'est pas si mal (-:

--
Pascale
Avatar
SAM
Le 10/29/08 11:01 AM, Pascale a écrit :
Bonjour à tous,

Paraît que les « cadres » c'est désuet, pas bien tout ça (vrai ou faux ?).
Donc je me suis dit que ce serait bien des les remplacer par des div mises
en forme correctement avec une CSS qui va bien.
Mon souci est cette page : http://www.valinfo.org/galpres.php



Je ne comprends rien au fonctionnement de ce site.
Par exemple, le retour à l'accueil renvoie sur la page index ou parfois
à celle +/- suivante : index.suite.2
C'est à peine si je remarque les titres des pages (en blanc sur fond
bleu-clair)


La liste de gauche doit pouvoir défiler de haut en bas et de bas en haut
sans que la partie droite ne bouge. Facile théoriquement, en mettant
position: fixed sur la div de droite (l'affichage de contenu).



Non, ce n'est pas comme ça qu'on fait,
- menu en float:left et overflow:auto
ou
- menu en position:absolute et overflow:auto
- contenu en "normal" et margé à gauche

CSS :
==== body, html { position: relative; height: 100%; margin: 0; }
#menu { list-style: none; text-align: center;
width: 260px; height: 100%;
float: left; overflow: auto;
margin: 0; padding: 0;
}
#menu img { margin: 6px 0; border: 0; }
#contenu { margin-left: 275px; border: 1px solid; }

HTML:
==== <ul id="menu">
<li><a href="00125.php"><img src="00125.jpg" alt="logo"></a></li>
<li><a href="00124.php"><img src="00124.jpg" alt="logo"></a></li>

<li><a href="00001.php"><img src="00001.jpg" alt="logo"></a></li>
<ul>
<div id="contenu">
<h1>VALINFO</h1>
<p> bla bla </p>
<p id="pieds"> blabla </p>
</div>



Seulement, là où ça se gâte, c'est que si on clique sur l'un des sigles à
gauche, on affiche à droite un contenu qui dans la plupart des cas
nécessite lui aussi un défilement vertical, indépendant de celui de la
liste à gauche. Et c'est là que le positionnement fixed ne convient pas,
car il n'y a pas de défilement possible (ce qui se comprend).



ça peut bien être en fixed et dimensionné en hauteur et overflowed en auto
(attention : problèmes en fixed avec certains IE)

Si quelqu'un pouvait m'aider, ce serait BIEN, parce que là, compte tenu de
mon niveau d'ignorance en CSS, je galère un peu beaucoup...



Un site esstrordinaire : CSS Play :
<http://www.cssplay.co.uk/menu/index.html>
menus :
<http://www.cssplay.co.uk/menus/>
canevas de pages :
<http://www.cssplay.co.uk/menus/>

à mettre en barre perso :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
<http://www.w3.org/TR/CSS21/indexlist.html>

--
sm
Avatar
SAM
Le 10/29/08 12:12 PM, Pascale a écrit :
Sergio écrivait
news::

AMHA, c'est le menu (à gauche) qui devrait être fixe, et le contenu (à
droite) qui devrait pouvoir scroller.



Vu sa longueur, ce n'est pas possible.



à ce propos ...
est-ce bien utile d'avoir ce "menu" par ordre chronologique plutôt que
par catégories ?
Un peu chiant de devoir survoler les logos pour savoir (par bulle-info)
de quoi peut bien traiter l'asso correspondante
(le découper en tronçons ?)

Ben... quand je vois le design et le manque de lisibilité de certains trucs
« très mode », je me dis que le vieillot, ce n'est pas si mal (-:



Toutafé d'accord, les trucs hyper "design" *mal compris* en images
photoshoppées longuement n'apportent la plupart du temps que
désagrément (dont le moindre : scrolls pour accéder au contenu pour
laisser la place aux décorations)
et ... sans parler des beurks flash :-(

Il n'empêche ... tenter d'en améliorer les contrastes ?

et ... tenter d'en simplifier la navigation générale ?

Mais peut-être ce site souffre t-il d'un
"trop embrasse mal étreint" ?

--
sm
Avatar
Pascale
SAM écrivait
news:4908476c$0$881$:

Je ne comprends rien au fonctionnement de ce site.
Par exemple, le retour à l'accueil renvoie sur la page index ou
parfois à celle +/- suivante : index.suite.2
C'est à peine si je remarque les titres des pages (en blanc sur fond
bleu-clair)



Il faut dire que la page que j'ai proposée n'est pas accédée directement,
donc la perception du site est forcément faussée. On a eu des compliments
sur la lisibilité et l'accessibilité de la part d'une association de
malvoyants !

Non, ce n'est pas comme ça qu'on fait,
- menu en float:left et overflow:auto
ou
- menu en position:absolute et overflow:auto
- contenu en "normal" et margé à gauche



Quand je dis que je suis ignorante, c'est pas une blague : je ne
connaissais pas du tout ce paramètre overflow !

CSS :
==== > body, html { position: relative; height: 100%; margin: 0; }
#menu { list-style: none; text-align: center;
width: 260px; height: 100%;
float: left; overflow: auto;
margin: 0; padding: 0;
}
#menu img { margin: 6px 0; border: 0; }
#contenu { margin-left: 275px; border: 1px solid; }

HTML:
==== > <ul id="menu">
<li><a href="00125.php"><img src="00125.jpg" alt="logo"></a></li>
<li><a href="00124.php"><img src="00124.jpg" alt="logo"></a></li>

<li><a href="00001.php"><img src="00001.jpg" alt="logo"></a></li>
<ul>
<div id="contenu">
<h1>VALINFO</h1>
<p> bla bla </p>
<p id="pieds"> blabla </p>
</div>



Merci (-:

ça peut bien être en fixed et dimensionné en hauteur et overflowed en
auto (attention : problèmes en fixed avec certains IE)



Oui, les IE6 et antérieurs ont déjà quelques soucis avec le site, donc
quand quelqu'un se plaint, on lui conseille de mettre à jour (IE7) ou
d'utiliser Firefox, Opera...

Un site esstrordinaire : CSS Play :
<http://www.cssplay.co.uk/menu/index.html>
menus :
<http://www.cssplay.co.uk/menus/>
canevas de pages :
<http://www.cssplay.co.uk/menus/>

à mettre en barre perso :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
<http://www.w3.org/TR/CSS21/indexlist.html>



Je sens que mes signets vont s'enrichir !

Merci encore !

--
Pascale
www.valinfo.org - Calendrier et annuaire de la vie associative locale
Avatar
Pascale
SAM écrivait
news:49084b2a$0$954$:

à ce propos ...
est-ce bien utile d'avoir ce "menu" par ordre chronologique plutôt que
par catégories ?
Un peu chiant de devoir survoler les logos pour savoir (par
bulle-info) de quoi peut bien traiter l'asso correspondante
(le découper en tronçons ?)



Oui mais non, enfin, faut voir (-: On pourrait en effet faire une galerie
par thème d'activité, mais le but c'est aussi que les gens aillent voir au-
delà de leur pré carré.

Toutafé d'accord, les trucs hyper "design" *mal compris* en images
photoshoppées longuement n'apportent la plupart du temps que
désagrément (dont le moindre : scrolls pour accéder au contenu pour
laisser la place aux décorations)
et ... sans parler des beurks flash :-(



Et oui...!

Il n'empêche ... tenter d'en améliorer les contrastes ?
et ... tenter d'en simplifier la navigation générale ?



Oui, de fait, ceci est prévu... sauf que convaincre le créateur du site...
qui est quasiment daltonien (o: ....
Pour l'instant, je suis pour l'instant en train de bosser sur le PHP (le
site n'est pas aux « normes » PHP5), mais il est terriblement tentant de
faire un petit lifting au HTML en passant... Je compte de toutes manières
apporter pas mal de modifications, en particulier pour réduire au minimum
l'usage des tables et des frames.

Mais peut-être ce site souffre t-il d'un
"trop embrasse mal étreint" ?



Oui mais non (-: La galerie des pages de présentation est un cas un peu à
part dans la mesure où elle est « générale ». La majorité des consultations
sur le site se font d'abord par département, ensuite, si on le souhaite,
par thème d'activité, par commune, etc.

--
Pascale
www.valinfo.org - Calendrier et annuaire de la vie associative locale
Avatar
SAM
Le 10/29/08 12:48 PM, Pascale a écrit :
SAM écrivait
news:4908476c$0$881$:

Je ne comprends rien au fonctionnement de ce site.
Par exemple, le retour à l'accueil renvoie sur la page index ou
parfois à celle +/- suivante : index.suite.2
C'est à peine si je remarque les titres des pages (en blanc sur fond
bleu-clair)



Il faut dire que la page que j'ai proposée n'est pas accédée directement,



J'ai bien parlé du "site" (je l'ai butiné à partir de l'url principale)

donc la perception du site est forcément faussée. On a eu des compliments
sur la lisibilité et l'accessibilité de la part d'une association de
malvoyants !



accessibilité et facilité sont 2 choses différentes ;-)

Non, ce n'est pas comme ça qu'on fait,




(...)

Merci (-:



dislexsisme ? : - ) -> :-)

Je sens que mes signets vont s'enrichir !

Merci encore !



padekoi ;-)
et bon courage.
... les CSS sont longues à s'approprier
(surtout avec IE qui en fait ce qu'il veut)

--
sm
Avatar
newdb
Pascale <chaton.tigre+ wrote:
SAM écrivait
news:49084b2a$0$954$:
> Il n'empêche ... tenter d'en améliorer les contrastes ?
> et ... tenter d'en simplifier la navigation générale ?
Oui, de fait, ceci est prévu... sauf que convaincre le créateur du site...
qui est quasiment daltonien (o: ....



hum...
ta page d'accueil en fonction des trois principales familles de
daltonisme :
<http://www.circaete.net/vrac/dalto.jpg>

--
@@@@@
E -00 comme on est very beaux dis !
' `) /
|_ =="
Avatar
Pascale Peyrol
(denisb) écrivait news:1ipkree.8kxedc1p37klgN%
log.org:

hum...
ta page d'accueil en fonction des trois principales familles de
daltonisme :
<http://www.circaete.net/vrac/dalto.jpg>



Arf© Merci, je vais lui demander lesquelles sont semblables, selon lui...
(:

--
Pascale
Kekcestruc, Raphia, Le Jardin des Amis,
frj-gazette, Mon Beau Jardin, Valinfo
et autres outils de jardin sont sur http://www.la-grille-verte.net
Avatar
Pascale Peyrol
SAM écrivait
news:4908516a$0$960$:

J'ai bien parlé du "site" (je l'ai butiné à partir de l'url
principale)



On envisage en effet de revoir la navigation... ce sera la version 3.0.0 du
site... beaucoup de travail en perspective...

accessibilité et facilité sont 2 choses différentes ;-)



C'est vrai (:

dislexsisme ? : - ) -> :-)



Ben pourquoi ?

Je sens que mes signets vont s'enrichir !

Merci encore !


padekoi ;-)
et bon courage.



Je me suis aperçue que je connaissais CSS Player, mais que j'avais paumé
cette adresse, je suis bien contente de l'avoir retrouvée grâce à toi.

... les CSS sont longues à s'approprier
(surtout avec IE qui en fait ce qu'il veut)



Oui ! Surtout quand on essaye de conserver un design flexible (je n'aime
pas les designs fixes, le genre qui occupe un tiers de mon petit écran
17"...).
C'est vrai qu'avec IE, c'est la surprise tous les jours : mais que va-t-il
faire de mon code ? Suspense...

Bon, cela dit, j'ai quand même un ennui avec ma page.
Les images débordent joyeusement sur la partie droite alors qu'il n'y a
évidemment pas d'overflow à cet endroit. Bizarre bizarre, c'est la première
fois que j'ai ce souci.

--
Kekcestruc, Raphia, Le Jardin des Amis,
frj-gazette, Mon Beau Jardin, Valinfo
et autres outils de jardin sont sur http://www.la-grille-verte.net
1 2 3 4 5