28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu fixe et contenu fluide

Bonjour,

Découvrant le CSS, j'ai tout de suite compris qu'il fallait basculer dans les standards et d'abandonner les ancestraux tableaux (pourtant bien plus simples)... Donc, me voilà. Entre les tutoriaux et les (très) nombreux essais à partir de codes CSS prédéfinis, j'en suis arrivé à ne plus rien comprendre, et je préfère donc repartir de zéro pour construire un site propre et conforme aux standards (W3C ?).

Le PHP est nécessaire pour mon index et ses include(), donc les extensions de mes fichiers sont *.php, et le code en XHTML.

Pour faire cela étape par étape, et sans me mélanger les pinceaux, je vais y aller pas à pas, question par question.


LA HAUTEUR
Mon tout premier problème rencontré donc : les scrollbars. En effet, pour l'ergonomie du site je voudrais supprimer les scrollbars générales et n'en mettre que dans des boîtes spécifiques (faisant appel à des include()).
D'où ma première question : comment forcer la hauteur de la "superboîte" à se fixer sur celle du navigateur, et empêcher toutes les boîtes qui y seront contenues de déborder de partout ?

LA LARGEUR
Ensuite, le problème avec lequel j'ai perdu le plus de cheveux : combiner un menu (à gauche) à largeur fixe exprimée en pixels, et un contenu centré dans la partie droite et dont la largeur est exprimée en pourcentage ?

J'ai vu qu'il y avait plusieurs solutions pour faire ce genre de choses en CSS ; appeler mes éléments dans les id="#menu" de mes <div> est-il la meilleure solution ?

Bien cordialement,

Romanceor

P.S.: Vous trouverez ici la page où je me suis arrêté. Et ici, celle où je m'apprête à recommencer.
Modifié par Romanceor (16 Feb 2009 - 02:24)
Bonjour,

Romanceor a écrit :
Découvrant le CSS, j'ai tout de suite compris qu'il fallait basculer dans les standards et d'abandonner les ancestraux tableaux (pourtant bien plus simples)...

Il n'y a pas d'obligation absolue. Quant aux tableaux, ils sont loin d'être aussi simples que l'on veut bien le dire. Ils ont des avantages certains pour juxtaposer deux contenus (faire des colonnes), mais peuvent se montrer tout aussi casse-gueule que du positionnement CSS et dans certains cas plus limités.

Toute personne qui vise une compétence professionnelle a effectivement intérêt à se former correctement aux CSS (et le plus souvent se former ou se reformer à HTML, notamment à la sémantique et à l'accessibilité...). Aussi bien pour les enjeux actuels que pour ceux à venir.
Une personne qui ferait ça à titre de loisir, par contre, peut bien faire ce qu'elle souhaite.

Romanceor a écrit :
Mon tout premier problème rencontré donc : les scrollbars. En effet, pour l'ergonomie du site je voudrais supprimer les scrollbars générales et n'en mettre que dans des boîtes spécifiques (faisant appel à des include()).

Je ne connais pas les spécificités du projet, mais en règle générale c'est au contraire une énorme bêtise ergonomique que de supprimer la barre de défilement principale du navigateur, et d'utiliser des barres de défilement interne à certains blocs.

Romanceor a écrit :
D'où ma première question : comment forcer la hauteur de la "superboîte" à se fixer sur celle du navigateur, et empêcher toutes les boîtes qui y seront contenues de déborder de partout ?

Si on se fiche du support d'IE6, avec du positionnement absolu (en indiquant notamment les coordonnées top et bottom) et du overflow: auto. Autrement, voir la FAQ du forum qui indique une méthode (pas toujours évidente à mettre en place, la «hauteur du navigateur» étant un concept un peu flou voire inexistant dans une page web).

Romanceor a écrit :
Ensuite, le problème avec lequel j'ai perdu le plus de cheveux : combiner un menu (à gauche) à largeur fixe exprimée en pixels, et un contenu centré dans la partie droite et dont la largeur est exprimée en pourcentage ?

Je dirais qu'exprimer la largeur du contenu de droite en pourcentages est une erreur mathématique flagrante. Ce que tu cherches à faire ressemble à l'équation suivante:
100% * largeur_totale = 200px + 80% * largeur_totale
L'équation (pas très mathématique mais ça donne une idée) n'est vraie que si largeur_totale est égal à 1000px. Pour toute autre largeur, ça ne marche plus. Solution: ne pas utiliser de pourcentages pour le bloc de droite, et se fier plutôt à l'équation suivante:
100% * largeur_totale = 200px + (100% * largeur_totale - 200px)
(vraie quelle que soit la valeur de largeur_totale).

Il y a un tutoriel sur un design fluide en trois colonnes dans les tutoriels d'Alsacréations. Il suffit de supprimer la colonne de droite pour obtenir la disposition que tu souhaites.

Romanceor a écrit :
appeler mes éléments dans les id="#menu" de mes <div> est-il la meilleure solution ?

Désolé, cette phrase ne veut rien dire, donc je ne saurais quoi répondre.
Modifié par Florent V. (09 Jan 2009 - 22:34)
Merci beaucoup pour cette réponse très complète qui a d'ores et déjà réorienté mes choix et m'a mis sur la voie.

Pour ce qui est des scrollbars j'ai fini par conclure que tu avais raison et que l'ergonomie de mon site gagnerait en les laissant "à la racine" de la fenêtre du navigateur.

Mais je suis désormais confronté à des problèmes beaucoup plus précis, et notamment le centrage de la double div principale de contenu. J'ai d'abord lu ton tutoriel sur les trois colonnes fluides et j'ai réussi à faire ce que je voulais en le combinant avec la solution de centrage de http://bluerobot.com/web/css/center1.html.

Malheureusement je me trouve face à un nouveau problème de scrollbars du à l'astuce que j'ai utilisé pour construire mon menu de gauche (en position:fixed).

Comment faire pour que la scrollbar, qui ne fait défiler qu'un seul <div> (comme je le désirais) ne prenne pas toute la largeur de la page mais seulement la largeur du <div> ?

Encore merci,

Romanceor
Romanceor a écrit :
Comment faire pour que la scrollbar, qui ne fait défiler qu'un seul <div> (comme je le désirais) ne prenne pas toute la largeur de la page mais seulement la largeur du <div> ?

Si tu utilises la scrollbar générale de la page (ce qui est conseillé), ce n'est pas possible.
Sinon on retombe sur la solution du DIV en height:100% (ou positionné en absolu avec trois ou quatre propriétés de coordonnées définies) et overflow:auto, barre de défilement interne au bloc, etc.

Dans ce cas précis c'est peut-être envisageable. Encore faut-il qu'il y ait un intérêt quelconque à procéder ainsi, ce qui ne me semble pas très clair...
Sujet clos
Aller à