28172 sujets

CSS et mise en forme, CSS3

Pseudo-frame en pure css ?

Bonsoir à tous.

J'ai cherché sans un succès un moyen propre, efficace et standard (ie. compatible avec gecko/webkit/etc.) de réaliser une pseudo-frame ayant un ascenseur intégrée en css.

Voici graphiquement le rendu idéal :

http://pix.toile-libre.org/upload/thumb/1329427877.png

Est-ce faisable en l'état actuel ? Pourriez-vous me donner des pistes / des conseils / des bouts de codes / des idées ?

Cordialement !
Bonjour,

Je passe rapidement sur le fait que ce soit un mauvais design à bien des égards, pour me concentrer sur les aspects techniques. Donc:
cosimo a écrit :
J'ai cherché sans un succès un moyen propre, efficace et standard (ie. compatible avec gecko/webkit/etc.) de réaliser une pseudo-frame ayant un ascenseur intégrée en css.

- S'il s'agit uniquement d'avoir un bloc de hauteur fixe avec une barre de défilement interne, il suffit de fixer la hauteur de l'élément et de déclarer un overflow:auto.
- Si la hauteur doit être fonction de la hauteur du viewport (zone d'affichage du navigateur), on peut éventuellement utiliser le positionnement absolu pour dimensionner l'élément (avec top:100px; bottom:100px par exemple).

Voilà pour les parties assez facilement réalisables en CSS de manière standard.

Maintenant pour ce qui est de customiser la barre de défilement comme sur l'image donnée en aperçu:
1. Ce n'est pas possible de manière standard.
2. C'est possible dans WebKit avec du code CSS propriétaire (pas standard, WebKit seulement).
3. On peut simuler une scrollbar avec moult JavaScript (pas standard, pas en CSS seul, problèmes potentiels d'accessibilité et d'ergonomie si le script n'est pas très bon).
Modifié par fvsch (17 Feb 2012 - 00:02)
Merci de votre réponse détaillée. Ne connaissant rien à javascript et n'ayant pas envie de surcharger mes pages, je me suis résigné à n'en faire qu'un cadre.

Ne serait-il pas possible, en l'absence de contrôle standard sur les barres de défilement, d'utiliser la balise <object> en css pour créer un système de page virtuel pour le contenu du cadre ? (Sachant qu'il y a bien des choses autour de ce cadre et que le but n'est pas de recharger "toute" la page")

<object data="nv/p1.htm" type="text/html" width="300" height="200">
  alt : <a href="nv/p1.htm">p1.htm</a>
</object>


Ce qui pour le coup donnerait un rendu de ce genre :

http://pix.toile-libre.org/upload/thumb/1329556109.png

... où à chaque page correspond un <object> qui ne recharge que le contenu du cadre (pas le reste de la page). Suis-je sur une bonne voie ?
Modifié par cosimo (18 Feb 2012 - 10:10)
Bonjour, pour faire ça, il faut soit utiliser AJAX (qui implique JavaScript : AJAX = Asynchronous JavaScript And XML) pour charger une page et modifier une partie du contenu de la page actuelle...

Soit utiliser HTML/CSS mais en utilisant un sélecteur qui n'est pas reconnu de tous (mais des récents...)

Soit utiliser JavaScript pour cacher/montrer dynamiquement une partie...

Les deux dernières solutions impliquent d'avoir le contenu de toutes tes pages sur ta page...

En HTML/CSS, ça donnerait quelque chose du type :
<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Titre</title>
        <style>
            div {
                display : none;
            }
            
            div:target {
                display : block;
            }
            
            #c1 {
                display : block;
            }
            
            div:target ~ #c1 {
                display : none;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li>
                    <a href="#c1">Vers "Contenu 1"</a>
                </li>
                <li>
                    <a href="#c2">Vers "Contenu 2"</a>
                </li>
                <li>
                    <a href="#c3">Vers "Contenu 3"</a>
                </li>
            </ul>
        </nav>
        
        <div id="c3">Contenu 3</div>
        <div id="c2">Contenu 2</div>
        <div id="c1">Contenu 1</div>
    </body>
</html>
cosimo a écrit :
Ne serait-il pas possible, en l'absence de contrôle standard sur les barres de défilement, d'utiliser la balise <object> en css pour créer un système de page virtuel pour le contenu du cadre ?

On peut effectivement utiliser IFRAME (plutôt que OBJECT) pour charger une page HTML dans un cadre. Par contre au niveau de la mise en page je ne vois pas d'intérêt particulier par rapport à un DIV qui contiendrait le même contenu HTML.

cosimo a écrit :
Sachant qu'il y a bien des choses autour de ce cadre et que le but n'est pas de recharger "toute" la page

C'est un faux problème. Le fait que chaque page HTML comporte à la fois son contenu propre et le code HTML des éléments d'interface communs (navigation notamment) ne pose pas de problème de performance (temps de chargement et temps de rendu). La plupart des sites web fonctionnent ainsi et ne s'en portent pas plus mal. On peut faire différemment avec beaucoup de JavaScript, mais ça demande un niveau d'expertise important et l'investissement ne se justifie que pour certains types de sites qui bénéficient réellement de ce type d'architecture et d'interaction (pour l'essentiel des applications web).

Donc si on reste sur l'hypothèse d'un site web: on travaille avec des pages HTML complètes (plutôt que des fragments) côté client, et on organise son code côté serveur pour ne pas dupliquer le code HTML des éléments d'interface communs (include() en PHP, système de templating, etc.).
Sujet clos
Aller à