18041 sujets

Questions générales et questions de débutants

[Résolu] Création d'une case de bande dessinée en CSS

Bonjour bonjour,

cela fait désormais plusieurs mois (années?) que je lis ce forum et me sers des questions/réponses des gens sur ce forum pour avancer dans mes créations. Merci pour tout le bien que vous faites à mon CSS Smiley smile

Toutefois, si je me suis inscrit et passe le pas aujourd'hui en postant ce post, c'est que je n'arrive pas à me défaire d'un inextricable problème..

En effet, je souhaite faire deux trois planches perso de bande dessinée de ce genre (http://www.labandepasdessinee.com oui, en gros, il s'agirait d'une bande pas dessinée) avec des amis entre nous. Comme je n'ai pas de particuliers dons en tablette graphique, et encore moins mes potes, j'aurais souhaité faire ça en pur css, ce qui doit être tout à fait faisable il me semble, d'autant plus que j'ai mis la main ici (http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html) sur un chouette css permettant de faire de jolies bulles..

Malheureusement le monde n'est pas une bande dessinée (dédicasse à Balavoine..) et j'ai des soucis d'intégration des bulles dans mes cases Smiley decu

Voici mon début de html, tout simple, tout bête : 


<body bgcolor="#000">
		<div class="triangle-isosceles">Test hors de la case</div>

<div id="planche">
	<div id="case" class="orange">
		<div class="triangle-isosceles">Test ici dans la case</div>
<div class="triangle-isosceles">Seconde bulle en dessous</div>
	</div>
	<div id="case" class="orange degrade">
	</div>
	<div id="case">
	</div>
</div>


Et voici mon css associé, dont j'ai extrait ce qui m'intéresse et légèrement custom (dans le premier div) selon mes besoins.



#planche {
	display: block;
	width:800px;
	height:300px;
	overflow:hidden;
	border:1px solid black ;
}

#case {
	display:block;
	width: 250px;
	height: 247px;
	overflow: hidden ;
	border:1px solid black;
	float: left;
	margin-top: 25px;
	margin-bottom: 25px;
	margin-left: 10px;
	padding:0;
}

.degrade {
	background: url('degrade1px.png') repeat-x;	
}

.orange {
	background-color: rgb(230,146,47);
}

/* ------------------------------------------------------------------------------------
-- BASIC BUBBLES WITH TRIANGLES ON BOTTOM
------------------------------------------------------------------------------------ */

/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle-isosceles {
	position:relative;
	padding:10px;
	margin:1em 5px 3em;
	color:#000;
	background:#fff; /* default background for browsers without gradient support */
	
	/* css3 */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

}

/* creates triangle */
.triangle-isosceles:after {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	z-index:-1;
	bottom:-10px; /* value = - border-top-width - border-bottom-width */
	left:8px; /* controls horizontal position */
	width:0;
	height:0;
	border-width:5px 5px; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:#fff transparent transparent;
}


Comme vous pourrez facilement le constater, je rencontre deux soucis majeurs : Contrairement à la bulle hors de ma première case, je n'arrive pas à faire apparaître le petit triangle.

Deuxième souci, je suis avec un div, et je n'arrive pas à "adapter" sa taille au texte. Il fait quoi qu'il en soit la largeur de la bulle. J'ai essayé avec des span, mais le rendu est dégueulasse..

Cela doit rester une question triviale pour certains, mais je gère mal ce css que j'ai trouvé sur le net en ne comprends pas en intégralité :s

Merci par avance pour vos lumières.

Cordialement

Guillaume
Modifié par cobalt2760 (25 Apr 2010 - 19:46)
Bonjour,

Pour le problème des triangles, ceux-ci sont en "z-index: -1", il s'affichent donc derrière le "background-color:rgb(230,146,47);" de la classe ".orange". Si tu le met a 0 ou plus, tout ira bien Smiley cligne

Concernant le second problème je n'ai pas très bien compris, peux-tu être plus précis ?
Bonjour mal,

Merci pour ta réponse rapide, qui en effet, fonctionne! Je suis désolé, j'aurai certainement dû me renseigner sur cette propriété que je ne connaissais pas. C'est désormais chose remédiée Smiley smile

Concernant mon second point : mes bulles sont constituées par un div. Or ce div, s'adapte très bien en hauteur, si j'ai plusieurs lignes. Par contre, la largeur de la bulle est fixe : si je prévois une bulle de 200px de large et que j'ai une onomatopée dedans, ça me prends toute la largeur de la case alors que j'aurais souhaité que cela occupe le strict nécessaire autour du texte.

C'est une propriété qui marche bien avec une balise <span>, mais par contre, ça pose trop de soucis dans le cas de bulles à plusieurs lignes..

Ma question est : comment faire, avec un div, pour adapter la taille de la bulle au texte sur l'axe horizontal, et si cela n'est pas possible, comment faire cette même bulle avec une balise <span>?

En même temps, si c'est trop demandé, j'essayerai de me contenter de ta première réponse qui m'a déjà bien aidée Smiley cligne

Merci

Guillaume
Pour faire ça il faut que ton div (élément "block") s'affiche de la même manière qu'un élément inline. La propriété qui te permet de faire ça est "display:inline;". Ajoute cette propriété à ta classe "triangle-isosceles". En revanche il va falloir retravailler le design général.

Je ne suis pas très compétent dans le domaine, peut être que quelqu'un aura une meilleure solution.
Merci une nouvelle fois!

Je me suis renseigné du côté de la propriété inline (qui donne le même rendu sale qu'avec une balise <span> en somme), mais en creusant un peu, j'ai mis la main sur 

display:inline-block;


qui convient tout à fait à mes bulles!

Mon souci est donc réglé, et fort bien!

Merci beaucoup Smiley smile

Guillaume
En effet, c'est la bonne solution Smiley cligne

Après, en fonction de la largeur de ta bulle et de son parent éventuellement, tu devrais peut être utiliser un "max-width" ainsi qu'un "max-height" pour éviter que ça ne prenne de trop grandes dimensions si le texte est un peu chargé.
Salut,

cobalt2760 a écrit :
Mon souci est donc réglé, et fort bien!

Pense alors à indiquer que ce sujet est [Résolu]. Smiley cligne
Modifié par Mikachu (22 Apr 2010 - 09:51)
Sujet clos
Aller à