Espace restant div

Salut à tous!
J'espère que vous pourrez m'aider, ce problème est très génant.
Je vais mettre directement un code, ça ira plus vite que des explications:

<div style="width: 100%; height: 50%;">
<div style="width: 100%; height: 10px;"></div>
<div style="width: 100%; height: 100%;"></div>
<div style="width: 100%; height: 10px;"></div>
</div>

Le bloc div à une taille de 50% (100% de 50%)+20px au lieu de 50% tout court.
Est-ce que vous pourriez m'aider?
J'ai trouvé plusieurs articles sur google, mais ils traitaient tous d'une mise en forme où le bloc devant prendre tout l'espace possible était situé en bas de toutes les balises div. Là, la situation est plus bizarre, puisqu'il est au centre (le haut=header et le bas=footer...impossible de les enlever).

Merci d'avance!

Hello,

Tu viens de t'attaquer à une des difficultés les plus sympa des CSS, qui gèrent assez mal l'espace en hauteur, et surtout qui ne permettent pas de faire des soustractions du genre height: 100% -20px;.

Ce que tu veux faire est possible si tu passes le premier et le troisième bloc avec une hauteur en pourcentages (tu ferais alors: 5%, 90%, 5% -- par exemple). Mais partir sur ce genre de design figé en hauteur est en général une erreur, donc je ne te conseillerais pas d'emblée cette solution, d'autant plus que je n'ai pas la moindre idée de l'objectif final (qu'essaies-tu de faire, quel design cherches-tu à intégrer?).

On peut aussi regarder du côté du positionnement absolu (par rapport à un conteneur positionné en relatif), mais là encore je doute que ça corresponde vraiment au besoin.

Impossible de mettre des tailles en pourcentage en haut et bas, vu qu'il s'agit de bordures en image.
En fait j'ai un kit graphique, et je dois m'arrange pour le recoder entièrement histoire qu'il soit beaucoup plus modulable. Parce que c'est pas la joie, là...
Bon, je vais devoir essayer de m'en passer, alors?
C'pas pratique, ça

(pour le positionnement absolu j'avais essayé, mais il y avais toujours une partie du texte (20px, si je me souviens bien) qui disparaissait sous le footer...pour limiter la casse il fallait mettre un overflow hidden, et ça ne faisait que cacher le problème )
Modifié par arcanis (23 Mar 2008 - 22:10)

arcanis a écrit :
Impossible de mettre des tailles en pourcentage en haut et bas, vu qu'il s'agit de bordures en image.

Ben qu'est-ce que ça fiche dans des div séparés si ce sont des images de fond? En règle générale, on applique les images de fond aux blocs qui portent le contenu, quitte à jouer avec des imbrications:

<div id="boite">
	<div id="boite2">
		... Ici le contenu ...
	</div>
</div><!-- #boite -->

Et paf, on style div#boite et div#boite2 pour porter les images de fond des bordures, on joue avec le padding, et on ne fige rien en hauteur histoire que tout ça suive gentiment la hauteur du contenu.

Mais bon, sinon la technique du positionnement absolu peut fonctionner aussi. Cf. l'article sur le positionnement absolu chez Openweb pour comprendre le fonctionnement du positionnement absolu par rapport à un conteneur donné.

arcanis a écrit :
(pour le positionnement absolu j'avais essayé, mais il y avais toujours une partie du texte (20px, si je me souviens bien) qui disparaissait sous le footer...

Et le padding, c'est fait pour quoi alors???

PS: sans voir le design à intégrer, je parle forcément un peu dans le vide.
Modifié par Florent V. (24 Mar 2008 - 00:48)

Le design est celui là.
Bon, finalement j'ai fini par trouver que je n'avais pas besoin d'étendre en hauteur. Génial. *soupir*

Maintenant c'est en largeur

Voilà le screenshot de ce que j'ai déjà réussis à faire:
http://img207.imageshack.us/img207/4352/babebibobupy7.png
(et tout en css/html compatible xhtml...suis vachement fier )

Le bloc où est censé être le texte principal apparait en tout petit...Il faudrait donc au moins qu'il prenne tout l'espace restant en largeur (la hauteur, on s'en fiche, ça peut faire un effet sympa même sans ça).

(ps: en fait, tout à l'heure, je pensais essayer d'étendre le bloc qui contient la barre de navigation...le truc complètement inutile, quoi)

(edit) Et une autre question: juste pour tester, j'ai mis la barre de navigation et la zone de texte dans un tableau, et l'affichage se fait correctement. Par contre, quand la zone de texte est trop grande,le texte passe par dessus la bordure du bas au lieu d'étendre la zone. Comment est-ce que je peux faire? Si je retire la propriété height=80% du bloc principal (celui qui contient les éléments centrés), alors il est impossible d'afficher correctement les bordures gauches et droites (height=100% semble renvoyer 0, malgré le fait que le truc soit BEAUCOUP plus grand)
Modifié par arcanis (24 Mar 2008 - 01:45)

arcanis a écrit :
Maintenant c'est en largeur

Ben tu es bien dans la merde alors. Travailler un cadre graphique en largeur fixe (ou éventuellement en hauteur fixe et largeur fluide, mais c'est plus rare) facilite grandement les choses. Autrement, il faut bidouiller une solution en imbriquant des blocs, voire en utilisant un tableau.

arcanis a écrit :
Voilà le screenshot de ce que j'ai déjà réussis à faire:
http://img207.imageshack.us/img207/4352/babebibobupy7.png
(et tout en css/html compatible xhtml...suis vachement fier )

Ça m'éclaire pas des masses sur le code utilisé. Donc je me permets de ne pas répondre aux questions qui suivent car ça me ferait parler dans le vide.

arcanis a écrit :
Le bloc où est censé être le texte principal apparait en tout petit...

Et ça correspond à quel code?

arcanis a écrit :
Par contre, quand la zone de texte est trop grande,le texte passe par dessus la bordure du bas au lieu d'étendre la zone. Comment est-ce que je peux faire?

Et ça correspond à quel code?

arcanis a écrit :
Si je retire la propriété height=80% du bloc principal (celui qui contient les éléments centrés), alors il est impossible d'afficher correctement les bordures gauches et droites (height=100% semble renvoyer 0, malgré le fait que le truc soit BEAUCOUP plus grand)

Et ça correspond à quel code?


Si ce message donne l'impression que je me répète, pas d'inquiétude, c'est volontaire.

Valà le lien avec ce que j'ai réussis à faire:
http://www.arcanis.fr/files/sydonia/

En fait j'ai utilisé un tableau pour que l'espace soit répartis de façon correcte. Là, ça marche. Mais ça me rajoute 3 indentations dans le code...c'est moche.
Maintenant que ce problème à été résolu, reste le principal: le troisième. Si tu regarde le kit et que tu essaye de descendre, tu verra soit que les bords ne sont pas affichés (IE) soit qu'ils ont une taille de 100%...de la fenêtre. Mais pas du document complet... (FF/Opera)
Et ça, je ne vois pas comment le résoudre. C'est complètement con, mais je bloque à cet endroit, alors qu'il y a des trucs qui pourraient paraitre plus compliqués (morceaux de métal). Suis déséspéré, là...un si petit bug alors que tout est compatible xhtml, et avec un affichage identique sous ff/ie/opera. C'est dégeu =_='

Merci de ton aide
Modifié par arcanis (25 Mar 2008 - 13:44)

Ok, je vois.

En gros, une partie des principes d'intégration utilisés est à revoir (et à oublier...).
Créer des blocs vides (div, la plupart du temps) pour placer sur ton design certains éléments graphiques est:
1. une solution à ne pas utiliser systématiquement;
2. une solution uniquement pour les éléments graphiques dont les dimensions sont connues (en pixels), ou dont seule la largeur pourra être variable.

En gros, créer un div vide pour placer une image de bordure latérale est une bêtise. Ça ne marche pas, car il n'y a pas de moyen fiable et efficace pour adapter la hauteur de ce div vide à un quelconque contenu dans la page.

Je vois que tu as pas mal utilisé cette technique (à oublier), donc il va falloir revoir certaines choses.

Est-ce que tu connais la technique des colonnes factices? Tu devrais t'en inspirer.