28112 sujets

CSS et mise en forme, CSS3

Astuce pour afficher des accords

Voilà j'aimerais afficher des paroles de chanson. Au-dessus de certains mots de ces paroles devront apparaitre la lettre d'un accord de guitare.

ex :
D..................................A.........................Bm
Have you ever felt some kind of emptiness inside ...

J'ai donc eu l'idée de faire ça, un peu à l'arrache :


ever felt some ki<div class="accord">nd<span>A</span></div> of emptiness inside


et 

div.accord { border:0px; line-height:130%; vertical-align:130%; background-color:red; position:relative; display:inline; }
div.accord span { left:0px; top:20px; position:absolute; vertical-align:130%; }


Mais ça me donne l'inverse de l'effet espéré ! Smiley sweatdrop le bout de mot "nd" se retrouve au dessus de l'accord "A"......

Si quelqu'un à une idée.. Merci ! Smiley biggrin
Modifié par Syl (07 Jun 2007 - 17:34)
Hmm... tiens, une colle.
Je dirais qu'en l'absence de support de display: inline-block, il va être difficile de faire quelque chose de correct. On pourrait à la rigueur travailler avec un tableau, mais ça ferait un tableau différent par ligne (une ligne comprenant le texte et les accords).

La solution la plus simple me semble donc être de travailler en texte brut, comme ceci :
<pre>
D.......................A.................Bm
Have you ever felt some kind of emptiness inside?
</pre>

Il faut bien entendu s'assurer que ça sera affiché avec une police de type monospace, par exemple via un : font-style: Courier, monospace;.

Une piste tout de même, avec le positionnement absolu :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<style type="text/css">
		p {
			padding-top: 1.5em;
			background: yellow;
			line-height: 2em;
		}
		p span.accord {
			position: absolute; margin-top: -1em;
			line-height: 1em;
			background: skyblue;
			font-size: bold;
			padding: 2px 3px;
		}

	</style>
</head>

<body>

<p>
	<span class="accord">D</span>
	Have you ever felt some
	<span class="accord">A</span>
	kind of emptiness in-
	<span class="accord">Bm</span>
	side?
</p>

</body>
</html>

C'est sympathique, pas trop méchant niveau accessibilité (peut-être un marquage spécifique pour les accords au cas où les CSS soient désactivés... des croches peut-être ?). Par contre : il faut créer les lignes de texte manuellement, parce que si un paragraphe passe sur deux lignes ça chevauche.
Modifié par Florent V. (07 Jun 2007 - 18:15)
J'avais essayé d'utiliser la balise pre mais le rendu est bien crade avec ces points... je ne sais pas si on peut appliquer un autre style à l'intérieur.
Sinon ta solution en padding me va parfaitement, il n'y a aucun problème si ce n'est que les lignes deviennent alors très espacées. Ce n'est pas très grave.
Par contre je n'ai pas saisi la petite remarque à la fin de ton message. Pour information, je ne sais pas si c'est cela dont il est question, je passe à la ligne <br /> après chaque ligne pour une meilleure lisibilité et le conteneur global est en largeur fixe, donc pas de risque de scission de lignes.

En tous cas merci pour ton aide, ce n'était pas vraiment une colle pour toi. Smiley cligne
Modifié par Syl (07 Jun 2007 - 18:38)
Syl a écrit :
J'avais essayé d'utiliser la balise pre mais le rendu est bien crade avec ces points...

Smiley sweatdrop Ben... mets des espaces à la place des points, tout bêtement...

Syl a écrit :
Par contre je n'ai pas saisi la petite remarque à la fin de ton message.

Il s'agit juste de dire que si on reste au sein du même élément p lors du retour à la ligne (qu'il soit automatique ou provoqué par un <br>), ça donnera un résultat problématique, car l'espace ménagé grâce au padding-top pour l'affichage des accords ne sera présent que pour la première ligne de texte, et pas pour la seconde. Donc chevauchement des accords sur la ligne de texte supérieure.
Je vois le problème, pour l'instant méthode barbare : une paragraphe par ligne, c'est anti-conventionnel mais ça fait la soudure. Pour ce qui est des espaces au lieu des points... grand moment de solitude pour moi Smiley confused (j'en oublie l'intérêt de "pre")
Un test pour achever tout ça : un paragraphe sur plusieurs lignes (avec des <br>). Ici, on ne joue plus sur padding-top, mais sur line-height. Ça marche pas mal. Le seul problème : IE doit mal implémenter le positionnement initial d'un élément positionné en absolu appartenant au flux d'un élément avec line-height élevé... Du coup, c'est pas exploitable.

Pour le fun :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<style type="text/css">
		p {
			background: yellow;
			line-height: 3em;
		}
		p span.accord {
			position: absolute; margin-top: -.5em;
			line-height: 1em;
			background: skyblue;
			font-size: bold;
			padding: 2px 3px;
		}
	</style>
</head>
<body>
<p>
	<span class="accord">A</span>
	Ceci n'est pas une chan-
	<span class="accord">B</span>
	son mais on fera
	<span class="accord">C</span>
	avec.<br />
	<span class="accord">D</span>
	Et voici le deux-
	<span class="accord">E</span>
	ième pied de la
	<span class="accord">F</span>
	farce.<br />
	<span class="accord">G</span>
	Et un trois-
	<span class="accord">H</span>
	ième pour la
	<span class="accord">I</span>
	route.
</p>
</body>
</html>
Ok, j'ai encore appris quelque chose.
Jouer sur line-height ç'était ma première idée, je préfère encore les padding tout compte fait. Merci du dépanage !
Bonjour,

Sémantiquement incorrect Smiley bawling 


<style type="text/css">
p{
margin-top: 25px;
}

a{
position: relative;
color: green;
font-weight: bold;
font-family: verdana;
font-size: 1em;
text-decoration: none;
}

a span{
position: absolute;
color: green;
display: none;
}

a:hover span{
top: -20px;
color: blue;
display: inline;
}

a:hover{
background: none;
}
</style>
</head>
<body>
<p><a href="#">H<span>D</span></a>ave you ever felt some <a href="#">k<span>A</span></a>ind of emptiness <a href="#">i<span>Bm</span></a>nside?</p> 
<p><a href="#">H<span>D</span></a>ave you ever felt some <a href="#">k<span>A</span></a>ind of emptiness <a href="#">i<span>Bm</span></a>nside?</p> 
</body>


Et un petit décalage pour les IE et pas glop pour Opera
Il y a plus "usine à gaz" mais plus portable ... Smiley biggol enfin je crois
Je ne veux pas jouer sur les display, l'affichage doit être tout de suite apparant. Pour les décalages oui j'ai vu c'est un peu embêtant Smiley decu .
Je regarderai ce code plus en détail demain... enfin tout à l'heure quoi Smiley sweatdrop .

note: ce bug ie (cf. background: none) n'est toujours pas résolu avec la version 7 ?
Re,

Sémantiquement plus correct Smiley cligne ,compatible et sans décalage...
Désolé, j'avais mal interpréter le post! 

<style type="text/css">
p{
margin-top: 25px;
}

em{
position: relative;
color: green;
font-weight: bold;
font-family: verdana;
font-size: 1em;
text-decoration: none;
}

span{
position: absolute;
top: -20px;
color: green;
}


</style>
</head>
<body>
<p><em><span>D</span></em>Have you ever felt some <em><span>A</span></em>kind of emptiness <em><span>Bm</span></em>inside?</p> 
<p><em><span>D</span></em>Have you ever felt some <em><span>A</span></em>kind of emptiness <em><span>Bm</span></em>inside?</p> 
</body>
Donc ok ça fonctionne, sauf toujours un gros décalage avec ie6 d'environ 80%... c'est encore plus flagrant que le précédant code. Ce serait le em qui poserait problème de portabilité sur ie ?
Salut,

Chez moi tout est ok (ie6 stand alone), regarde si ie6 n'est pas passé en mode quirck?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


rien avant le doctype, même pas un espace
Le doctype du site est XHTML1.0 transitional. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Site Officiel Fran&ccedil;ais</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Modifié par Syl (08 Jun 2007 - 10:30)
Laurent Denis a écrit :
Juste une remarque en passant: pour ce type d'annotation de texte, XHTML1.1 et l'élément ruby sont vos amis Smiley cligne

C'est intéressant ça, mais même si je retrouve la recommandation W3C du module Ruby, c'est pas évident de trouver de l'information, notamment sur les implémentations par les navigateurs.

J'ai cherché un document d'exemple, mais rien trouvé. J'ai voulu en créer un moi-même, mais je ne sais pas du tout s'il faut déclarer l'utilisation du module Ruby, ou bien s'il suffit d'utiliser le markup <ruby>...</ruby> dans un document XHTML 1.1 « standard ». Smiley sweatdrop
ruby fait partie d'XHTML1.1 et ne nécessite rien de plus que le doctype XHTML1.1

Côté support, ce n'est pas encore tout à fait cela en dehors d'IE. Cependant, une petite astuce CSS à base de display:table permet de retomber sur ses pieds dans FF, Opera etc.

Pour plus d'info, voir dans les pages i18n du W3C (la FAQ en particulier si je me souviens bien)
Avoir besoin de ruby est justement une des raisons majeures justifiant le recours à XHTML1.1.

(Ce n'est pas XHTML1.1 qui est déconseillé - ce serait absurde -. Ce sont les utilisations erronées d'XHTML1.1 quand il n'est pas justifié.)
Sujet clos
Aller à