11548 sujets

JavaScript, DOM et API Web HTML5

Calcul 'Hauteur d'un élément' bug si présence d'un formulaire <

Bonjour,

Je suis sur le site d'une petite association et je rencontre un problème qui me semble tout bidon, mais étant entre le 'noob' et le 'padawan', je n'ai pas les connaissances ...

Ma page principale s'organise grossièrement en :
- une partie 'gauche' (contenu principal)
- une partie 'droite' (menu + outils de l'assoc)
- et un 'footer' (qui quand le contenu principal n'est pas énorme, se retrouve 'lié' à la partie 'droite' de par leur 'background').

Avec le peu de connaissance que j'ai de Javascript, j'ai quand même réussi a récupérer la hauteur de mon élément 'gauche', ce qui me permet de calculer la hauteur que doit faire ma partie 'droite' pour bien rejoindre le 'footer'. Smiley smile

Le problème est, que sur certaines pages, la partie 'gauche' contient un formulaire avec un <textarea> et que, pour une raison inconnue, il n'arrive pas a récupérer la hauteur de l'élément 'gauche' !?!? Smiley rolleyes


Euh, je ne sais pas si je suis clair ...
Dans l'attente de vos réponses, merci d'avance Smiley cligne
Bonjour

Le calcul des tailles et hauteurs risque d'être compromis par un agrandissement manuel des textes. Il est préférable d'éviter ce genre de bricolage qui ne peut que générer des soucis supplémentaires.
Euh... Smiley rolleyes

Qu'entends-tu par 'agrandissement manuel des textes' ??
Parceque le contenu de ma page provient de données sélectionnées dans une bdd mysql. Pour le moment, je ne vois pas où cela pourrait poser problème, puisque j'affiche complètement ma partie 'gauche' avant d'en calculer la hauteur pour mon opération ...

Mais si il y a une autre solution, je suis preneur ... mais je crois que ce sera dans un autre post sur le forum CSS alors ... Smiley confus

Rien de plus ? Smiley confused
En bref tu veux que une partie gauche et une partie droite qui soit tout les temps tous les deux de la même hauteur afin que le footer soit bien callé en bas des 2.

ceci est du css pas du javascript.
C'est du à un problème de calcul des hauteurs des boites flottantes. (qui n'est pas un problème d'ailleur)

Rajoute un div, qui entoure ton contenu gauche et droit. Et met lui le css suivant (en imaginant qu'il aurait pour class clearfix.

.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}


et voilà Smiley langue
Un certain nombre de gens ont paramétré ta taille des textes ou les agrandissent manuellement pour leur confort de lecture. Si tu calcules la hauteur d'un bloc selon son contenu (et il contient probablement du texte) ton calcul sera faux sitôt que la taille (+interlignage) sera modifiée, et donc ta belle mise en page va partir en vrille garanti 100% Smiley cligne Vaut mieux éviter.
Salut masseuro,

Merci pour ton aide, mais 'boulet' oblige, j'arrive pas a la mettre en oeuvre Smiley rolleyes

Voici ma structure de page et le CSS qui va avec

Page index.php

<body>
   <div id="centre">
	<div id="entete"></div>
 	<div id="gauche">
	   <div id="box">
	      [b]Mon contenu de hauteur variable[/b]
           </div>
	</div>			
	<div id="droite">
           <img src="./IMAGES/feather_image.jpg" /> [b]une image de 200px de haut, d'où le margin-top de -200px[/b]
           [b]+ divers outils[/b] 
        </div>			
   </div>
   <div id="foot_page">
   </div>
</body>


Et le CSS:

#centre {
   width: 1000px;
   margin: 0 auto;
}
#entete {
   height:200px;
   width:740px;
}
#droite {
   float:right;
   width: 260px;
   background: url(../IMAGES/table_back.gif) repeat-y;
   margin: -200px 0px 0px 0px;
}
#gauche {
   float:left;
   width: 740px;
}


Pour quelques explication supplémentaires...
La 'boîte' entete est appelée a contenir un menu qui n'est pas présent sur la page d'index car la page d'index n'est qu'une page d'identification ... donc sur cette page, il n'y a (dans la boite droite) que l'image dont je parle un peu plus haut.

Voilà masseuro, si tu as besoin d'infos supplémentaires, n'hésites pas Smiley cligne
Et merci encore pour votre début d'aide Smiley smile
Sujet clos
Aller à