Forums Développement Multimédia

Aller au contenu

Marre des hauteurs...

CODE HTML CSS

14 réponses à ce sujet

#1 JF

  • Guests

Posté 16 March 2004 - 15:56 PM

Je suis à la veille de péter une coche donc je me tourne vers vous...

Le portrait est le suivant : deux calques un à côté de l'autre. Le tout est contenu dans un calque permettant de les centrer. Jusque-là, y'a pas de prob', c'est même simple.

Évidemment, les deux colonnes ne sont pas toujours de la même longueur. Mais comme j'ai une couleur de fond différente entre le corps du document et mes colonnes respectives, il y a un joli trou à la fin de ma colonne la plus courte dans Firefox. Sous IE c'est pas parfait, mais c'est déjà mieux...

Pas grave, vais mettre le fond de mon calque "centreur" la même couleur. Mais ça marche pas.

Je cherche une réponse, je tombe sur un post de LAlex demandant la même problématique sauf qu'il ne veut pas centrer son site. On ajoute "position: absolute" à son calque "centreur" et le problème serait réglé. Mais comme je veux centrer mon site, je me doute bien que ça ne règlera pas du tout le problème, car ça va forcément en créer un autre : le site va se retrouver à gauche de la page, pas au centre.

Me suis pas trompé : ça marche pas la patente! Quelque chose de si simple devient forcément compliqué avec moi.

Ma question, vous l'aurez deviné : c'est quoi le problème avec le code?

Je joins le fichier, mais je songe sérieusement à retourner aux tableaux là...

Merci à l'avance!

Fichier(s) joint(s)

  • Fichier joint  default.zip   833 octets   67 téléchargement(s)


#2 RaphaelG

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6504 messages

Posté 16 March 2004 - 16:13 PM

J'ai pas tout compris.

- tu veux un document en 2 colonnes
- tu veux que l'ensemble soit centré
- tu veux que la colonne la plus courte s'adapte à la plus longue

J'ai bien résumé ?

Alors la réponse est : les div ne sont pas des cellules et sont indépendants les uns des autres.

Deux solutions :
- tu regardes s'il existe des tutos : http://dreamweaver.m...opic.php?t=6583
- tu utilises des tableaux

#3 JF

  • Guests

Posté 16 March 2004 - 16:22 PM

Hum... le post auquel tu me réfères parle de position absolue, donc je ne suis pas plus avancé.

Même si je sais que les calques ne se travaillent pas comme des cellules, il y a quelques trucs fondamentaux qui devraient marcher mais qui restent lettre morte. Je fais juste regarder l'attribut "height" et je me demande quelle est sa réelle utilité. Surtout le 100%... M'enfin, cette subtilité m'apparaîtra plus claire plus tard, sans doute.

J'aurai donc pas le choix de passer par des tableaux? C'est gênant pour un site que je veux mettre XHTML 1.0 Strict. Pas grave, je devrai m'ajuster.

Merci! :(

#4 RaphaelG

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6504 messages

Posté 16 March 2004 - 16:35 PM

Citation

Hum... le post auquel tu me réfères parle de position absolue, donc je ne suis pas plus avancé.
Pourquoi ? ça ne t'empêche pas de centrer correctement ton document : http://www.alsacreat...ticles/centrer/ (voir marges négatives)
Exemples : tous les modèles ici sont centrés en absolu et à cellules ajustables : http://www.alsacreat...ticles/modeles/

Citation

Même si je sais que les calques ne se travaillent pas comme des cellules, il y a quelques trucs fondamentaux qui devraient marcher mais qui restent lettre morte. Je fais juste regarder l'attribut \"height\" et je me demande quelle est sa réelle utilité. Surtout le 100%... M'enfin, cette subtilité m'apparaîtra plus claire plus tard, sans doute.
Là encore, c'est IE qui bugge et qui accepte le % n'importe comment. Par définition, une valeur en % s'applique par rapport à une référence.
Par exemple : si un conteneur n'a pas de hauteur et qu'il contient un div en 100%... normalement ce div n'a pas de hauteur puisque son parent n'est pas déterminé.
Donc si tu veux des % corrects, il faut spécifier une hauteur au conteneur global de la page (<body>), mais aussi au conteneur du document (<html>)

Citation

J'aurai donc pas le choix de passer par des tableaux? C'est gênant pour un site que je veux mettre XHTML 1.0 Strict. Pas grave, je devrai m'ajuster.
Non ça ne pose aucun problème de validation : les table sont des balises tout à fait autorisées en strict. Le seul hic c'est au niveau de la sémantique.

#5 JF

  • Guests

Posté 16 March 2004 - 16:55 PM

Citation

Exemples : tous les modèles ici sont centrés en absolu et à cellules ajustables :http://www.alsacreations.com/articles/modeles/
C'est à ça que je pensais... je ne voulais pas me mettre sur le développement de mon en-tête et de mon pied de page tout de suite mais ça sera peut-être pas une mauvaise chose de le faire.

Je vais intégrer cela à ce que j'ai déjà fait. Merci Sib'!

#6 RaphaelG

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6504 messages

Posté 16 March 2004 - 16:57 PM

Oui et n'oublie pas : les CSS c'est bon, mangez-en ! :(

#7 JF

  • Guests

Posté 16 March 2004 - 17:13 PM

Citation

Là encore, c'est IE qui bugge et qui accepte le % n'importe comment. Par définition, une valeur en % s'applique par rapport à une référence.
Par exemple : si un conteneur n'a pas de hauteur et qu'il contient un div en 100%... normalement ce div n'a pas de hauteur puisque son parent n'est pas déterminé.
C'est là-dessus que j'accroche. Il est vrai qu'il n'a pas de hauteur clairement défini pour le conteneur, il n'en demeure pas moins qu'il est faux de prétendre qu'il n'en a pas (de hauteur, s'entend) puisque tout bloc a une hauteur, qu'elle soit explicitement définie ou non. S'il n'en avait pas, il n'y aurait pas de bloc (il ne serait pas visible). Même chose pour la largeur.

Implicitement donc, la hauteur existe. Les logiciels de mise en pages classiques (notamment pour QuarkXpress et le défunt PageMaker, que j'ai utilisé chacun pendant un an) fonctionnent sur ce principe.

La problématique existe également pour la largeur, mais comme on peut définir cela plus facilement, le problème est aisément plus facile à résoudre. Mais la hauteur est un vrai bordel à définir concrètement, donc le navigateur devrait y mettre du sien, car c'est sa job d'interpréter ce qu'on lui dit de faire.

M'enfin, c'est pas grave. Tu m'as donné un magnifique outil que je vais copier-coller et adapter avec le plus grand soin...

#8 RaphaelG

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6504 messages

Posté 16 March 2004 - 17:27 PM

Citation

il n'en demeure pas moins qu'il est faux de prétendre qu'il n'en a pas (de hauteur, s'entend) puisque tout bloc a une hauteur, qu'elle soit explicitement définie ou non. S'il n'en avait pas, il n'y aurait pas de bloc (il ne serait pas visible). Même chose pour la largeur.
Ben si tu fais un <div></div>, le bloc n'aura pas de dimensions, même si tu lui donnes une couleur jaune.
Si tu places un bloc à l'intérieur du prédécent et que tu lui donnes une hauteur, il "poussera" le conteneur, donc tu risques de voir du vert et du jaune, mais le bloc conteneur n'aura toujours pas de dimensions :(

#9 JF

  • Guests

Posté 16 March 2004 - 18:38 PM

Citation

le bloc conteneur n'aura toujours pas de dimensions :(
Mais si, il en a une. Pas défini explicitement mais implicitement, il en a certainement une puisque le bloc inséré dedans en a une, lui.

Les CSS ne voient pas les choses de cette façon, c'est ce que je comprends de ta logique, mais je crois que c'est une erreur. Mathématiquement, ce n'est pas logique.

:)

#10 JF

  • Guests

Posté 16 March 2004 - 19:31 PM

Ça marche pas... comme chacune des colonnes doit pouvoir s'agrandir en hauteur, l'exemple que j'avais trouvé sur Alsacreations ne permet pas d'agrandir la section réservée au "menu". Dans mon cas, il va y avoir beaucoup plus que ça...

La section centrale fonctionne bien cependant. Mais comme je me considère nul en CSS, je vois difficilement quoi ajouter pour rendre les deux étirables. C'est possible?...

#11 RaphaelG

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6504 messages

Posté 16 March 2004 - 22:42 PM

dans ce cas, je ne vois pas :roll:

#12 eric67

  • Guests

Posté 16 March 2004 - 22:48 PM

Tu peux tester ça :


.clear {

        clear: both;

}

 

et tu rajoutes ensuite ceci juste après la fermeture de la balise div de ta navbar et avant la fermeture du wrapper.


 <br class="clear" />

 


#13 RaphaelG

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6504 messages

Posté 16 March 2004 - 23:40 PM

eric > en fait, nous avions déjà débattu du clear both ici : http://dreamweaver.m...opic.php?t=6583
Et ça pose d'autres problèmes (sur IE6 en tout cas)... mais c'est peut-être la solution en effet.
A condition que les 2 colonnes aient une taille fixée.

#14 eric67

  • Guests

Posté 17 March 2004 - 00:05 AM

Désolé mais je ne pouvais pas savoir :

Citation

Désolé, mais seuls les utilisateurs avec un accès spécial peuvent lire des sujets dans ce forum

C'est vrai que ça peut poser des problèmes selon les cas de figures. Par contre personnelemnt les problèmes (résolus) je les avais eu avec opera 6 et nn6. Et tout dépend de ce que l'on veut faire. :wink:

#15 RaphaelG

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6504 messages

Posté 17 March 2004 - 01:27 AM

Citation

Désolé mais je ne pouvais pas savoir :
Oups, c'est vrai, excuse-moi :mrgreen:



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP