Positionnement
Fermé
rourou
-
19 nov. 2010 à 14:48
coeus Messages postés 3019 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 26 nov. 2010 à 16:49
coeus Messages postés 3019 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 26 nov. 2010 à 16:49
A voir également:
- Positionnement
- Test de positionnement cesi - Forum Études / Formation High-Tech
- Test de positionnement afpa ✓ - Forum Études / Formation High-Tech
- Test de positionnement entrée en formation greta - Forum Windows
- Informations tests CESI - Forum Études / Formation High-Tech
- Entretien au CESI ? ✓ - Forum Études / Formation High-Tech
8 réponses
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
121
19 nov. 2010 à 17:44
19 nov. 2010 à 17:44
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.
avion-f16
Messages postés
19125
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
23 mars 2023
4 468
19 nov. 2010 à 16:58
19 nov. 2010 à 16:58
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>
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
121
19 nov. 2010 à 17:15
19 nov. 2010 à 17:15
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 ;-)
avion-f16
Messages postés
19125
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
23 mars 2023
4 468
19 nov. 2010 à 17:10
19 nov. 2010 à 17:10
« 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.
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
121
19 nov. 2010 à 15:45
19 nov. 2010 à 15:45
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 ;)
merci beaucoup merci merci !! çam arche très très bien encore mille merci à vous 2 !!;)
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
121
26 nov. 2010 à 16:09
26 nov. 2010 à 16:09
Plaisir !
N'oublie pas de mettre le sujet à "résolu" si ce n'est pas déjà fait ;-)
On veut que le forum ait une bonne cote de problèmes résolus !
N'oublie pas de mettre le sujet à "résolu" si ce n'est pas déjà fait ;-)
On veut que le forum ait une bonne cote de problèmes résolus !
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
121
26 nov. 2010 à 16:49
26 nov. 2010 à 16:49
Nah malheureusement je ne peux pas le faire, seul le posteur original le peut. Je n'ai pas cette option.
Bah, pas grave ;-)
Bah, pas grave ;-)
19 nov. 2010 à 17:54
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.
19 nov. 2010 à 20:47
Parce que moi j'ai toujours eu ce problème et pourtant j'utilise toujours un doctype strict.
19 nov. 2010 à 23:30
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
22 nov. 2010 à 15:36
Je te donne le bénéfice du doute jusqu'à ce que j'aie testé. Can't wait ! ;)