11548 sujets

JavaScript, DOM et API Web HTML5

JS calcule taille d'un bloc

Bonjour,

Je recherche un script javascript qui permet de positionner un pied de page en absolu sous le bloc duquel il est placé.

Le principe est que le script calcule la taille (hauteur) du bloc situé visuellement au dessus afin que le footer se situe juste en dessous de celui-ci.

Je cherche à mettre en application un tel procédé car je souhaite que dans le code source mon <div id="footer"> se situe sous <div id="header"> et non sous <div id="central">.

La structure serait la suivante :

<div id="header"></div>
div id="footer"></div>
<div id="central"></div>
Modérateur
bonjour,

ou je n'ai rien compris ou tu cherche midi a 14 heures .

dans ton code les div vont se positionner les uns aprés les autres sans javascript.

"header" puis "footer" puis "central" !?
non ?

ensuite si tu place "footer" en absolute , selon le navigateur, "central" va s'afficher par-dessous ou par-dessus en ignorant la position de "footer" ....

bon je comprends pas .

++
a écrit :
ensuite si tu place "footer" en absolute , selon le navigateur, "central" va s'afficher par-dessous ou par-dessus en ignorant la position de "footer" ....


Le but est que "central" s'affiche entre header et footer. C'est bien là la difficulté.

"central" possède une taille variable et "footer" doit visuellement se situer juste au dessous (bien que son code se situe avant le code de "central").
Modifié par karnabal (03 Nov 2006 - 12:42)
Modérateur
Bonjour,

Ta démarche n'est pas la bonne... Je ne pense pas qu'il y ait à chercher plus loin. Smiley cligne

Lorsque tu présentes un document, celui-ci doit être logique pour toi qui dispose de CSS et de JS mais aussi pour celui qui ne dispose que d'un de ces deux langages ainsi que pour celui qui ne dispose que du HTML. Smiley smile

Si ta page va à l'encontre de ce principe, revois ta structure.
Ben à vrai dire c'est la démarche de la personne pour laquelle je bosse. Elle exige que le footer se situe à cet endroit dans le code.

Les éléments du code vont être ensuite dissociés pour être recomposés. Je ne maîtrise pas cette partie de la production et j'agis selon les contraintes qui me sont données.

Je réitère ma demande.
Je ne suis pas sur d'avoir bien compris, mais voici un bout de code ou les éléments sont dans l'ordre souhaité avec javascript et retrouvent le bon ordre avec js non activé :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<link rel="stylesheet" type="text/css" />
<style type="text/css" />
#header{height:60px;background-color:yellow}
#central{height:200px;background-color:blue}
#footer{height:60px;background-color:red}
</style>
<script type="text/javascript">
document.getElementsByTagName("link")[0].href="avecjs.css"
</script>
</head>
<body class="js">
<div id="header">ENTETE</div>
<div id="central">CENTRE</div>
<div id="footer">PIEDS</div>
</body>
</html>

et dans le fichier avecjs.css :

.js #central{position:absolute;top:120px;width:100%/*budg IE*/}
C'est laborieux ! Mais en tous cas merci de votre aide. Smiley smile

Voilà ce que mon client veux :

<div id="header">ENTETE</div>
<div id="footer">PIEDS</div>
<div id="central">CENTRE</div>


Le truc c'est que <div id="footer"> doit, à l'affichage, visuellement, se situer sous <div id="central">, et ce, quelle que soit la hauteur de ce dernier !
Modifié par karnabal (04 Nov 2006 - 00:36)
C'est se compliquer inutilement je trouve, mais enfin bon... ça doit te donner quelque chose comme :

var central = document.getElementById('central');
var footer = document.getElementById('footer');
var height = central.offsetHeight;
var y = central.offsetTop;
footer.style.position='absolute';
footer.style.left = '0px';
footer.style.top = (height + y) + 'px';
Sujet clos
Aller à