Positionnement
rourou
-
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
jai un soucis je fais un site il y a une photo à gauche et un texte avec un titre à droite.. je voudrais que la photo soit à gauche et que le texte soit bien sur la droite et pour moi il doit même si il "dépasse" la photo rester sur la droite hors là il passe sous la photo .. par conre ensuite après ce texte de droite je veux un autre paragrraphe qui commence bien en dessous de la photo plus bas mais je veux que le texte de droite soit alligné sur la droite ... comment faire là ça ne marche pas la fin du texte passe sous la photo ... alors que je veux qu'il reste aligné sur la droite .. j'ai fait une image flottante donc c'était surement pour ça que ça passait dessous
alors j'ai enlevé li'mage fottante et là le texte de droite part sous la photo en entier ggr je ne sais okys comment faire ...
audez moi pouvez vous me donner un code qui marche avec cette configuration :
une photo à gauche avec un texte à droite qui reste aligné à droite comme un alinéa meme s'il dépasse la photo et ensuite un autre texte qui démarre à gauche sous la photo ... merci d'avance ;)
jai un soucis je fais un site il y a une photo à gauche et un texte avec un titre à droite.. je voudrais que la photo soit à gauche et que le texte soit bien sur la droite et pour moi il doit même si il "dépasse" la photo rester sur la droite hors là il passe sous la photo .. par conre ensuite après ce texte de droite je veux un autre paragrraphe qui commence bien en dessous de la photo plus bas mais je veux que le texte de droite soit alligné sur la droite ... comment faire là ça ne marche pas la fin du texte passe sous la photo ... alors que je veux qu'il reste aligné sur la droite .. j'ai fait une image flottante donc c'était surement pour ça que ça passait dessous
alors j'ai enlevé li'mage fottante et là le texte de droite part sous la photo en entier ggr je ne sais okys comment faire ...
audez moi pouvez vous me donner un code qui marche avec cette configuration :
une photo à gauche avec un texte à droite qui reste aligné à droite comme un alinéa meme s'il dépasse la photo et ensuite un autre texte qui démarre à gauche sous la photo ... merci d'avance ;)
8 réponses
Si ça ne fonctionne pas sous un des navigateurs (ça ne devrait pas, mais sait-on jamais) essaie de mettre les margins et les paddings à zéro. Ensuite ajuste selon tes besoins. Parce que IE va augmenter la hauteur/largeur de tes éléments en fonction des paddings, mais pas Firefox. Ça peut être la cause de bien des soucis. Mais ça ne devrait pas arriver, puisque le code fourni par avion-f16 ne déclare aucun padding.
Salut.
Avec les répétitions, difficile de te lire.
Tout ça pour dire que tu aimerais tout simplement avoir d'un côté une image et de l'autre du texte, sans que ce dernier passe en-dessous de l'image lorsqu'il est plus long que la taille de l'image.
Voilà le code :
Avec les répétitions, difficile de te lire.
Tout ça pour dire que tu aimerais tout simplement avoir d'un côté une image et de l'autre du texte, sans que ce dernier passe en-dessous de l'image lorsqu'il est plus long que la taille de l'image.
Voilà le code :
<div> <div style="float:left; width: 49%; text-align: right;"> <img src="image.png" alt="" /> </div> <div style="margin-left: 51%; "> <h3>Titre du texte</h3> <p> Ligne 1 ...<br/> Ligne 2 ...<br/> Ligne 3 ...<br/> Ligne 4 ...<br/> Ligne 5 ...<br/> Ligne 6 ...<br/> Ligne 7 ...<br/> </p> </div> </div>
Après tout ce code, tu crées une autre <div> pour le reste du texte qui devra aller en-dessous.
Remarque, dans la deuxième sous-div (celle qui contient le texte), personnellement je mettrais simplement un float:left; au lieu d'un margin-left. Avion-f16, peux-tu m'expliquer s'il y a une raison particulière pour ce choix, ou si c'est juste une préférence personnelle ? Je suis curieux ;-)
Remarque, dans la deuxième sous-div (celle qui contient le texte), personnellement je mettrais simplement un float:left; au lieu d'un margin-left. Avion-f16, peux-tu m'expliquer s'il y a une raison particulière pour ce choix, ou si c'est juste une préférence personnelle ? Je suis curieux ;-)
« et si ensuite je veux que un autre texte reparte en dessous de l'image et du texte cité ? »
Il suffit de mettre le texte à la suite du code.
Le code que je t'ai donné fonctionne très bien sur Firefox.
Il suffit de mettre le texte à la suite du code.
Le code que je t'ai donné fonctionne très bien sur Firefox.
Wooooow à droite, à gauche, à gauche, à droite, image flottante à gauchedroitegauche...
Hahaha j'ai eu du plaisir à lire ce post ! Pas facile hein, d'expliquer le positionnement de quelque chose sans support visuel ? ;)
De la manière dont tu décris ta page, on dirait que tu as utilisé des position:absolute; dans ton CSS. Est-ce le cas ? Si oui, on va essayer de faire sans ; c'est rarement une solution optimale.
Donne-moi quelques détails de plus sur le résultat auquel tu veux arriver. Le texte à droite de la photo, est-ce qu'il peut être tellement long qu'il dépasserait en bas de la photo, ce qui décalerait le reste du texte et créerait un "vide" sous la photo ? Est-ce que ce texte a un lien avec le reste du texte qui va se trouver en-dessous de la photo ? Ou tu as besoin qu'il y ait une continuité entre le texte à droite de la photo et le texte qui est en-dessous ?
Avec ces détails supplémentaires, je vasi pouvoir te proposer une solution qui répond à tes besoins ;-)
Hahaha j'ai eu du plaisir à lire ce post ! Pas facile hein, d'expliquer le positionnement de quelque chose sans support visuel ? ;)
De la manière dont tu décris ta page, on dirait que tu as utilisé des position:absolute; dans ton CSS. Est-ce le cas ? Si oui, on va essayer de faire sans ; c'est rarement une solution optimale.
Donne-moi quelques détails de plus sur le résultat auquel tu veux arriver. Le texte à droite de la photo, est-ce qu'il peut être tellement long qu'il dépasserait en bas de la photo, ce qui décalerait le reste du texte et créerait un "vide" sous la photo ? Est-ce que ce texte a un lien avec le reste du texte qui va se trouver en-dessous de la photo ? Ou tu as besoin qu'il y ait une continuité entre le texte à droite de la photo et le texte qui est en-dessous ?
Avec ces détails supplémentaires, je vasi pouvoir te proposer une solution qui répond à tes besoins ;-)
une continuité ? là c''est moi qui ne comprends pas
je suis dsl je débute
en fait j'ai utilisé pour la photo un float et je vois que si je l'enlève le texte de droite passe en dessous
je me réexplique en espérant être plus clair :
j'ai ma photo à gauche qui prend bien plus de 1/4 de l'écran
à droite je veux un texte en relation avec la photo qui n'est pas tellement long il dépasse d'une ligne sous la photo .. mais en fait en visuel sur IE il est bien en face et ne dépasse pas mais sur firefox ou google chrome il passe en dessous sur la dernière ligne du texte de droite (ça j'avais oublié de le dire pardon) là c'est clair
ensuite je saute une ligne de dessous la photo + le texte de droite et écrire un autre paragraphe qui lui commencerait à gauche sur toute la longueur de la page ..
dis moi si tu n'as pas compris
pardon pour le bazar que je fiche merci ;)
je suis dsl je débute
en fait j'ai utilisé pour la photo un float et je vois que si je l'enlève le texte de droite passe en dessous
je me réexplique en espérant être plus clair :
j'ai ma photo à gauche qui prend bien plus de 1/4 de l'écran
à droite je veux un texte en relation avec la photo qui n'est pas tellement long il dépasse d'une ligne sous la photo .. mais en fait en visuel sur IE il est bien en face et ne dépasse pas mais sur firefox ou google chrome il passe en dessous sur la dernière ligne du texte de droite (ça j'avais oublié de le dire pardon) là c'est clair
ensuite je saute une ligne de dessous la photo + le texte de droite et écrire un autre paragraphe qui lui commencerait à gauche sur toute la longueur de la page ..
dis moi si tu n'as pas compris
pardon pour le bazar que je fiche merci ;)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
oui c'est ça (avec en plus après un autre texte qui démarre du côté droit)
je vais essayer merci ;)
et si ensuite je veux que un autre texte
reparte en dessous de l'image et du texte cité ?
je sais c'est dur à expliquer dsl
et pourquoi sur internet explorer mon truc est correct et pas sous firefox ? qq sait ? merci
si je ne réponds pas avant dimanche pour dire si ça marche ou pas ne vous inquiétez pas c'est que je ne 'ia pas pu avoir l'rodi comme je veux car on est plusieurs dessus ;)
merci
je vais essayer merci ;)
et si ensuite je veux que un autre texte
reparte en dessous de l'image et du texte cité ?
je sais c'est dur à expliquer dsl
et pourquoi sur internet explorer mon truc est correct et pas sous firefox ? qq sait ? merci
si je ne réponds pas avant dimanche pour dire si ça marche ou pas ne vous inquiétez pas c'est que je ne 'ia pas pu avoir l'rodi comme je veux car on est plusieurs dessus ;)
merci
ça a l'air de marcher merci beauocup
je paufine avec mes tailles et je vous dis ça demain !!merci ;)
je paufine avec mes tailles et je vous dis ça demain !!merci ;)
C'est le mode Quirks d'IE.
Il s'enclenche quand aucun doctype est indiqué, ce qui n'est pas normal dans une page Web valide.
Parce que moi j'ai toujours eu ce problème et pourtant j'utilise toujours un doctype strict.
C'est tout à fait normal que les marges (internes et externes) et les bordures s'ajoutent à la taille d'origine : un élément avec width:200px et border: 5px fera au total 210px de largeur : 200+2*5
Le mode quirks d'IE, c'est justement quand la taille contient les marges et les bordures.
https://www.alsacreations.com/actu/lire/383-a-propos-du-modele-de-boite-microsoft-ou-quirks.html
Je te donne le bénéfice du doute jusqu'à ce que j'aie testé. Can't wait ! ;)