« Need help ! Je n'arrive pas à placer un élément comme je le souhaite... »

Bonjour à tous !
Voila mon problème est que je ne parviens pas à placer un petit truc de mon code html là où je le souhaiterais...
C'est le petit truc pour former la seconde bulle que je n'arrives pas à placer !!
Pour ce qui est de la forme de la bulle j'ai pris pour base ceci : http://www.cocktail-graph.com/t12217-fiche-reponse-a-rp-bulle

Ici !:

Voici le code

Code:: <div align="left"><table><td><div style="width: 150px; height: 150px; border: 2px white solid; background-image: url('http://image.noelshack.com/fichiers/2015/01/1420296614-fille-fleur-rose-ava.png'); grey; border-radius: 75px;margin-bottom: -80px;margin-left: 25px; margin-right: 45px;"></div><div style=" position: relative; border-right: 36px solid #494949; border-bottom: 18px solid transparent; border-top:18px solid transparent; margin-right: -5px; margin-left: 15px"></div></td><td><div style="width: 550px; padding: 30px; background-color: #494949; border-right: 3px white solid; border-bottom: 3px white solid; border-radius: 40px; box-shadow: 3px 3px 10px #000000; margin-top: 65px; color: white; text-align: justify;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere ex in massa faucibus varius. In facilisis odio eget porttitor tincidunt. Mauris ullamcorper nisl orci, accumsan dignissim neque congue sed. Sed molestie nunc congue lorem ultrices molestie. Maecenas nec nulla turpis. In id maximus ex. Sed suscipit venenatis nunc ac sagittis. In laoreet magna eget metus posuere cursus. Aenean varius turpis id sollicitudin sodales. Vivamus vulputate turpis tempor magna porttitor, nec fermentum est dapibus.

Integer venenatis volutpat faucibus. Praesent eget magna nec nunc sodales malesuada. Nulla facilisi. Morbi vel mi libero. Fusce commodo, nisl non fermentum finibus, lacus est facilisis diam, et commodo ligula lacus id enim. Suspendisse imperdiet facilisis quam, ut cursus ex fringilla ut. Cras sodales magna sed ante lobortis, et aliquet ligula mattis. Donec non blandit odio. Maecenas egestas eros sed nisl egestas, quis fermentum elit hendrerit. Morbi ullamcorper, lorem vel bibendum pulvinar, felis est bibendum lorem, in sodales sapien felis in magna. Aliquam interdum eget urna vel dignissim. Etiam et rhoncus dolor. Suspendisse egestas posuere risus, eu mollis ligula tincidunt non.

</div></td></table></div>
<div align="right"><table><td><div style="width: 550px; padding: 30px; background-color: #494949; border-right: 3px white solid; border-bottom: 3px white solid; border-radius: 40px; box-shadow: 3px 3px 10px #000000; margin-top: 65px; color: white; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere ex in massa faucibus varius. In facilisis odio eget porttitor tincidunt. Mauris ullamcorper nisl orci, accumsan dignissim neque congue sed. Sed molestie nunc congue lorem ultrices molestie. Maecenas nec nulla turpis. In id maximus ex. Sed suscipit venenatis nunc ac sagittis. In laoreet magna eget metus posuere cursus. Aenean varius turpis id sollicitudin sodales. Vivamus vulputate turpis tempor magna porttitor, nec fermentum est dapibus.

</div></td><div style=" position: relative; border-left: 36px solid #494949; border-bottom: 18px solid transparent; border-top:18px solid transparent; margin-left: 500px;"></div><td><div style="width: 150px; height: 150px; border: 2px white solid; background-image: url('http://image.noelshack.com/fichiers/2015/01/1420296614-fille-fleur-rose-ava.png'); grey; border-radius: 75px;margin-bottom: -80px;margin-left: 45px; margin-right: 25px;"></div></td></table></div>

Merci d'avance pour votre aide !

Désolée du double post ! Mais c'est pour remettre à jour, après les gens ne verront pas ^^'

Donc finalement j'ai réussi à remettre bon petit triangle à la bonne place, mais maintenant c'est l'image que je n'arrive pas à mettre comme la bulle précédente...

Spoiler:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere ex in massa faucibus varius. In facilisis odio eget porttitor tincidunt. Mauris ullamcorper nisl orci, accumsan dignissim neque congue sed. Sed molestie nunc congue lorem ultrices molestie. Maecenas nec nulla turpis. In id maximus ex. Sed suscipit venenatis nunc ac sagittis. In laoreet magna eget metus posuere cursus. Aenean varius turpis id sollicitudin sodales. Vivamus vulputate turpis tempor magna porttitor, nec fermentum est dapibus.

Integer venenatis volutpat faucibus. Praesent eget magna nec nunc sodales malesuada. Nulla facilisi. Morbi vel mi libero. Fusce commodo, nisl non fermentum finibus, lacus est facilisis diam, et commodo ligula lacus id enim. Suspendisse imperdiet facilisis quam, ut cursus ex fringilla ut. Cras sodales magna sed ante lobortis, et aliquet ligula mattis. Donec non blandit odio. Maecenas egestas eros sed nisl egestas, quis fermentum elit hendrerit. Morbi ullamcorper, lorem vel bibendum pulvinar, felis est bibendum lorem, in sodales sapien felis in magna. Aliquam interdum eget urna vel dignissim. Etiam et rhoncus dolor. Suspendisse egestas posuere risus, eu mollis ligula tincidunt non.

Code:: <div align="left"><table><td><div id="rotation"><img src="http://image.noelshack.com/fichiers/2015/01/1420296614-fille-fleur-rose-ava.png" style="width: 150px; height: 150px; border: 2px white solid; grey; border-radius: 75px;margin-bottom: -80px;margin-left: 45px; margin-right: 25px;"></div><div style=" position: relative; border-right: 36px solid #494949; border-bottom: 18px solid transparent; border-top:18px solid transparent; margin-right: -5px; margin-left: 15px"></div></td><td><div style="width: 550px; padding: 30px; background-color: #494949; border-right: 3px white solid; border-bottom: 3px white solid; border-radius: 40px; box-shadow: 3px 3px 10px #000000; margin-top: 65px; color: white; text-align: justify;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere ex in massa faucibus varius. In facilisis odio eget porttitor tincidunt. Mauris ullamcorper nisl orci, accumsan dignissim neque congue sed. Sed molestie nunc congue lorem ultrices molestie. Maecenas nec nulla turpis. In id maximus ex. Sed suscipit venenatis nunc ac sagittis. In laoreet magna eget metus posuere cursus. Aenean varius turpis id sollicitudin sodales. Vivamus vulputate turpis tempor magna porttitor, nec fermentum est dapibus.

Integer venenatis volutpat faucibus. Praesent eget magna nec nunc sodales malesuada. Nulla facilisi. Morbi vel mi libero. Fusce commodo, nisl non fermentum finibus, lacus est facilisis diam, et commodo ligula lacus id enim. Suspendisse imperdiet facilisis quam, ut cursus ex fringilla ut. Cras sodales magna sed ante lobortis, et aliquet ligula mattis. Donec non blandit odio. Maecenas egestas eros sed nisl egestas, quis fermentum elit hendrerit. Morbi ullamcorper, lorem vel bibendum pulvinar, felis est bibendum lorem, in sodales sapien felis in magna. Aliquam interdum eget urna vel dignissim. Etiam et rhoncus dolor. Suspendisse egestas posuere risus, eu mollis ligula tincidunt non.

</div></td></table></div>

<div align="right"><table><td><div style="width: 550px; padding: 30px; background-color: #494949; border-left: 3px white solid; border-bottom: 3px white solid; border-radius: 40px; box-shadow: -3px 3px 10px #000000; margin-top: 65px; color: white; text-align: justify;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere ex in massa faucibus varius. In facilisis odio eget porttitor tincidunt. Mauris ullamcorper nisl orci, accumsan dignissim neque congue sed. Sed molestie nunc congue lorem ultrices molestie. Maecenas nec nulla turpis. In id maximus ex. Sed suscipit venenatis nunc ac sagittis. In laoreet magna eget metus posuere cursus. Aenean varius turpis id sollicitudin sodales. Vivamus vulputate turpis tempor magna porttitor, nec fermentum est dapibus.

Integer venenatis volutpat faucibus. Praesent eget magna nec nunc sodales malesuada. Nulla facilisi. Morbi vel mi libero. Fusce commodo, nisl non fermentum finibus, lacus est facilisis diam, et commodo ligula lacus id enim. Suspendisse imperdiet facilisis quam, ut cursus ex fringilla ut. Cras sodales magna sed ante lobortis, et aliquet ligula mattis. Donec non blandit odio. Maecenas egestas eros sed nisl egestas, quis fermentum elit hendrerit. Morbi ullamcorper, lorem vel bibendum pulvinar, felis est bibendum lorem, in sodales sapien felis in magna. Aliquam interdum eget urna vel dignissim. Etiam et rhoncus dolor. Suspendisse egestas posuere risus, eu mollis ligula tincidunt non.

</div></td><td><div style=" position: relative; border-left: 36px solid #494949; border-bottom: 18px solid transparent; border-top:18px solid transparent; margin-right: 15px; margin-left: -10px; margin-top: 130px;"></div><div id="rotation"><img src="http://image.noelshack.com/fichiers/2015/01/1420296614-fille-fleur-rose-ava.png" style="width: 150px; height: 150px; border: 2px white solid; grey; border-radius: 75px;margin-bottom: -80px; margin-left: 25px; margin-right: 45px;"></div></td></table></div>

Merci d'avance pour votre aide, j'en ai vraiment besoin :8onion11:

Comme ça ? :3

Spoiler:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere ex in massa faucibus varius. In facilisis odio eget porttitor tincidunt. Mauris ullamcorper nisl orci, accumsan dignissim neque congue sed. Sed molestie nunc congue lorem ultrices molestie. Maecenas nec nulla turpis. In id maximus ex. Sed suscipit venenatis nunc ac sagittis. In laoreet magna eget metus posuere cursus. Aenean varius turpis id sollicitudin sodales. Vivamus vulputate turpis tempor magna porttitor, nec fermentum est dapibus.

Integer venenatis volutpat faucibus. Praesent eget magna nec nunc sodales malesuada. Nulla facilisi. Morbi vel mi libero. Fusce commodo, nisl non fermentum finibus, lacus est facilisis diam, et commodo ligula lacus id enim. Suspendisse imperdiet facilisis quam, ut cursus ex fringilla ut. Cras sodales magna sed ante lobortis, et aliquet ligula mattis. Donec non blandit odio. Maecenas egestas eros sed nisl egestas, quis fermentum elit hendrerit. Morbi ullamcorper, lorem vel bibendum pulvinar, felis est bibendum lorem, in sodales sapien felis in magna. Aliquam interdum eget urna vel dignissim. Etiam et rhoncus dolor. Suspendisse egestas posuere risus, eu mollis ligula tincidunt non.

Code:: <div align="left"><table><td><div id="rotation"><img src="http://image.noelshack.com/fichiers/2015/01/1420296614-fille-fleur-rose-ava.png" style="width: 150px; height: 150px; border: 2px white solid; grey; border-radius: 75px;margin-bottom: -80px;margin-left: 45px; margin-right: 25px;"></div><div style=" position: relative; border-right: 36px solid #494949; border-bottom: 18px solid transparent; border-top:18px solid transparent; margin-right: -5px; margin-left: 15px"></div></td><td><div style="width: 550px; padding: 30px; background-color: #494949; border-right: 3px white solid; border-bottom: 3px white solid; border-radius: 40px; box-shadow: 3px 3px 10px #000000; margin-top: 65px; color: white; text-align: justify;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere ex in massa faucibus varius. In facilisis odio eget porttitor tincidunt. Mauris ullamcorper nisl orci, accumsan dignissim neque congue sed. Sed molestie nunc congue lorem ultrices molestie. Maecenas nec nulla turpis. In id maximus ex. Sed suscipit venenatis nunc ac sagittis. In laoreet magna eget metus posuere cursus. Aenean varius turpis id sollicitudin sodales. Vivamus vulputate turpis tempor magna porttitor, nec fermentum est dapibus.

Integer venenatis volutpat faucibus. Praesent eget magna nec nunc sodales malesuada. Nulla facilisi. Morbi vel mi libero. Fusce commodo, nisl non fermentum finibus, lacus est facilisis diam, et commodo ligula lacus id enim. Suspendisse imperdiet facilisis quam, ut cursus ex fringilla ut. Cras sodales magna sed ante lobortis, et aliquet ligula mattis. Donec non blandit odio. Maecenas egestas eros sed nisl egestas, quis fermentum elit hendrerit. Morbi ullamcorper, lorem vel bibendum pulvinar, felis est bibendum lorem, in sodales sapien felis in magna. Aliquam interdum eget urna vel dignissim. Etiam et rhoncus dolor. Suspendisse egestas posuere risus, eu mollis ligula tincidunt non.

</div></td></table></div>

<div align="right"><table><td><div style="width: 550px; padding: 30px; background-color: #494949; border-left: 3px white solid; border-bottom: 3px white solid; border-radius: 40px; box-shadow: -3px 3px 10px #000000; margin-top: 65px; color: white; text-align: justify;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere ex in massa faucibus varius. In facilisis odio eget porttitor tincidunt. Mauris ullamcorper nisl orci, accumsan dignissim neque congue sed. Sed molestie nunc congue lorem ultrices molestie. Maecenas nec nulla turpis. In id maximus ex. Sed suscipit venenatis nunc ac sagittis. In laoreet magna eget metus posuere cursus. Aenean varius turpis id sollicitudin sodales. Vivamus vulputate turpis tempor magna porttitor, nec fermentum est dapibus.

Integer venenatis volutpat faucibus. Praesent eget magna nec nunc sodales malesuada. Nulla facilisi. Morbi vel mi libero. Fusce commodo, nisl non fermentum finibus, lacus est facilisis diam, et commodo ligula lacus id enim. Suspendisse imperdiet facilisis quam, ut cursus ex fringilla ut. Cras sodales magna sed ante lobortis, et aliquet ligula mattis. Donec non blandit odio. Maecenas egestas eros sed nisl egestas, quis fermentum elit hendrerit. Morbi ullamcorper, lorem vel bibendum pulvinar, felis est bibendum lorem, in sodales sapien felis in magna. Aliquam interdum eget urna vel dignissim. Etiam et rhoncus dolor. Suspendisse egestas posuere risus, eu mollis ligula tincidunt non.

</div></td><td><div style=" position: relative; border-left: 36px solid #494949; border-bottom: 18px solid transparent; border-top:18px solid transparent; margin-right: 15px; margin-left: -10px; margin-top: 80px;"></div><div id="rotation"><img src="http://image.noelshack.com/fichiers/2015/01/1420296614-fille-fleur-rose-ava.png" style="width: 150px; height: 150px; border: 2px white solid; grey; border-radius: 75px;margin-bottom: -80px; margin-left: 25px; margin-right: 45px; margin-top: -100px;"></div></td></table></div>

Oui parfait ça marche très bien merci beaucoup Emy :D !!

Cependant je suis confrontée à de nouveaux problèmes...
Tout fonctionne parfaitement sous Chrome, que ce soit polices, rotation d'images, etc...
Mais sous IE et firefox, ce n'est pas du tout le même résultat :'(
J'ai l'impression que tout ce qui est <*style type="text/css"> ne veut pas fonctionner
Ce qui me surprend c'est que même le plus simple, les polices, ça veut pas

Pourtant tout est censé être optimisé pour tous les navigateurs, pour la rotation d'image, ou mon header a qui j'ai fait un truc qui apparaît quand on passe la souris dessus, il y a toujours

Code:: -webkit-
-moz-
-o-

Après aussi j'ai fait une lettrine, mais ça passe pas non plus sur les deux navig, pourtant il n'y a pas de propriété particulière ...

Le problème est il in-réglable ?

As-tu des exemples de code qui ne fonctionne que sous chrome ?
Sinon, firefox et ie sont-ils à jour chez toi ?

Mmmh personnellement les images ne tournent pas du tout (et je suis pourtant sous Chrome) :o

Mais tu utilises la propriété à l'aide de "div id" et je ne connais pas le id donc... x) Autrement tu ne peux pas séparer le code du css ? :0 Si tu as l'intention de l'utiliser sur un forum où tu as accès au panneau d'administration, c'est peut-être plus facile avec

Code:: transform: rotate(50deg);

Mushanga --> Eh bien, je pense que au moins IE est à jour, j'ai windows 8 et IE installer par défaut, donc ça doit pas être une trop vieille version. Par contre Firefox je sais pas j'ai pris le pc de ma mère, je l'ai pas installé sur le mien ^^'
Je t'envoie la totalité de mon code par mp, je ne veux pas trop en fait qu'il se retrouve en libre service comme ça c:

Emy -->Normal je n'avais pas mis la totalité du code, juste la partie à problème :3
Je t'avoue qu'en fait j'ai farfouiné un peu partout sur le net pour trouver des trucs qui m'interessaient, donc y'a un peu plein de bout de tuto, d'exemples et tout ce que tu veux mélangés x)
Après pour ce qui est de séparer le html et css en gros ça va revenir au même, j'ai bel et bien utilisé la propriété que tu montres en exemple.
Je t'envoie aussi l'intégralité du code par mp pour les mêmes raisons Wink

Le sujet est clos ?

J'ai envoyé un correctif par mp, je n'ai pas eu de réponse encore

Oui honte à moi, j'en suis désolée, j'ai bien tout vu. Ça marche à la perfection même sur les ordis antiques de mon lycée !
Excuse moi d'avoir oublié de répondre à ton mp, j'ai eu un début de semaine chargé et ça m'était sortit de la tête ^^' !

Il n'y a aucun problème, c'était juste pour savoir si c'était fini Wink

Content que tout marche =D

Je peux donc déplacer ?

Oui c'est bon tu peux Archiver merci ^^ !

Je lock et je déplace.

» Element . ♪
» Une juriste souhaite se convertir au graphisme ..
» Signature élément - Intermédiaire
» Le printemps souhaite devenir une pomme d'automne ! %D
» Supprimer un Élément / décor / Objet / Travailler sur Stock Facilement

« Need help ! Je n'arrive pas à placer un élément comme je le souhaite... »

Need help ! Je n'arrive pas à placer un élément comme je le souhaite...

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Recherche avancée

Page 1 sur 1