Hauteur et largeur : peut-on mélanger et calculer les unités ?

Bonjour,

je rencontre souvent le problème suivant :

j'utilise pour définir les hauteurs ou largeurs de mes bloc des pourcentages, par exemple height:100% pour que le bloc prenne toute la page.

le problème vient si j'ai un élément qui précède ce bloc, par exemple une image d'une hauteur de 300px.

la première chose qui me vient à l'esprit serait d'attribuer une hauteur à mon bloc de (100% - 300px) pour compenser, mais évidemment ca ne marche pas.

Et si j'essaie de trouver une valeur proche, genre 80% ca n'ira pas non plus selon les résolutions.

Comme faire pour résoudre ce problème?
Modifié par Noisequik (02 May 2006 - 11:26)

Salut,

c'est une question très souvent posée donc tu peux faire une recherche.

Un des derniers fils

Sinon,

Noisequik a écrit :


Comme faire pour résoudre ce problème?

En explorant d'autre possibilité de mise en page largement aussi intéressantes que celle ci qui ne l'est pas tant que ça. Même si elle à l'heur de séduire beaucoup de monde.

Bonjour,

(clb56 à répondu le temps que je fasse un test, mais tant pis)

Il suffirait de mettre dans ce bloc div un "margin-top: 300px;" (où 300px correspond à la hauteur de ton image). Ça devrait bien créer un espace avant le bloc.

Un exemple : http://univers-fusco.com/tests/margin.html

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}

#bloc1 {
	height: 100%;
	background: #ccc;
	border: 2px solid #333;
	margin: [#orange]300px[/#] 50px 0 50px;
	}

Modifié par (02 May 2006 - 12:23)

neko a écrit :
Bonjour,

(clb56 à répondu le temps que je fasse un test, mais tant pis)

Il suffirait de mettre dans ce bloc div un "margin-top: 300px;" (où 300px correspond à la hauteur de ton image). Ça devrait bien créer un espace avant le bloc.

Un exemple : http://univers-fusco.com/tests/margin.html [code]

merci mais je ne comprends pas ton exemple, en effet le bloc déborde de la page et crée un ascenseur vertical, ce que je ne souhaite pas...

au fait, j'essaie de créer une galerie et je souhaite créer un calque avec un scroll (overflow-y : scroll) pour permettre au visiteur de ne faire descendre que les thumbnail et pas l'aperçu en grand...

apercu de l'exemple
Modifié par Noisequik (02 May 2006 - 14:57)

bonjour,

il va falloir te faire une raison, je crois.

Il est possible de tricher avec des padding ou margin ou elements vide faisant office de marge , pour tenter de melanger pixel et pourcentage.

Dans ton exemple , tu ne pourras pas couper ta page verticalement autrement qu'en partageant les 100% de hauteurs de ta page aux 2 zones concernées, d'autres solutions "tordues" existent peut-etre, mais probablement avec une compatibilité tres restreinte.

Eventuellemet avec un javascript il serait posible de calculer la hauteur restant disponible sous la banniere et appliqué celle ci a la volé au css du conteneur ou tu veut voir le scroll apparaitre.

( basiquement : screen.height - header.height=laboiteascroller.height).

La encore la compatibilité est restreinte aux navigateurs qui ont le javascript activé et le script lui-même .

si tu envisage de repasser tes thumbnails a droite et que tu accepte de voir la barre de scroll sur la hauteur de la page , alors tu peut obtenir un effet ressemblant un peu a ton idée.

Tu as quelques exemple sur le forum (en plus du lien donner plus haut , une recherche sur frames peut peut-etre te donner d'autres pistes ).

++

Il y a autre chose à prendre en considération. Si je pars de ton exemple, ou l'entête figure un bloc 300px de hauteur, le reste ferait donc environ 750px. Soit un total de 1050px.

Il faut donc une résolution d'écran de 1600 x 1200 pour voir un tel design sans barre d'ascenseurs, UNIQUEMENT, dans le cas d'un affichage en plein écran. Si on rajoute les menus des navigateurs, ça diminue encore l'espace utile.

Par exemple, chez moi, il n'y a que 600 px d'espace vertical disponible pour l'affichage, tout site s'étendant au delà sera pourvu d'une barre d'ascenceur.
Si tu utilises un affichage tel que celui que tu cherches à réaliser, la partie contenu du design ferait 300px de hauteur (sur ton exemple, en partant du haut de la partie contenu, le bas se trouve à hauteur de la naissance de l'antérieur gauche du cheval).

Ainsi, l'aperçu en grand (figurant environ 530px de hauteur dans ton exemple), serait réduit à quelques 200 pixels. Il n'aurait donc rien de grand.

gcyrillus a écrit :
d'autres solutions "tordues" existent peut-etre, mais probablement avec une compatibilité tres restreinte.
++

Bonsoir,
Comme je l'ai dit dans l'autre post, il suffirait d'utiliser "top" "bottom" pour déterminer la hauteur, ce qui fonctionne pour tous les navigateurs, IE 7 compris, sauf IE 6 et antérieurs. POur ces derniers il est possible de basculer IE 6 en Quirks mode, et via un peu de commentaire conditionnel on peut facilement obtenir l'effet voulu, donc avec IE 5.x et IE 6.
Le seul problème de compatibilité concernerait éventuellement IE mac qu'il suffirait de filtrer avec les IE 4 et NS 4
Modifié par Alan (03 May 2006 - 08:54)

clb56 a écrit :


En explorant d'autre possibilité de mise en page largement aussi intéressantes que celle ci qui ne l'est pas tant que ça. Même si elle à l'heur de séduire beaucoup de monde.

Salut, oui je suis ouvert à tout mais la contrainte et d'afficher un grand nombre de miniatures et d'afficher l'image en grand en cliquant sur ces derniers, sur la même page.
Si il y a un scroll vertical sur la page entière, cela peut déranger car soit la grande image ne sera pas visible car plus haut, soit la page remontera et l'utilisateur devra redescendre pour la miniature suivante.

neko a écrit :
Il y a autre chose à prendre en considération. Si je pars de ton exemple, ou l'entête figure un bloc 300px de hauteur, le reste ferait donc environ 750px. Soit un total de 1050px.

Mon affichage sera prévu pour éviter l'ascenseur vertical de la page pour une résolution 1024x768 et +
Il est clair que je n'arriverai pas à l'éviter sur du 800 sur 600, mais le site restera visible bien sûr...

Alan a écrit :


Bonsoir,
Comme je l'ai dit dans l'autre post, il suffirait d'utiliser "top" "bottom" pour déterminer la hauteur, ce qui fonctionne pour tous les navigateurs, IE 7 compris, sauf IE 6 et antérieurs. POur ces derniers il est possible de basculer IE 6 en Quirks mode, et via un peu de commentaire conditionnel on peut facilement obtenir l'effet voulu, donc avec IE 5.x et IE 6.
Le seul problème de compatibilité concernerait éventuellement IE mac qu'il suffirait de filtrer avec les IE 4 et NS 4

Merci pour ce conseil, ca marche bien,j'ai testé. Cependant, je me demande si le mode quirks ne risque pas de nuire au reste de mon site, en bref, si cela vaut la peine ???

Noisequik a écrit :


Salut, oui je suis ouvert à tout mais la contrainte et d'afficher un grand nombre de miniatures et d'afficher l'image en grand en cliquant sur ces derniers, sur la même page.
Si il y a un scroll vertical sur la page entière, cela peut déranger car soit la grande image ne sera pas visible car plus haut, soit la page remontera et l'utilisateur devra redescendre pour la miniature suivante.

Il n'y a aucun rapport entre les deux ! Si la zone scrollable est définie avec les dimensions qui conviennent et avec le placement qui convient, c'est à dire pas trop loin du haut de la page, alors tu auras ce que tu souhaites comme tu le souhaites qu'il y ait ou non un scroll du body pour atteindre une éventuelle partie inférieure de la page (une suite ou tout simplement le footer).

Re-bonjour,

S'il n'y a pas de barres d'ascenseurs, la zone dévolue à l'aperçu sera trop petite sur les résolutions courantes pour être vraiment intéressante.

Après avoir testé quelque chose de plus proche de ce que tu veux obtenir, je vois qu'il faut une résolution minimum de 1200 pour que ça reste confortable et que l'aperçu dispose de suffisamment de place. En 1600, ça ressemble au gabarit de ton exemple. (J'ai modifié mon exemple précédent : http://univers-fusco.com/tests/margin.html )

En dessous de 1200, l'entête de 300px de hauteur pour 100% de largeur occupe une part importante (démesurée ?) dans l'espace utile. (De fait, ça me paraît un peu gros comme entête.)

a écrit :
Mon affichage sera prévu pour éviter l'ascenseur vertical de la page pour une résolution 1024x768 et +

Cette capture d'écran (24.16 Ko) montre le comportement de mon exemple en 1024 :


Modifié par (03 May 2006 - 11:44)

merci bien, je pense que j'ai enfin réussi a faire quelque chose d'intéressant :

http://www.e-novinfo.ch/alsa/

Qu'en pensez-vous ?

Je pense que tu as réussi. Comme toutes tes images ont la même hauteur, le comportement est bon de 1024 à plus. Ce sera juste un peu... différent pour ceux en 800 x 600.
Il ne te reste plus qu'à fignoler la présentation.

Par contre, je trouve toujours dommage d'utiliser des frames. Même si ça permet de garder quelque chose de fonctionnel pour les visiteurs désactivant Javascript (qui ne sont pas si nombreux).
Modifié par (03 May 2006 - 12:26)

Noisequik a écrit :
Merci pour ce conseil, ca marche bien,j'ai testé. Cependant, je me demande si le mode quirks ne risque pas de nuire au reste de mon site, en bref, si cela vaut la peine ???

Tu peux toujours limiter l'utilisation du prologue à cette rubrique.
Et puis IE 5.x est toujours en quirks mode et il faut (faudrait) bien en tenir compte, donc ça revient juste à mettre IE 6 dans le même panier.