Remonter un texte pour qu'il soit habillé par une image.

Salut,

je ne comprends pas votre façon de faire votre mise en page et probablement une partie du problème vient de là.

Visiblement vous utilisez Bootstrap alors quel intérêt d'avoir vos propres règles CSS. Surtout pour des positionnements alors que l' grand avantage de Bootstrap est de pouvoir positionner et dimensionner facilement des éléments avec un système de grille(lignes, colonnes, tailles...) qui seront adaptative.

En plus de vous compliquer la vie inutilement(utilisez soit Boostrap soit des règles faites à la main  pas les 2) vous risquez les conflits en changeant "position" ce qui fait sortir du flux normal des éléments.

Il serait donc mieux :

*soit d'utiliser Bootstrap pour tout, donc positionner tout vos éléments en utilisant le système de grille et layout de Bootstrap puisqu'il est fait pour ça qui d'ailleurs permet aussi de gérer les dimensions.

*soit vous renoncez à Bootstrap et vous ajoutez un petit JavaScript pour faire les quelques effets utilisés(voire JQuery mais ça me parâit lourd d'avoir l'intégralité de Jquery à charger pour 2 fonctions qui tiendront sur même pas 10 lignes de codes).

Quant à votre CSS quelques conseils:

  font-family: 'avojaloinregular';

 prévoyez des polices d'écriture alternatives et évitez les polices originales car vous y perdrez en lisibilité et qu'elles seront rarement chargées dont rarement utilisées.

    margin-top: -20px;
    position: relative;

Là vous hésitez entre deux façons de faire le positionnement. Choisissez en une: soit les marges soit le positionnement relatif, mettre les 2 ne fait que vous compliquer la vie et rendre votre code plus facilement foireux.

Dans la mesure du possible utilisez des unités relatives. Ce qui me surprend c'est que vous le faites plus tard en utilisant des pourcentages. Pour les textes vous pouvez affiner avec le quadratin d'imprimerie qui représente une hauteur de ligne courante( unité "em").

 margin-top: 40px;

Encore une fois une dimension en pixels pour le positionnement ne sera jamais juste que pour une taille d'écran (la vôtre?) et à moins que vous ne fassiez le site que pour vous même il faut utiliser une dimension proportionnelle sous peine de bug pour tous les autres(la majorité) qui n'ont pas la même taille d'écran.

#insta et .insta c'est pas clair, il faudrait mieux donner deux noms différents pour une classe et un identifiant, par exemple: #insta-container et .insta-image, d'un simple coup d’œil vous savez de quoi il s'agit même si vous regardez le code des années plus tard.

    position: relative;
    float: left;

Vraiment flottant et en positionnement relatif?

Je ne vos pas l'intérêt. Vous voulez faire quoi au juste? Un seul suffit s'il est bien utilisé.

Le positionnement relatif permet de positionner un élément relativement par rapport à son précédent, si on veut modifier l'espace entre les deux il faudra donner une valeur à top, left, right ou bottom pour indiquer l'espace voulu sur le côté choisit.

Le positionnement flottant permet de rendre un élément flottant par rapport à son prédécesseur, on doit indiquer s'il doit "flotter" à droite ou à gauche par exemple.

Bref là vous avez deux moitiés de règles de positionnement différentes...et deux moitiés différentes s'additionneront pas. Une seule complète suffit.

Si vous n'êtes pas au point avec les règles CSS le plus simple est de regarde rla notice ;)

https://www.w3schools.com/CSSref/pr_class_float.asp

https://www.w3schools.com/cssref/pr_class_position.asp

Mais bon vu que vous utilisez Bootstrap faites toute la mise en page avec Bootstrap.

Ou alors vous virez Bootstrap pour tout faire à la main depuis le début. Les 2 n'ont aucun intérêt, vous complique la vie et font perdre l'intérêt de Bootstrap(ne pas avoir à écrire le CSS soi même et utiliser des règles de positionnement et dimensions(adaptatives au passage) qui sont déjà définis par le moteur Bootstrap.

https://www.w3schools.com/bootstrap/bootstrap_ver.asp

Bonjour,

Par défaut ton h1 prend la propriété display: block et prend toute la largeur, essaye déjà en précisant un autre type ?

Bonjour,

Merci pour vos réponses.

@Aboubakar : Quelle liste :) Je vais attaquer tout ça. Merci ! Effectivement, je suis parti d'un fichier Bootstrap dont je ne comprends RIEN :/

@T3chN0g3n : Merci, j'ai tenté sans succès :(

Merci à vous et bonne aprèm,

LM

Bonsoir,

J'ai tout refait en CSS.

Sujet résolu.

Bonne soirée ;)