Discussion :

[semio]

Bonjour,
Voilà le soucis.. j'utilise Namo Webeditor (une assez bonne alternative à Dreamweaver, même si assez peu connue) pour des présentattions relativement simples.
Je dois superposer des couches (terme utiliser en tout cas par Namo - qui les définit par la balise DIV), mais je cale sur la meilleure voie - la meilleure balise, le meilleur code - à utiliser pour uniformiser les hauteurs de deux couches..
Plus précisément, avec la fonction intégrée sous Namo, cela donne des résuslats différents suivant les navigateurs..
D'après ma constatation, ce serait la balise <ul> qui créerait des différences dans les hauteurs de couches suivant les navigateurs.. Alors, comment pourrait-on uniformiser la hauteur d'une couche avec une autre si une de ces deux couches au moins a une hauteur qui varie suivant les navigateurs.. ??

Mille merci pour votre avis éclairé..!!

[Bisûnûrs]

Je n'ai strictement rien compris ...

Au passage, Namo Web Editor :

[semio]

Merci à Bisounours d'avoir lu.. et j'explique plus court..!
Mettons 2 couches (<DIV>) superposées.. comment faire pour que leurs hauteurs soient uniformisées, quelle que soit le navigateur ? (si je me fait pas comprendre, je joindrai un code.. où je ne parviens pas à faire coincider la hauteur de 2 couches superposées..)
Merci..!!
PS : pour Namo.. passons (on pourraréer sujet à part plus tard..) Mais il s'agit tt de même ici de programmation HTML assez basique ici quand même..

[Bisûnûrs]

Si j'ai bien compris, il suffit de donner des dimensions identiques.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="div1" width="500" height="500"></div>
<div id="div2" width="500" height="500"></div>

Si ce n'est pas ce que tu attends, postes ton code, ça sera plus facile à corriger.

[semio]

Merci encore à toi Bisounours..!
Mais le problème est que, à hauteur "height" égales.., à l'affichage ces hauteurs ne sont pas toujours identiques sous IE et sous FF..
En fait, apparemment, elles le sont si les couches contiennent par ex de photos, mais pas pour du texte mis en page avec balise <ul> (entre autres)
Mais je prépare un post pour montrer l'exemple..!..

[semio]

Bonsoir,
Voici l'exemple de 2 couches <DIV> ('CADRE' et 'FOND') de hauteurs égales (967, ici), et qui ne le sont pas lors de l'affichage, avec affichage aussi différent pour IE et FF..
Ces hauteurs ont été obtenues en '"ajustant couche au contenu" (commande de Namo - sorry pour Bisounours..loll)
Où se trouve mon erreur..? Mille merci ..!!!

[semio]

Bonjour,
Le code posté hier (2.htm) était encombré de détails qui ne mettaient pas en évidence le problème.
Je l'ai fortement élagué pour faciliter sa lecture..
Le 2 couches 'CADRE' et 'FOND' sont superposées et devraient avoir dimension identique.
Or, "quelque chose..." (???) dans la couche 'FOND' doit causer une différence de hauteur lorsqu'elle est lue par IE et FF..
Thanks..!!!

[Bisûnûrs]

Enlève toutes les balises <p> de ton tableau et remplace-les par <div>
Ton tableau est plus haut que la hauteur que tu lui donnes, donc donne-lui 265 en hauteur et pareil pour tes div CADRE et FOND.
En CSS il faut donner l'unité des valeurs : 265px et non 265. Attention, pas en HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<table height="265">
<div style="height:265px">

[semio]

Merci à toi, Bisounours pour avoir lu ce code..!!!
Si j'ai pris petit peu de temps à répondre ici.. c'est que j'ai tâché de voir si ces 3 recommandations étaient toutes requises.. et les 3 le sont, après tests..
J'aurais quand même 2 questions.. :
(1) pour la balise <p> à remplacer par <div>..
Surtout quand il y a une question de dimension qui intervient, vaut donc toujours mieux la bannir en faveur de <div>...?
(2) pour le choix de la hauteur (265..)

(2.1) J'avais mis 241, car sous Namo (sorry..loll), la commande "ajuster la couche au contenu" (qui donne en principe à la couche la hauteur minimale), me donnait pour hauteur minimale : 241.

(2.2) En mettant la règle sur le côté, la hauteur "semble" être de 241..

(2.3) Comment as-tu obtenu 265 ?

.. ..!!!

[Bisûnûrs]

(1) La balise <p> fait des paragraphes, donc tu auras des marges au-dessus et en-dessous de chaque balise, contrairement à la balise <div>.
On ne peut pas dire qu'il faut privilégier l'un ou l'autre, elles ont toutes les deux leur utilité, tout dépend des cas.

(2) J'ai obtenu 265 en regardant sur IE la place du fond gris du tableau qui dépassait du div, j'ai pris mon logiciel de création d'images et après avoir fait une capture d'écran j'ai mesuré la taille du fond gris. ^^

[semio]

Merci, spécialement à Bisounours..
Disons.. la question telle que strictement posée initialement est résolue..
Avant de la clôturer, puis-je noter qu'il est assez lourd de devoir prendre la mesure "physique" d'une couche lorsqu'on veut lui superposer, juxtaposer une autre.
.. je parle de couche qui contiennent en tout cas du texte mis en forme.. ce qui donne appremment lieu à des distorsions dans les hauteurs, suivant les navigateurs..
Derniers avis à ce sujet..?
Merci encore à Bisounours pour avoir débloqué le cas énoncé.

[Candygirl]

Hello,

J'ai jeté un oeil à l'exemple que tu donnes. Si tu veux comprendre le pourquoi du comment, je te propose de chercher un site qui explique les bases du html/css et construire tes premières pages de a à z plutôt que de chercher à interpréter le code pas très efficace créé par un logiciel.

Tu apprendras que ton problème de hauteur provient du model de boîte différent d'IE qui peut être rétabli avec un doctype correctement déclaré en haut de ta page.

En gros dans ton cas, il y a une différence de 4 px parce que sur IE, en l'absence de doctype, ton cadre de 2px est compris dans la hauteur alors que sur FF il vient s'ajouter à la hauteur.

De même chaque balise doit être utilisée pour sa fonction propre. Un ul sert pour une liste à puces et doit contenir un li qui ne peut contenir que des balises inlines, donc pas de p ni de div. Si le but est de créer un effet visuel pour avoir un décalage, tu vas jouer sur le css des éléments précis, avec le padding, margin ou le text-indent par exemple.

[semio]

Merci à Cangygirl pour le temps consacré et pour la précision de la réponse..
Je décortique tout ceci en détail, et je reviens..
En tout cas les références mentionnées sont particulièrement 'pros'.. du tout bon..!
Avec autant de précision.. l'abcès ne pourra cette fois qu'être purgé..!
Ceci met en tout cas, dès à présent, en avant les limites des logiciels 'clé en main'.. et les dangers de s'y fier..!
Envie de comparer ces logiciels d'édition aux logiciels de traduction que l'on ne peut utiliser que pour dégrossir le problème, mais aucunement pour un travail en finesse..! (maintenant bien possible que Namo ne soit pas le plus fiable.. mais c'est un autre sujet..)