Bonjour,

Je travail actuellement sur une page a partir de Wordpress. Je dois donner un autre affichage à certaines pages lorsqu'elles sont sous format téléphone, du coup je me suis aider des media queries pour faire cela, et jusque là tout va bien, mais le soucis c'est que le texte ne se positionne pas correctement par rapport à l'image

La page est comme ceci en format normal.

C'est toute la partie en jaune claire qui sera concerné par les media queries. Je lui ai assigner une class "essai" qui englobe le texte (class="text_left") et l'image (class="img_right"). Le code sera situé un peu plus bas dans la page.

 Et voici a quoi ressemble la page lorsqu'elle est sous format téléphone.

La partie qui était en jaune est actuellement celle en vert. J'aimerai faire en sorte que le texte ne se positionne pas sur l'image et qu'il   prenne occupe l'espace libre en hait de l'image. 

Voici le code en CSS de la page:

.essai
{
	background-color: lightgoldenrodyellow;
}
/* Nouvelles règles si la fenêtre fait au plus 1024px de large */
@media all and (max-width: 480px)
{
    .essai
    { 
        color: yellow;
        background-color: green;
        font-size: 1.2em;
    }
		.text_left
	{
	 padding-right: 20px;
	}
		.img_right
	{

position: relative; 
		top: 110px; 
		left: -50px;
	}
}

J'ai déja essayé tout ce qui est "text-align", "position" etc... pour aligner le texte correctement. Je ne sais plus où chercher. S'il vous plaît si quelqu'un pouvait m'aider ce serai super ! Si vous avez du code HTML de la page ou simplement de plus d'infos, n'hésitez surtout pas.

Merci d'avance pour l'aide que vous m'apporteriez.

-
Edité par Yusstonn 13 août 2018 à 11:24:49

Bonjour, je testerais un float: right sur l'image; A la place du positionnement.  A tester.

Je viens de tester le float: right, l'image passe en haut a droite de la boite verte et le texte passe en bas:

La capture d'écran est couper ici désolé pour le rendu. On voit a peu près le rendu que ça donne avec le float:right.

Il faudrait que l'image soit en dessous du texte, et centrer.

PS: Par défaut (dans le code HTML) c'est la structure de la page; que l'image soit avant le texte (j'ai du faire ainsi pour des raison d'accessibilité) c'est pour cela que j'ai utilisé une balise "position" pour l'image.

Merci

-
Edité par Yusstonn 13 août 2018 à 13:36:50

Ha, si l'image est avant le texte dans le html, comment as tu positionnés l'image à droite du texte  en vue desktop? tu n'as bien que, et n'auras que, du texte et une image?

Dans ce cas j'utiliserais flexbox. un display: flex; sur le conteneur de l'image et du texte. Et tout ce joue avec flex-direction.

En vue desktop un row-reverse pour l'affichage en ligne mais le texte en premier, l'image ensuite.

En vue mobile un column-reverse pour l'affichage en colonne avec le texte en premier et l'image ensuite. 

Je ne comprends pas les raisons d'accessibilité que tu invoques. Que l'image soit en premier ou après le texte,dan sle code HTML, n’influence pas sur l'accessibilité. Par contre l'image doit avoir un texte descriptif dans l'attribut alt.

Bonjour,

Tout d'abord merci.

Et pour afficher le texte et l'image comme ci-dessus, j'ai utilisé un "text-align:left" pour le texte, et une balise "position" pour l'image.

en vue desktop, il n'y a pas besoin de modification, tout est ok a ce niveau la, c'est seulement en vue mobile le soucis.

Je vais essayé ce que tu m'as dis, je reviens vers toi très vite.

Merci

Bonjour,

J'ai fait ce que tu m'as dis et ça a marcher, merci beaucoup de ton aide.

De rien au plaisir,

@AngelelaurelleObilamessomo  Bonjour, merci de ne pas squatter le sujet des autres, créer votre propre sujet dans le respect des règles du forum à savoir qu'un message commence par des règles de politesses (Un bonjour ou des salutations à la communauté et se termine par des remerciements par avances pour les futures réponses), la description de votre problème et le code que vous avez écrit inséré sur le forum à l'aide de l'outil d'intégration de code soit le bouton code </>.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ici.