Mise en forme de balises "div" avec cadre à largeur fixe

Bonjour,

Voici quelques temps que je planche sur un problème de mise en forme css. Après plusieurs tentatives infructueuses et diverses recherches sur internet, j'espère pouvoir trouver un peu d'aide sur ce forum...

Mon problème est le suivant: J'ai créé une page web contenant un cadre formé de différentes images. Ce cadre est fluïde, entoure la page et est large de 14px. Jusque là, aucun problème, tout fonctionne correctement, autant sous IE que sous FF. Les images sont insérées en background de div et sont définies dans le fichier css pour plus de facilité.

A l'intérieur de ce cadre, j'aimerais positionner 3 blocs div:
_______________
|...___________...|
|..|........|........|..|
|..|_____|........|..|
|..|_____|_____|..|
|_______________|

un bloc 1 en haut à gauche faisant 50% de l'espace restant en largeur et 60% de l'espace restant en hauteur.
un bloc 2 en bas à gauche faisant 50% l'espace restant en largeur et 40% de l'espace restant en hauteur.
un bloc 3 à droite faisant 50% de l'espace restant en largeur et 100% de l'espace restant en hauteur.

Cette page risque d'être souvent réduite par l'utilisateur, c'est pourquoi j'aimerais également que des barres de défilement apparaissent dans les blocs lorsque la taille de la page ne permet plus de lire leur contenu.

J'ai essayé plusieurs méthodes, chacune ne me satisfaisant que très partiellement, et ne donnant pas toujours le même résultat sous IE et FF (ce qui reste à la limite un moindre mal).

Voici les adresses utiles:
http://users.skynet.be/bk378202/fiche_perso.html
http://users.skynet.be/bk378202/fiche_perso_0.css
http://users.skynet.be/bk378202/menu_box_0.css

menu_box_0.css contient les informations sur le cadre. Tout fonctionne.
fiche_perso_0.css doit contenir les information sur les 3 blocs. Je l'ai laissé quasi vide suite à mes tentatives infructueuses.

Merci de l'aide que vous pourrez m'apporter
Modifié par Ced (06 Aug 2007 - 13:54)

Bonjour,

Ced a écrit :
Cette page risque d'être souvent réduite par l'utilisateur, c'est pourquoi j'aimerais également que des barres de défilement apparaissent dans les blocs lorsque la taille de la page ne permet plus de lire leur contenu.

Argh. Mauvaise idée. Le résultat sera ergonomiquement problématique, c'est-à-dire chiant ou difficile à utiliser pour le visiteur. Cela posera peut-être également des problèmes d'accessibilité (navigation au clavier, utilisation d'une loupe d'écran...).

Solution: limiter les barres de défilement internes -- c'est-à-dire portant sur un bloc précis et pas sur toute la page -- à une utilisation exceptionnelle et aussi rare que possible (voire ne pas les utiliser du tout, ce qui est à vrai dire la meilleure solution). Faire une page avec des blocs extensibles en hauteur, quitte à adapter le design.

De plus, on s'évitera des bricolages de positionnement CSS pas toujours heureux, ce qui ne peut pas faire de mal.

Une piste à explorer tout de même si on tient absolument à avoir ce cadre fluide (à l'utilité toute relative) en redoublement de la zone de visualisation du navigateur: l'utilisation du positionnement fixe (pour la bordure du haut et celle du bas), via la déclaration CSS position: fixed.
Modifié par Florent V. (06 Aug 2007 - 14:32)

En ce qui concerne les barres de défilement, je peux m'en passer. Les blocs ne contiendront pas beaucoup d'information et la taille de la fenetre, même si elle est petite, devrait suffire. Je tenais juste à prévoir le coup, mais passons.

Ceci dit, le gros problème vient du fait que le cadre qui entoure la page web a une largeur fixe:

Si je précise width: 50% pour les blocs de gauche et de droite, et un padding de 14px (ou un margin) pour ces même blocs (histoire que mon contenu commence après le cadre que j'ai placé), ils vont se chevaucher car les 50% sont calculés sur la taille de la page, et non pas sur la taille de la page moins la taille du cadre.

Même combat pour la hauteur des blocs.

Ced a écrit :
En ce qui concerne les barres de défilement, je peux m'en passer. Les blocs ne contiendront pas beaucoup d'information

Auquel cas, et si on tient absolument à avoir des blocs non extensibles en hauteur (ce qui est souvent une erreur de conception pour les raisons évoquées précédemment... mais sans connaitre le projet, difficile de l'affirmer, donc je n'épilogue pas là-dessus), mieux vaut prévoir des overflow: auto au cas où. Ça sera toujours mieux que des contenus cachés ou se superposant les uns aux autres.

Ced a écrit :
et la taille de la fenetre, même si elle est petite, devrait suffire

Là encore, je ne peux pas l'affirmer sans connaitre le projet ou le design envisagé, mais on sous-estime souvent la variété de matériels, logiciels, résolutions d'écran, mode d'accès au contenu, etc. À partir du moment où on n'exploite pas une caractéristique fondamentale du rendu d'une page web sur écran, à savoir l'extensibilité en hauteur, on prend un risque (qui peut être calculé et acceptable... là encore, ça dépend).

Ced a écrit :
Ceci dit, le gros problème vient du fait que le cadre qui entoure la page web a une largeur fixe

Pour la largeur, ça devrait être jouable de faire tenir les deux blocs, chacun en width: 100%. Il ne faudra bien sûr pas utiliser de border ou de padding, mais ça peut peut-être se gérer facilement en imbriquant deux blocs à chaque fois (un pour la largeur fixe, et un en largeur automatique pour faire des marges internes...).

Par contre, pour le positionnement et le dimensionnement en hauteur, ça va être très très prise de tête, voire impossible. Ceci dit, il sera peut-être possible de donner l'impression de..., en faisant du trompe l'oeil avec des images de fond. Ça dépendra du design à intégrer: dans certains cas c'est jouable, dans d'autre ça ne le sera pas.

Il serait possible d'avoir un petit aperçu du design complet?

Comme je l'ai dis, le contenu des blocs sera restreint. Je m'arrangerais pour que cela puisse tenir dans une fenetre de 500x400 sans provoquer une apparition des barres de défilement.

Ceci n'est qu'une partie du site, la seule sur laquelle je cale pour l'instant.

J'ai updaté les liens html et css du premier post:
J'ai tenu compte des indications pour l'implémentation en largeur. Le seul problème qu'il reste à ce niveau, c'est que les balises div qui contiennent le texte s'adapte au texte si je ne leur spécifie pas de taille, au lieu de s'étirer pour remplir leur bloc contenant.

Pourais-je en savoir également un peu plus sur cette histoire de trompe-l'oeil pour l'implémentation en hauteur?

Ced a écrit :
Pourais-je en savoir également un peu plus sur cette histoire de trompe-l'oeil pour l'implémentation en hauteur?

Pas de règle générale, ça dépendra de ton design.
En gros, il s'agit d'utiliser les images de fond, peut-être en imbriquant un ou deux blocs, avec peut-être des répétitions en hauteur de l'image de fond, etc.

Bref, ça dépend du design, et plus précisément des détails du design en question. Rien ne garantit que ça soit jouable.

Merci, je verrais donc cela quand je serais un peu plus avancé. Ce que je peux dire pour l'instant, c'est que le bloc haut gauche contiendra une petite image et du texte, le bloc bas gauche contiendra quelques mots, et le bloc droit contiendra également quelques mot. Tous les fonds seront noirs (exepté le cadre, bien entendu, qui gardera les images actuelles).

Et en ce qui concerne ceci: ?

Ced a écrit :

J'ai tenu compte des indications pour l'implémentation en largeur. Le seul problème qu'il reste à ce niveau, c'est que les balises div qui contiennent le texte s'adapte au texte si je ne leur spécifie pas de taille, au lieu de s'étirer pour remplir leur bloc contenant.

Modifié par Ced (06 Aug 2007 - 18:16)

Ced a écrit :
Tous les fonds seront noirs (exepté le cadre, bien entendu, qui gardera les images actuelles).

Ben déjà ça simplifie pas mal.

Ced a écrit :
Et en ce qui concerne ceci: ?
J'ai tenu compte des indications pour l'implémentation en largeur. Le seul problème qu'il reste à ce niveau, c'est que les balises div qui contiennent le texte s'adapte au texte si je ne leur spécifie pas de taille, au lieu de s'étirer pour remplir leur bloc contenant.

Ben je sais pas trop ce que ça veut dire. Quand tu dis que ces div s'adaptent au texte, ça veut dire qu'ils prennent la largeur du texte et pas seul de leur bloc parent, ou bien tu parles de la hauteur?
Et dans les deux cas je ne vois pas vraiment où est le problème, en fait.

Florent V. a écrit :

Quand tu dis que ces div s'adaptent au texte, ça veut dire qu'ils prennent la largeur du texte et pas seul de leur bloc parent?

ouip, c'est bien ça. Je pensais, peut-être à tord, que de base, les balises block prenaient la plus grande largeur possible. Maintenant, vu que tout les fonds seront noirs, ça ne pose pas de problème. Mais j'aurais bien aimé savoir d'où cela venait.

Je me demande également dans quelle mesure il ne serait pas possible de faire la même chose pour la hauteur... J'updaterai les liens dès que j'avancerai à nouveau.

Ced a écrit :
Je pensais, peut-être à tord, que de base, les balises block prenaient la plus grande largeur possible.

C'est bien le cas, sauf dans les cas suivants:
- élément de type bloc flottant (float: left ou float: right);
- élément de type bloc en positionnement fixe ou absolu;
- élément de type bloc avec un type d'affichage différent de "block" (par exemple via display: inline).

Edit: ici, le fautif est un positionnement absolu inutile.
Modifié par Florent V. (06 Aug 2007 - 22:24)

Ressortons un peu le sujet des oubliettes

J'ai un peu réfléchi sur le problème ces derniers jours. J'utilise finalement une approche tout à fait différente pour positionner correctement les blocs en largeur afin qu'il s'adaptent à la largeur restante de la page. (Utilisation du positionnement relatif, associé à direction:rtl ou ltr). Ca me permet d'utiliser très peu de blocs imbriqués les uns dans les autres.

En gros, le css donne ceci:

#box_left
{
position: absolute;
top: 0px;
left: 0px;
background-color: #3C5A5F;
margin: 30px;
height: 100%;
direction: ltr;
}

#sub_box_left1
{
background-color: #3ABBCB;
position: relative;
top: 0px;
left: 0px;
width: 50%;
height: 42%;
z-index: 10;
overflow: auto;
}

#sub_box_left2
{
background-color: #AABB65;
position: relative;
bottom: 0px;
left: 0px;
width: 50%;
height: 42%;
z-index: 10;
overflow: auto;
}

#box_right
{
position: absolute;
top: 0px;
right: 0px;
background-color: #3AAC5F;
margin: 30px;
height: 100%;
direction: rtl;
}

#sub_box_right
{
background-color: #3CDDEB;
position: relative;
top: 0px;
right: 0px;
width: 50%;
height: 84%;
z-index: 10;
overflow: auto;
direction: ltr;
}

Ca marche très bien sous IE7. Par contre, FF fait des siennes. Je positionne un bloc en relatif en direction:rtl. Comme il est le premier élément dans le flux, il se met tout à droite. Jusque là, pas de problème.
Ensuite, à l'intérieur de ce bloc, j'utilise direction:ltr pour rendre au texte la bonne direction de lecture. IE7 fait ce que je lui dis, FF semble s'emmeler les pinceaux.

help please!

PS: les liens du premier post sont updatés pour avoir un aperçu de la chose.

Je crois que là tu t'attaques à trop gros morceau... et avec une technique sans doute pas vraiment adaptée.

J'obtiens trois rendus différents avec les navigateurs suivants: Firefox 2, Opera 9 et Konqueror 3.5.

Je le sens pas trop, cette histoire...

Je pense ouip. J'ai abandonné cette mise en page. Le cadre aura une largeur et une hauteur fixes.

J'ai toutefois un autre problème, à la fois similaire au précédent, mais plus simple.

Voici la page html: http://users.skynet.be/bk378202/AS/main.html
et la CSS:
http://users.skynet.be/bk378202/AS/styles/style_0/design_0.css
(désolé de ne pas baliser les codes, c'est simplement par clarté, sinon ça risque d'etre assez long)

J'aimerais garder le cadre qui fait le tour de la page visible en permanence. Pour ce faire, j'en ai placé tous les éléments en positionnement absolu. (et pas en fixed par compatibilité avec IE6)

Le design est fluide et j'aimerai pouvoir afficher le contenu au centre de cette page. Pas de probleme en largeur, par contre, en hauteur, quoique je fasse, mon contenu passe en dessous de mon cadre. (Evidement, je peux ajouter des padding-top/bottom, mais:)

Je ne veux pas utiliser directement overflow:auto sur la page car je désire absolument que ma barre de défilement se place dans la zone centrale et non pas tout à droite de la page.

J'ai donc essayé plusieurs solutions, d'abord avec des DIV, puis ensuite avec des TABLES, mais aucune ne fonctionne.

Une idée, un conseil?

Y a-t-il une bonne âme qui puisse me répondre?

Même une petite piste...

'Rci

Si personne ne voit de solution, le sujet peut être clos.

Merci pour votre aide,

Ced

Youhou? Y a-t-il un pilote dans l'avion?
Même avec des <table>, je suis preneur...
(Je ne mange personne )

Ced