[HTML] Positionner en bas un élément en position relative
Résolu/Fermé
A voir également:
- [HTML] Positionner en bas un élément en position relative
- Ma position - Guide
- Editeur html - Télécharger - HTML
- Position gps - Guide
- Pdf element - Télécharger - PDF
- Outlook barre de navigation en bas ✓ - Forum Hotmail / Outlook.com
1 réponse
Salut,
pas possible ou plutôt ça n'a aucun sens ce qui revient au même au final.
Une position absolue sort un élément du flux du document(ordre et positionnement 'normal') en indiquant une position absolue par rapport au coin haut à gauche (0,0 abscisse et ordonnée).
Une position relative l'est par rapport à l'élément précédent(en général).
Une position relative par rapport à un élément absolue ne veut rien dire mais n'est simplement pas possible.
Soit vous vous garez sur une place de parking (absolue par rapport à la place)soit vous vous garez par rapport aux autres voitures(la place restante). Les 2 s'excluent mutuellement.
Mon exemple est peut-être pas convaincant alors je vais compléter:
si vous changez le repère de mesure (le 0 est à tel endroit et de 0 à la longueur que je mesure il y a tant de distance: une mesure) mais que vous changez l'emplacement du 0 les deux mesures n'ont rien de comparable et aucun rapport.
Pour dire la même chose encore:
partez du principe qu'avec le positionnement absolu il n'est plus en rapport avec le reste de la page(l'élément ou plutôt son positionnement) alors qu'en relatif c'est le contraire (relatif à qqchose.).
Juste savoir la définition des termes vous aide à comprendre cela.
EN CSS (comme pour la plupart des langages informatiques basé sur l'anglo saxon) les accents et autres caractères spéciaux sont interdits . Votre CSS est donc faux et n'appliquera jamais les règles de style indiquées(par un sélecteur d'id donc vous force à passer par l'attribut style qui est une mauvaise pratique sauf pour un test rapide qui ne sera pas gardée au final = perte de temps et d'effort inutiles), commencez donc par corriger.
Une méthode plus simple, claire et efficace consiste à indiquer le CSS(class, id, autres sélecteurs) dans un espace à part.
Cela à de multiples avantages dont séparer le CSS du HTML pour la lecture humaine. Idéalement écrire celui ci dans un fichier externe est la solution à utiliser car permet en autres de pouvoir facilement généraliser la mise en page à plusieurs pages en ne l'écrivant qu'une seule fois.
PS:
une astuce pour voir plus facilement le positionnement surtout dans le cas d'élément non particuliérement visible est d'indiquer des bordures et une couleur de fond à un ou plusieurs éléments et de tester. Exemple
Ici vous verrez facilement positionnement et dimensions que prend l'élément dans la page. Pour plusieurs éléments variez les règles de couleurs pour les faire apparaître clairement. Bien sûr n'oublieez pas de supprimer les règles une fois que le test n'est plus nécessaire.
ps2 et 3:
En HTML les div sont à éviter pour privilégier des éléments plus explicites(indiquant le sens du contenu), voir article et section par exemple.
Pour les noms privilégier aussi quelque chose qui a un rapport avec le contenu, c'est une bonne habitude pour ajouter de la clarté quand vous vous relirez. Je veut dire enfant ou pere/grandpere(sans accent) veut pas dire grand chose et vous renseigne absolument pas sur le contenu de chaque élément donc il faudra vous tirer les cheveux pour comprendre quel élément contient quoi surtout qu'une page contient rarement 3 éléments mais plutôt des dizaines voire des centaines et que l'imbrication avec analogie arbre généalogique est à la base du principe HTML(où les termes nœud sont utilisés techniquement et plus précisément: un repére dans l'arbre c'est le nœud, càd. un embranchement spécifique où il y a division ou pas-sans avoir plusieurs enfants un élément qui est supérieur directement dans l'arbre reste un nœud).
pas possible ou plutôt ça n'a aucun sens ce qui revient au même au final.
Une position absolue sort un élément du flux du document(ordre et positionnement 'normal') en indiquant une position absolue par rapport au coin haut à gauche (0,0 abscisse et ordonnée).
Une position relative l'est par rapport à l'élément précédent(en général).
Une position relative par rapport à un élément absolue ne veut rien dire mais n'est simplement pas possible.
Soit vous vous garez sur une place de parking (absolue par rapport à la place)soit vous vous garez par rapport aux autres voitures(la place restante). Les 2 s'excluent mutuellement.
Mon exemple est peut-être pas convaincant alors je vais compléter:
si vous changez le repère de mesure (le 0 est à tel endroit et de 0 à la longueur que je mesure il y a tant de distance: une mesure) mais que vous changez l'emplacement du 0 les deux mesures n'ont rien de comparable et aucun rapport.
Pour dire la même chose encore:
partez du principe qu'avec le positionnement absolu il n'est plus en rapport avec le reste de la page(l'élément ou plutôt son positionnement) alors qu'en relatif c'est le contraire (relatif à qqchose.).
Juste savoir la définition des termes vous aide à comprendre cela.
EN CSS (comme pour la plupart des langages informatiques basé sur l'anglo saxon) les accents et autres caractères spéciaux sont interdits . Votre CSS est donc faux et n'appliquera jamais les règles de style indiquées(par un sélecteur d'id donc vous force à passer par l'attribut style qui est une mauvaise pratique sauf pour un test rapide qui ne sera pas gardée au final = perte de temps et d'effort inutiles), commencez donc par corriger.
Une méthode plus simple, claire et efficace consiste à indiquer le CSS(class, id, autres sélecteurs) dans un espace à part.
Cela à de multiples avantages dont séparer le CSS du HTML pour la lecture humaine. Idéalement écrire celui ci dans un fichier externe est la solution à utiliser car permet en autres de pouvoir facilement généraliser la mise en page à plusieurs pages en ne l'écrivant qu'une seule fois.
PS:
une astuce pour voir plus facilement le positionnement surtout dans le cas d'élément non particuliérement visible est d'indiquer des bordures et une couleur de fond à un ou plusieurs éléments et de tester. Exemple
... style="border:1px solid red;background-color:blue;" ...>
Ici vous verrez facilement positionnement et dimensions que prend l'élément dans la page. Pour plusieurs éléments variez les règles de couleurs pour les faire apparaître clairement. Bien sûr n'oublieez pas de supprimer les règles une fois que le test n'est plus nécessaire.
ps2 et 3:
En HTML les div sont à éviter pour privilégier des éléments plus explicites(indiquant le sens du contenu), voir article et section par exemple.
Pour les noms privilégier aussi quelque chose qui a un rapport avec le contenu, c'est une bonne habitude pour ajouter de la clarté quand vous vous relirez. Je veut dire enfant ou pere/grandpere(sans accent) veut pas dire grand chose et vous renseigne absolument pas sur le contenu de chaque élément donc il faudra vous tirer les cheveux pour comprendre quel élément contient quoi surtout qu'une page contient rarement 3 éléments mais plutôt des dizaines voire des centaines et que l'imbrication avec analogie arbre généalogique est à la base du principe HTML(où les termes nœud sont utilisés techniquement et plus précisément: un repére dans l'arbre c'est le nœud, càd. un embranchement spécifique où il y a division ou pas-sans avoir plusieurs enfants un élément qui est supérieur directement dans l'arbre reste un nœud).
Modifié le 1 avril 2021 à 09:45
Merci beaucoup de cette réponse !
Je vais me débrouiller autrement...
On considère ce sujet résolu ?