Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

alex.hitman

[Javascript] position suivant un autre calque

Messages recommandés

Bonjour, je possède une page web et j'aimerais faire ceci :

 

J'ai un bloc en position absolue (id="contenu") (donc un calque), dont les propriétés sont définies en CSS.

J'ai ensuite un autre calque que je voudrais positionner suivant le précédent.

 

 

Pour cela, j'essai par du javascript mais je n'y arrive pas trop (je préfère le PHP :P.

 

J'essai de faire que la position top du 2ème calque soit égale à celle du premier+la hauteur du premier+50 si cela est supérieur à 800.

Sinon sa position top vaut 800.

 

J'ai donc ceci dans le 2ème calque :

 

<script language="javascript">
haut = document.getElementById("contenu").style.top.value;
hauteur = document.getElementById("contenu").style.height.value;

if (haut+hauteur+50 > 800)
{
nombre = haut+hauteur+50;
}
else
{
nombre = 800;
}

this.style.top = nombre+px;
</script>

 

Mais bon, sans succès.

 

Y-a-t'il une erreur dans mon code ?

Dois-je définir les propriétés dans le HTML au lieu du CSS ?

 

 

Merci d'avance.

Modifié par alex.hitman

Partager ce message


Lien à poster
Partager sur d’autres sites

Bon...

 

Je suppose que si tu ne veux/peux pas le faire en PHP c'est parce que la hauteur du premier "calque" n'est pas fixe et que tu dois t'appuyer sur ce que le navigateur va générer pour positionner le second.

 

Première remarque, si tu n'étais pas en positionnement absolu, tu pouvais facilement positionner tes "calques" en appliquant le style suivant à celui "du bas" : { clear: both; margin-top: 50px; }

 

Seconde remarque, le positionnement en passant par le DOM est soumis au bon vouloir du navigateur. Si tu utilises le mode quirks tu as des chances de t'en tirer, mais si tu as indiqué un doctype (mode de compatibilité) tu risques d'avoir des ennuis. J'ai fait des tests de positionnement CSS + DHTML et il ressort que certaines propriétés ne sont pas toujours accessibles.

 

Troisième remarque : si l'utilisateur change la taille de sa police, ta mise en page va être mise à mal...

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


  • En ligne récemment   0 membre est en ligne

    Aucun utilisateur enregistré regarde cette page.

×
×
  • Créer...