[Doug]

Bonjour à tous....hey oui je suis un petit nouveau parmis vous

Je vous expose mon problème et vous me direz si cela est possible ou non. Alors commençont par le commencement (et en passant désoler pour les fautes d'orthographes que vous verrez )

J'utilise les CSS depuis peu mais je comprend le principe (enfin je crois loll). Voici une illustation qui m'aidera à expliquer mon problème :



Mes deux blocks contiennent de l'informations qui est alimenté par une BD. J'aimerais pouvoir mettre le block 2 au dessus du bloc 1 (sa j'y arrive pas de problème) Mon problème est que, tout dépendant du nombre d'information qu'il y aura dans le bloc 2, celui-ci embarquera sur le block 1.

Il y a t'il un moyen pour que les blocks ne s'embarquent pas un par dessus l'autres (overlap)????

Merci à l'avance

DOUG

ps: Si cela n'est pas assez clair dite le moi et je trouverai une autre façon de mieux l'expliquer.

[Monique]

Bonjour Doug,

et bienvenue sur le Hub

Je pense que tu veux parler de la propriété overflow.
Par exemple, ce style fera apparaître un ascenseur vertical si le texte est trop long

.block2 {
  height: 200px;
  overflow: auto;
}

Pour plus de détails :
- Eviter les frames et iframes grâce aux CSS
- Overflow avec fond fixe en CSS

[Doug]

Bonjour Monique

Merci pour ta réponse rapide...c'est très apprécié.

Mais cela ne règle pas mon problème Car je ne veux pas d'ascenseur. Autrement dit, ce qu'il me faudrait cé que si mon block (block 2) s'agrandit, le block endessous (block 1) baisserait automatiquement. Et là je me demandais si cela ce pouvait ????

Doug

[LaurentDenis]

Pourrais-tu être un plus précis sur la structure de ta page ? Pourquoi ton bloc 2 n'est-il pas naturellement avant ton bloc 1 dans ton code HTML ?

Même si CSS permet de mettre une page cul par dessus tête, dès lors qu'il y a une logique d'organisation, elle doit se retrouver aussi bien dans le code que dans le rendu visuel.

[Doug]

Ok alors je t'explique LaurentDenis

Comme je disais, mes blocks sont alimenter par une Base de Donnée. Alors les résultats fournies dans mes block sont un peut de ce genre là :

Block 1
Ville :
Adresse :
etc :

Block 2
Nom :
Prénom :
etc :

Ville, adresse, ect, nom, prénom, etc, étant dans cette ordre dans la BD.

La mon client me demande de mettre le block 2 avant le block 1. Autrement dit il voudrait que le Nom, prénom, etc soit en premier.

Et avant que tu me dise ''pourquoi tu change pas l'ordre de tes question dans la BD?'' Et bien je peux pas car je retrouverai un autre problème dans une autres pages sur laquelle il faut que la ville soit en premier...Tu comprend?

Merci beaucoup pour vos réponses gang cé tres apprécier

Doug

Ce message a été modifié par Doug - 27 mars 2004 - 19:12.

[martin]

??? Que tu interroge ta bdd dans n'importe quel ordre, ca change rien pour l'affichage...

Explique un poil plus... c'est pas très clair là... montre ton code, ce sera plus simple.

[Doug]

Martin cé dur de te montrer le code car justement j'y arrive pas!

Moi ce que je fais cé que je met un top négatif à mon block 2 pour qu'il vienne avant le block 1.

Mais mon problème cé que le etc de mon block 2 je sais jamais comme il va etre long (1 ligne parfois et 10 lignes une autre fois) Alors il embarque sur mon block 1

Et je ne veux pas d'ascenseur (car coté design sa ne sera pas jolie) Alors je me demandais si c'était possible de faire descendre le block 1 par rapport à la hauteur du block 2. Exactement comme si le block 1 serait en haut du block 2, celui-ci ferait decendre automatiquement le block 2.

Est-ce que je suis assez clair?? cé parfois difficille d'expliquer correctement

Doug

Ce message a été modifié par Doug - 27 mars 2004 - 19:45.

[Monique]

Doug, comment définis-tu tes blocs dans la feuille de style ?
height, width, position... ?

[Doug]

cé une position relative avec un width de 480 px pour les deux block

et mon block 2 doit avoir un top de disont -140 px pour qu'il arrive par dessus le block 1

et mes block sont deux DIV. Genre DIV class='block1'' et DIV class=''block2''

Ce message a été modifié par Doug - 27 mars 2004 - 21:11.

[LaurentDenis]

Hum... La vrai solution me semble plutôt du côté des requêtes à la BD... Ne serait-ce que parce que la page risque de perdre son sens dans un média qui ignore la bidouille CSS et qui s'en tient au flux HTML.

Les quelques bidouilles possibles ne sont pas enthousiasmantes :

- fixer une hauteur constante à ton bloc 2. Le support de height étant assez mauvais dans pas mal de navigateurs, il faut passer par un display: table-cell. Pas très joli quand le contenu de bloc2 est petit...

- jouer sur z-index et :hover pour qu'au passage de la souris sur le bloc 1, il réapparaisse "sur" le bloc 2. Surprenant et pas très intuitif pour l'utilisateur.

Mais les deux blocs n'étant pas "en flux" (c'est à dire dans l'ordre du code HTML), CSS-HTML ne fournit aucun moyen de calculer la position du bloc 1 relativement à la taille verticale du bloc 2.

Ce message a été modifié par LaurentDenis - 28 mars 2004 - 07:04.

[Doug]

Merci Beaucoup LaurentDenis et les autres!

d'avoir confirmé que cela était impossible.

Doug

[Beatnykk]

bah il suffit alors de faire un tableau, surtout pour si peu d'info (quelle qu'en soit la qualité) ; ce n'est pas parce que css est très en vogue qu'il faut vouloir à tout prix tout faire avec, quand une autre solution (certes un peu moins élégante) se prête mieux au cas de figure...

on n'est pas élitistes, ou quoi ?

[LaurentDenis]

Faire à tout prix, non. Faire en fonction de la présentation non plus :
-A données tabulaires... balisage tabulaire
-A données linéaires... balisage textuel

[kiara]

Et avec des div "etirables", tes 2 blocs (block1 et block 2) seraient dans un autre div.
de cette facon le bloc 2 pousserait le bloc 1... ... non ?

j'avais trouver ceci sur alsacreations (c'est dingue comme il me plait ce site j'arrete pas de parler d'eux ), et ca m'a bien aider.

Kiara

[Doug]

Kiara pourrais-tu m'expliquer ça une deuxième fois svp?? parce que si cé une solution j'aimerais bien la savoir et sa m'aiderait vraiment beauocup

Doug

[kiara]

tout est ici :

Alsacreations

Kiara