Aligner élément par rapport à une image
Fermé
bipbipboom
Messages postés
26
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
24 février 2015
-
24 févr. 2015 à 01:13
bipbipboom Messages postés 26 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 24 février 2015 - 24 févr. 2015 à 13:45
bipbipboom Messages postés 26 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 24 février 2015 - 24 févr. 2015 à 13:45
A voir également:
- Aligner élément par rapport à une image
- Google recherche par image - Guide
- Image iso - Guide
- Comment agrandir une image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Faststone image viewer - Télécharger - Visionnage & Diaporama
2 réponses
Salut,
c'est pas clair ni votre question ni ce que vous avez essayé pour résoudre le problème.
fonctions? il n'y a des fonctions qu'en programmation donc si c'est ça que vous cherchez il vous faut utiliser javascript pour écrire/modifier/calculer votre CSS et HTML.
En CSS ce sont des propriétés de style, juste des paramètres que l'on peut modifier et appliquer de façon répétées ou pas.
Je vais essayer de vous aider mais sans voir le code ça restera sur le principe.
Pour qu'une page s'adapte à toutes les tailles d'écran il faut utiliser des %.
Hors vous parlez de dimensions en pixels pour une image.
Donc utilisez une taille proportionnelle pour l'image aussi(en pixel c'est une valeur fixe donc aucune variation quelle que soit la résolution de l'affichage)
Au début vous parlez d'alignement vertical puis de superposition.
Pour l'alignement vertical vous pouvez dans un même container (div par exemple) placer les 2 et placer l'un en fonction de l'autre.
<div>
<img src="uneimage.png" />
<p>Un texte </p>
</div>
Avec CSS on peut par exemple indiquer:
/* la largeur de l'image est de 100% de la largeur de son container.*/
.img{
width=100%;
}
/* même
.p{
width=100%;
text-align:center;
}
Pour une superposition vous pouvez indiquer ajouter à votre élément qui chevauche le premier une position relative.
.p{
position:relative;
top:-1em;
}
Cela indique que l'on positionne l'élément .p en fonction de l'élément qui le précède(même si c'est le cas par défaut le fait de l'indiquer permet de modifier ce positionnement).
Puis la modification est à partir de la position initiale vers le haut de 1 quadratin(em), la hauteur de la ligne du texte(nommé en bureautique par abus de langage interligne).
Le texte "Un texte" va bon remonter sur l'image. Vous pouvez aussi utiliser z-index qui permet d'indiquer les 'couches' de cette superposition.
Ensuite vous vous trompez car pour l'alignement c'est bien les bords des éléments qui servent au centrage, en tout cas une des méthodes utilisées et des plus pratique.
<div>
<div style="width:25%;">Gauche</div>
<div>Centre</div>
<div style="width:25%;">Droite</div>
</div>
Le div du centre occupera toute la place restante soit:
100%-25%(partie droite)-25%(partie gauche) =50%
Sur le même principe encore plus simple avec des marges.
<div style="margin-left:8%;margin-right:8%;">
<span style="width:100%;">Mon contenu</span>
</div>
Remarquez que vous pouvez utiliser ces 2 méthodes verticalement, il suffit de considérer la hauteur au lieu de la largeur.
Donc le haut et le bas et non la droite et la gauche.
Parce que je suis sympa:
<div style="padding-top:8%;padding-bottom:8%;">
<span style="height:100%;">Mon contenu</span>
</div>
c'est pas clair ni votre question ni ce que vous avez essayé pour résoudre le problème.
fonctions? il n'y a des fonctions qu'en programmation donc si c'est ça que vous cherchez il vous faut utiliser javascript pour écrire/modifier/calculer votre CSS et HTML.
En CSS ce sont des propriétés de style, juste des paramètres que l'on peut modifier et appliquer de façon répétées ou pas.
Je vais essayer de vous aider mais sans voir le code ça restera sur le principe.
Pour qu'une page s'adapte à toutes les tailles d'écran il faut utiliser des %.
Hors vous parlez de dimensions en pixels pour une image.
Donc utilisez une taille proportionnelle pour l'image aussi(en pixel c'est une valeur fixe donc aucune variation quelle que soit la résolution de l'affichage)
Au début vous parlez d'alignement vertical puis de superposition.
Pour l'alignement vertical vous pouvez dans un même container (div par exemple) placer les 2 et placer l'un en fonction de l'autre.
<div>
<img src="uneimage.png" />
<p>Un texte </p>
</div>
Avec CSS on peut par exemple indiquer:
/* la largeur de l'image est de 100% de la largeur de son container.*/
.img{
width=100%;
}
/* même
.p{
width=100%;
text-align:center;
}
Pour une superposition vous pouvez indiquer ajouter à votre élément qui chevauche le premier une position relative.
.p{
position:relative;
top:-1em;
}
Cela indique que l'on positionne l'élément .p en fonction de l'élément qui le précède(même si c'est le cas par défaut le fait de l'indiquer permet de modifier ce positionnement).
Puis la modification est à partir de la position initiale vers le haut de 1 quadratin(em), la hauteur de la ligne du texte(nommé en bureautique par abus de langage interligne).
Le texte "Un texte" va bon remonter sur l'image. Vous pouvez aussi utiliser z-index qui permet d'indiquer les 'couches' de cette superposition.
Ensuite vous vous trompez car pour l'alignement c'est bien les bords des éléments qui servent au centrage, en tout cas une des méthodes utilisées et des plus pratique.
<div>
<div style="width:25%;">Gauche</div>
<div>Centre</div>
<div style="width:25%;">Droite</div>
</div>
Le div du centre occupera toute la place restante soit:
100%-25%(partie droite)-25%(partie gauche) =50%
Sur le même principe encore plus simple avec des marges.
<div style="margin-left:8%;margin-right:8%;">
<span style="width:100%;">Mon contenu</span>
</div>
Remarquez que vous pouvez utiliser ces 2 méthodes verticalement, il suffit de considérer la hauteur au lieu de la largeur.
Donc le haut et le bas et non la droite et la gauche.
Parce que je suis sympa:
<div style="padding-top:8%;padding-bottom:8%;">
<span style="height:100%;">Mon contenu</span>
</div>
bipbipboom
Messages postés
26
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
24 février 2015
24 févr. 2015 à 13:45
24 févr. 2015 à 13:45
Merci de m'avoir expliqué en détails mon problème.
Effectivement je me suis mal exprimé en parlant de fonction, je te fais donc part d'un grossier exemple en image afin d'essayer de mieux me faire comprendre.
Effectivement je me suis mal exprimé en parlant de fonction, je te fais donc part d'un grossier exemple en image afin d'essayer de mieux me faire comprendre.
