Border margin et border position

Résolu
RaphaJulia Messages postés 14 Date d'inscription lundi 24 juillet 2023 Statut Membre Dernière intervention 16 avril 2024 - 22 sept. 2023 à 15:42
 Taido - 24 sept. 2023 à 10:33

Mon problème est probablement assez facile à  régler mais je n'ai jamais réussi à le régler par moi même, voici mon soucis :

J'ai pris une mauvaise habitude qui est de coder en HTML avec des positions :

#img {
position: absolute;
left: 5px; top: 75px;

Seulement depuis quelques temps je me suis mit à utiliser des "margin" le problème c'est que je n'arrive pas à gérer mes border avec des "margin" alors que ces borders marchent très bien avec les "positions".

Voici donc ce que ça rend avec les "position" (ce que je veux) :

Et voici ce que ça rend avec les "margin" :

Comment faire pour que la border ne continue pas sur la droite.

Merci d'avance pour votre aide.

A voir également:

2 réponses

jordane45 Messages postés 38150 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 avril 2024 4 651
22 sept. 2023 à 20:40

Bonjour,

Il manque le code HTML qui va avec pour bien comprendre...

Mais à première vue tu peux jouer avec du width et/ou ajouter du margin right


1
RaphaJulia Messages postés 14 Date d'inscription lundi 24 juillet 2023 Statut Membre Dernière intervention 16 avril 2024 1
22 sept. 2023 à 20:52

Merci beaucoup le margin-right a marché nickel.

C'était vraiment la chose la plus simple possible, j'ai pas était très intelligent pour le coup

0
RaphaJulia Messages postés 14 Date d'inscription lundi 24 juillet 2023 Statut Membre Dernière intervention 16 avril 2024 1
22 sept. 2023 à 15:43

Et veuillez m'excusez, j'avais oublié le code

.vidMRWtitle {     /*titre*/
    font-size: 22px;
    margin-top: 200px; margin-left: 5px;
    color: red;
    border: #000000 solid 2px;
    background-color: #0e0e0e;
    padding: 3px; padding-right: 590px; padding-left: 50px;
}

.vidMRWtitleBorder {     /*titre*/
    border: #000000 solid 2px;
    background-color: #0e0e0e;
}
0

Ce n'est pas forcément une mauvaise habitude le positionnement en absolute. Par contre utiliser des positionnements/tailles et décalages avec des valeurs absolues(ex: une valeur en pixels) l'est puisque celle ci ne peuvent pas s'adapter à des dimensions d'écran et de fenêtre différente que la vôtre. C'est plutôt là le probléme et la "mauvaise habitude" qui est plus une erreur de débutant qu'une mauvaise habitude puisque celle ci aura un impact qui s'appelle un bug d'affichage. C'est à dire que votre mise en page est prévu pour votre écran uniquement et toute personne ayant une résolution différente de la vôtre ou redimensionant sa fenêtre de navigateur n'aura plus la mise en page voulue.

Donc utiliser avant tout des valeurs relatives qui permettent d'avoir des rendus scalaires(synonymes proportionnelles à l'affichage utilisée). En CSS vous avez les % et em(quadratin surtou pour les textes) par exemple. x% de la largeur permet d'avoir x% de la largeur tandis que 22px ou 200px ou 490px ne correspond à rien de cohérent dès que les dimensions changent.

Vous pouvez tester facilement d'ailleurs ces bugs de plusieurs façons: en redimensionnant la fenêtre du navigateur et voir si la mise en page tient, changer la résolution de votre écran ou dans la console/outils de développement et débugs du navigateur activer l'affichage pour mobile.

ps: il manque toujours le HTML vous avez mal compris la demande. CSS étant relatif à du HTML.

ps2: Attention aussi votre propriété border est incorrectement écrite. la propriétés CSS border est la fonction raccourcie de trois propriétés qui doivent être écrites dans un ordre spécifique. Pour éviter ce genre d'erreurs(écrire un code qui ne sera pas correctement interprété le plus simple est de se référer au manuel d'utilisation ici par exemple:

https://developer.mozilla.org/fr/docs/web/css/border

Qui spécifie l'ordre border-line-width, border-line-style et border-color avec les syntaxes variantes qui sont aussi des façons d'écrires raccourices(n'utiliser que 2 propriétés sur les 3 par exemple).

Avec border la seule complexité est que les valeurs utilisées dans le raccourci border (pour épaisseur de ligne, style de ligne et couleur de ligne) raccourcissent elles mêmes quatre autres propriétés qui correspondent au 4 côtés d'un élément(top, right , bottom et left).

Bonne mise en page mais laissez tombez les positionnements en pixels qui n'ont aucune cohérence ailleurs que pour résolution d'écran et donc l'ensemble des utilisateurs.

ps3: le positionnement en absolute le seul probléme c'est qu'il sort du flot normal des éléments et oblige à donc faire soi même le positionnement plutôt que d'utiliser le flot et donc des éléments qui se suivent en horizontal et vertical, donc oblige à faire le double de travail puisque en utilisant le flot un premier élément du HTML sera toujours au dessus et à gauche d'un élément qui est écrit apès. En général d'ailleurs on ne va changer la valeur position uniquement si c'est nécessaire, donc si l'élément 1 doit être à gauche ou haut dessus de l'élément 2 qui le suit dans l'ordre d'écriture du HTML il n'y a  juste rien à afire(jouer sur les marges est toujours possible et sera efficace, tandis qu'en absolute cela à pas d'intérêt pour le positonnement puisque celui ci peut être inique par le décalage par rapport au point 0,0 càd le côté haut gauche de la page). Et si on veut l'inverse il suffit d'inverser DANS LE HTML l'ordre des éléments à indiquer.

L'utilité d'un positionnement en absolute (ou même relative voire fixed mais qui est encore un cas à part hors du flux):

soit on fait tout en absolute et il faudra donc écrire soi même le positionnement de chaque élément et le flux normal ne sera pas utilisé. Inconvéninet: double de travail et peu de clarté du HTML puisque l'ordre des éléments n'a plus d'importance(et donc revenir soi même sur ses fichiers est prise de tête pour juste comprendre leur ordre et position hors flux: l'odre d'écriture et c'est gênant aussi simplement pour le rôle et but d'HTML qui est censé ^tre la structure d'un document et servira au référencement, bref on se compliue la vie et tombe facilement dans des erreurs et manquements). Ceci dit il y a des avantages aussi l'un étant de ne pas tenir compte du flux e donc de pouvoir positionner chaque élément indépendamment et de façon absolue donc plutôt qu'avoir une logique après/avant à sa gauche à sa droite on peut plus s'appuyer suer la notion de proportions relatives/scalaires que vous n'avez pas mise en place.

Soit on place absolute ou relative sur quelques éléments qui sortent du flux de manière à pouvoir les positionner autrement facilement. Cela est simple et rapide à mettre en place, ne change pas la logique des autres éléments du flux et permet une rapide mise en page hors de la logique de l'ordre des éléments décrits dans HTML. Bon il y a plein d'autres façons de faire cela. Cela peut dépendre des préférences de chcaun mais bien sûr toujuors du contexte: quel HTML pour quel CSS et dans quel but. Si c'est pour un simple positionnement d'un élément par rapport à l'autre jouer sur le display ou utiliser la possibilité de float peut être nettement plus pratique aussi, tout dépends du contexte donc.

Contexte d'ailleurs qui vous a été demandé mais que vous avez refusé de fournir:

"Il manque le code HTML qui va avec pour bien comprendre..."

1