IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Remplir une "bulle" avec du texte. Quel point de départ?


Sujet :

HTML

  1. #1
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : juin 2004
    Messages : 2 147
    Points : 3 366
    Points
    3 366
    Par défaut Remplir une "bulle" avec du texte. Quel point de départ?
    Bonjour,

    J'aimerais avoir l'avis du forum quant à la faisabilité de ceci.

    j'ai une image (représentant un chacal qui pense...) avec une bulle du style BD.
    Dans cette bulle, j'y ai positionnée une div qui contient donc la pensée du jour.
    J'aimerais que mon texte colle un peu mieux au bord de ma bulle. En gros, j'aimerais simuler une div ellipsoïdale (ou a peu près).

    J'ai la vague intuition que ceci serait possible en javascript.
    J'ai également la vague intuition que l'utilisation d'une police monospace simplifierait le problème.

    J'ai aussi la vague impression d'être dans le vague

    Si quelqun a déjà réussi à faire des block non rectangulaire, quelque soit la forme, ca m'interesse énormément...

    Merci d'avance de m'aider à régler ce problème existentiel
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  2. #2
    Nouveau membre du Club
    Profil pro
    Inscrit en
    juin 2004
    Messages
    68
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2004
    Messages : 68
    Points : 32
    Points
    32
    Par défaut
    ...j'ai peut etre pas compris le Pb, mais pourquoi ne pas avoir ta bulle avec l'intérieur transparent, et placé par dessus ton div de texte? (mais encore une fois, je suis pas sur d'avoir cerné le probleme;...)

  3. #3
    Expert éminent
    Avatar de titoumimi
    Profil pro
    Inscrit en
    décembre 2003
    Messages
    3 707
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : décembre 2003
    Messages : 3 707
    Points : 7 283
    Points
    7 283
    Par défaut
    tu doit pouvoir simuler une forme bizaroide avec des div...

    Dans ton div bulle, tu va placer à chaque ligne deux divs, un en float left, l'autre en float right, afin de restreindre l'espace dispo. Ainsi, ton texte s'adaptera aux contours de ces blocs en float...

    peut être pas idéal, mais une technique comme une autre
    Globalement inoffensif
    Merci de respecter les règles du forum.
    Aucune question technique par MP !
    _______________________________________________________________________
    Cours Ruby et Ruby on Rails (RoR) - Cours PHP - FAQ Ruby / Rails - Livres Ruby / Rails
    Ajax facile avec Ruby on Rails, Prototype, script.aculo.us et les RJS
    Tutoriaux HTML/CSS et PHP

  4. #4
    Expert éminent
    Avatar de titoumimi
    Profil pro
    Inscrit en
    décembre 2003
    Messages
    3 707
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : décembre 2003
    Messages : 3 707
    Points : 7 283
    Points
    7 283
    Par défaut
    Petit exemple :
    HTML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    	<div id="bulle">
    		<div class="ligne_1_3_gauche"></div>
    		<div class="ligne_1_3_droite"></div>
    		<div class="ligne_2_gauche"></div>
    		<div class="ligne_2_droite"></div>
    		<div class="ligne_1_3_gauche"></div>
    		<div class="ligne_1_3_droite"></div>
    		Bonjour tout le monde, ça va, la forme ? Top !!! Cool.
    	</div>
    CSS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    #bulle {
    	background-color:#00CCFF;
    	text-align:center;
    	width:150px;
    	height:120px;
    	}
    .ligne_1_3_gauche {
    	clear:both;
    	background-color:#FF6666;
    	width:50px;
    	height:40px;
    	float:left;
    	}
    .ligne_1_3_droite {
    	background-color:#FF6666;
    	width:50px;
    	height:40px;
    	float:right;
    	}
    .ligne_2_gauche {
    	clear:both;
    	background-color:#99CC33;
    	width:30px;
    	height:40px;
    	float:left;
    	}
    .ligne_2_droite {
    	background-color:#99CC33;
    	width:30px;
    	height:40px;
    	float:right;
    	}
    C'est super lourd (et encore, y'a que 3 'niveaux'), mais ça me semble correspondre à ta demande
    Globalement inoffensif
    Merci de respecter les règles du forum.
    Aucune question technique par MP !
    _______________________________________________________________________
    Cours Ruby et Ruby on Rails (RoR) - Cours PHP - FAQ Ruby / Rails - Livres Ruby / Rails
    Ajax facile avec Ruby on Rails, Prototype, script.aculo.us et les RJS
    Tutoriaux HTML/CSS et PHP

  5. #5
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : juin 2004
    Messages : 2 147
    Points : 3 366
    Points
    3 366
    Par défaut
    Citation Envoyé par titoumimi
    tu doit pouvoir simuler une forme bizaroide avec des div...

    Dans ton div bulle, tu va placer à chaque ligne deux divs, un en float left, l'autre en float right, afin de restreindre l'espace dispo. Ainsi, ton texte s'adaptera aux contours de ces blocs en float...

    peut être pas idéal, mais une technique comme une autre
    ah ben ca je trouve que c'est une bonne idée... c'est beaucoup moins tordu que tout ce à quoi j'avais pensé...
    je crois que ce sera plus simple de positionner mes div en absolu puisque la div de la pensée est déjà en absolu...
    je suis bien content d'avoir posté ici avant d'essayer le forum javascript....

    pour lieto:
    por l'instant, j'ai fait comme tu as dit mais le problème est que l'alignement du texte est vertical et que je cherche à plutot à faire ceci:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
         | bla bla bla |
      | bla bla bla bla |
         | bla bla bla |
    et que j'ai cela

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
         | bla bla bla |
      |    bla bla bla    |
         | bla bla bla |
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  6. #6
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : juin 2004
    Messages : 2 147
    Points : 3 366
    Points
    3 366
    Par défaut
    et en plus, maintenant il y a un code!!!

    franchement merci.

    je vais faire avec ca mais je pense que ca ira très bien vu que mon nombre de ligne est fixe.
    Dans ce cas la lourdeur ne me dérange vraiment pas. C'est vraiment pour faire un truc qui sert pas à grand chose ...
    bon avec un peu de chance, je clique résolu dans 15 minutes
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  7. #7
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : juin 2004
    Messages : 2 147
    Points : 3 366
    Points
    3 366
    Par défaut
    manifestement, il y a unn souci avec le clear: both;

    ca ne passe correctement que sous IE...

    sur les autres navigateurs, ca me donne un résultat que je trouve normal:
    un block de "masque" par ligne...

    bon je continue à chercher car je pense ne pas être loin mais si quelqun à une idée, ne vous gênez surtout pas
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  8. #8
    Expert éminent
    Avatar de titoumimi
    Profil pro
    Inscrit en
    décembre 2003
    Messages
    3 707
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations forums :
    Inscription : décembre 2003
    Messages : 3 707
    Points : 7 283
    Points
    7 283
    Par défaut
    Citation Envoyé par MasterOfChakhaL
    ca ne passe correctement que sous IE...
    étrange ça ... J'avait testé sous FF, ça passe niquel pile poil, je viens de tester sous IE, ça me fait un gros pâté :p
    Globalement inoffensif
    Merci de respecter les règles du forum.
    Aucune question technique par MP !
    _______________________________________________________________________
    Cours Ruby et Ruby on Rails (RoR) - Cours PHP - FAQ Ruby / Rails - Livres Ruby / Rails
    Ajax facile avec Ruby on Rails, Prototype, script.aculo.us et les RJS
    Tutoriaux HTML/CSS et PHP

  9. #9
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : juin 2004
    Messages : 2 147
    Points : 3 366
    Points
    3 366
    Par défaut
    oui effectivement, j'ai dit une bêtise car je n'avais bien vu ton code

    j'avais mis clear both sur tous les éléments...

    toi, tu ne le mets que sur les éléments qui masquent à gauche et je ne comprends pas bien pourquoi pour l'instant...

    pour ceux qui veulent bien y réfléchir, je mets ce que j'ai déjà:

    HTML:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     
    	<div id="pensee" >
    		<!-- masque de la bulle-->
    		<b class="m1 gauche"></b>
    		<b class="m1 droite"></b>
    		<b class="m2 gauche"></b>
    		<b class="m2 droite"></b>
    		<b class="m3 gauche"></b>
    		<b class="m3 droite"></b>
    		<b class="m4 gauche"></b>
    		<b class="m4 droite"></b>
    		<b class="m4 gauche"></b>
    		<b class="m4 droite"></b>
    		<b class="m3 gauche"></b>
    		<b class="m3 droite"></b>
    		<b class="m2 gauche"></b>
    		<b class="m2 droite"></b>
    		<b class="m1 gauche"></b>
    		<b class="m1 droite"></b>
    A la pêche au mouleumouleu moule, je ne veux plus y aller maman...
    C'est malin, je l'ai dans la tête maintenant... 
    	</div>
    et le CSS:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
     
    #pensee {
    	position:absolute;
    	top:25px;
    	left:25px;
    	width:397px;
    	height:200px;
    	overflow: hidden;
    	color: #000;
    	line-height: 25px;
    	font-size: 20px;
    	font-family: monospace;
    	font-weight: bold;
    }
    b.m1, b.m2, b.m3, b.m4 {
    	display: block;
    	height: 25px;
    }
    b.gauche { float: left; clear: both; background-color: green; }
    b.droite { float: right; background-color: red; }
     
    b.m1 { width: 144px; }
    b.m2 { width: 60px; }
    b.m3 { width: 25px; }
    b.m4 { width: 7px; }
    avec clear: both sur gauche et droite ca passe sous IE...

    EDIT: en mettant des <b ...>&nbsp;</b> ca passe nickel sous opera et FF mais plus sous IE (le masque gauche est bon, le droit fait un pâté), de plus, si dans "ma pensée" j'ai une balise html, IE n'affiche plus le texte de la pensée...
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  10. #10
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : juin 2004
    Messages : 2 147
    Points : 3 366
    Points
    3 366
    Par défaut
    bon, ben voilà en mettant cela:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    b.gauche { float: left; clear: both; }
    b.droite { float: right; clear: right; }
    ca marche sur les trois browsers que j'ai sous la main (FF, IE et Opéra)

    la remarque disant que les balises html dans la pensée pose problème avec IE était finalement incorrecte...
    le phénomène ne se produit que pour les phrases commençant par "J'aimerais"
    c'est le seul point commun aux phrases qui ne foncionnent pas...
    Dans ce cas, le texte ne s'affiche pas et le masque est correcte sur les 6 premières lignes et n'apparaît pas pour les lignes 7 et 8...

    Donc je passe le sujet à résolu.
    Merci beaucoup titoumimi pour ton aide

    si quelqun à une idée sur le pourquoi des phrases qui buggent sous IE, je suis preneur

    EDIT: et bien en rajoutant '&nbsp; ' devant, ca marche (un espace insécable ET un espac sécable). Décidemment, je ne comprends pas tout...
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [MySQL] remplir une liste à partir d'un champs texte
    Par myinformatique dans le forum PHP & Base de données
    Réponses: 5
    Dernier message: 27/07/2007, 18h10
  2. Remplir une liste à partir d'un fichier texte
    Par leroidje dans le forum Langage
    Réponses: 1
    Dernier message: 01/07/2007, 09h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo