Position dynamique avec STYLE

Trucsweb.com

· Niveau : DÉBUTANT
· Compatibilité : IE 4+ / Netscape 4+

Utiliser l’attribut CSS de position pour placer des images sur une page Web. Avant le HTML 4.0 il était difficile de positionner avec précision une image sur une page Web. Les attributs standards de la balise IMG, vspace, hspace et align sont très limités et le programmeur doit mettre les images dans une table ou utiliser les GIF un-pixel. Avec le "Cascading Style Sheets" du HTML 4.0 (CSS) nous avons beaucoup plus de liberté pour disposer les images sur une page Web. Si vous fixer l’attribut CSS position à "absolute" vous pouvez définir avec précision la grandeur (width/height) de l’image ainsi que sa position sur la page. Voici un exemple:

Noter qu’avec la balise STYLE, le "selector" IMG fixe la même grandeur pour les trois images alors que leur position est différente.

<html>
<head>
  <title>L’attribut CSS position avec style</title>
  <style>
    IMG {position: absolute; height: 80; width: 80; top: 0; left = 0}
    IMG.deuxieme {top: 80; left : 80}
    IMG.troisieme {top: 160; left : 160}
  </style>
</head>

<body>
  <IMG src = "mon_image1" >
  <IMG src = "mon_image2" class = deuxieme >
  <IMG src = "mon_image3" class = troisieme >
</body>
</html>

Connexion

Mot de passe perdu

Conditions générales

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

Trucsweb.com

CSS

Position dynamique avec STYLE - Script pour afficher une image x/y sur votre page Web.

Commentaires

En ligne depuis 25 ans (1997-2023)

RSS

Aider les Trucsweb