Piwigo.org

nenex · 2009-08-20 16:01:28

slt
Dans yoga/local-layout.css j'ai fait mon propre CSS pour mettre en forme les descriptions. J'ai fait un essai mais je me rend compte que les lignes avec la balise <p></p> sont tres espace . Meme avec la balise <br> il y a un petit espace (moins genant).
Je vois pas d'ou ca peu venir.
Merci pour votre aide.

Lien vers l'image test.

Code HTML pour la description de l'image de test :

<p><span class="titre">Behorlegi (<span class="lieu">Behorleguy</span>) - <span class="hauteur">1265m</span></span><br>
~ <span class="province">Province de la Navarre du Nord (Basse Navarre)</span> ~</p>

<p> (<span class="date">Juin 1998</span>) </p>

<p><a href="http://www.nenex-argazkia.com/google-maps/behorlegi.htm" target="_blank" class="google-maps-I">Situer avec Google Maps</a><br>(<span class="google-maps-II">s'ouvrira dans une nouvelle fenêtre</span>)</p>

Le CSS :

.titre {
font-weight:bold;
}

.date {
font-style:italic;
line-height:1px;
}

.google-maps-I {
text-decoration:underline;
color:#0000FF;
}

Dernière modification par nenex (2009-08-22 16:14:25)

nenex · 2009-08-29 15:57:25

J'ai essayer avec un tableau et c'est pas mieux.

Gotcha · 2009-08-29 17:40:47

As-tu modifier d'autres fichiers du genre "picture.tpl" ?

nenex · 2009-08-29 18:08:34

non aucun fichier.

Gotcha · 2009-08-29 19:40:25

Code:

<p><span class="titre"> Behorlegi ( <span class="lieu">Behorleguy</span> ) - <span class="hauteur">1265m</span></span><br />
~ <span class="province">Province de la Navarre du Nord (Basse Navarre)</span> ~</p>
<p>( <span class="date">Juin 1998</span> )</p>
<p><a href="http://www.nenex-argazkia.com/google-maps/behorlegi.htm" target="_blank" class="google-maps-I">Situer avec Google Maps</a> <br />
( <span class="google-maps-II">s'ouvrira dans une nouvelle fen&ecirc;tre</span> )</p>

Regardes ce que ça donne chez toi.

nenex · 2009-08-29 19:43:20

c'est pareil.

Gotcha · 2009-08-29 19:48:36

AS-tu essayé de ne pas passer par une feuille de style ?

VDigital · 2009-08-29 19:49:58

Code:

<br/><span class="titre"> Behorlegi ( <span class="lieu">Behorleguy</span> ) - <span class="hauteur">1265m</span></span><br/>
~ <span class="province">Province de la Navarre du Nord (Basse Navarre)</span><br/>( <span class="date">Juin 1998</span> )<br/><a href="http://www.nenex-argazkia.com/google-maps/behorlegi.htm" target="_blank" class="google-maps-I">Situer avec Google Maps</a> <br/>
( <span class="google-maps-II">s'ouvrira dans une nouvelle fenêtre</span> )

nenex · 2009-08-29 20:00:05

Gotcha a écrit:
AS-tu essayé de ne pas passer par une feuille de style ?

directement dans le code HTML ?

VDigital a écrit:

Code:

<br/><span class="titre"> Behorlegi ( <span class="lieu">Behorleguy</span> ) - <span class="hauteur">1265m</span></span><br/>
~ <span class="province">Province de la Navarre du Nord (Basse Navarre)</span><br/>( <span class="date">Juin 1998</span> )<br/><a href="http://www.nenex-argazkia.com/google-maps/behorlegi.htm" target="_blank" class="google-maps-I">Situer avec Google Maps</a> <br/>
( <span class="google-maps-II">s'ouvrira dans une nouvelle fenêtre</span> )

En mettant la balise <br/> avant et apres la ligne ca marche. J'aurais jamais pense a essayer ca. En plus en allant voir a quoi correspondait cette balise (mes balises <br> n'ont pas le / ) je me suis rendu compte qu'elles ne sont pas compatible avec le XHTML.
Merci VDigital. Merci aussi a toi Gotcha d'avoir essayer de m'aider :)

ddtddt · 2009-08-29 20:48:36

en CSS la balise <p> crée des § avec espace avant et après je te conseils de remplacer tes <p> par des <div> et de régler l'espace que tu souhaites

nenex · 2009-08-29 21:34:54

Donc mon code HTML ressemblerait a ca :

<div class="ligne-titre"><span class="titre"> Behorlegi ( <span class="lieu">Behorleguy</span> )</span></div>

<div class="ligne-hauteur">-<span class="hauteur">1265m</span>-</div>

<div class="ligne-province">~ <span class="province">Province de la Navarre du Nord (Basse Navarre)</span></div>

<div class="ligne-date">( <span class="date">Juin 1998</span> )</div>

<div class="ligne-google"><a href="http://www.nenex-argazkia.com/google-maps/behorlegi.htm" target="_blank" class="google-maps-I">Situer avec Google Maps</a></div>

<div class="ligne-nouvelle-fenetre">( <span class="google-maps-II">s'ouvrira dans une nouvelle fenêtre</span> )</div>

Mais la balise <br/> je la garde quand meme, puisque je peux regler mes espacements de ligne en CSS ?

ddtddt · 2009-08-29 22:03:17

nenex a écrit:
Mais la balise <br/> je la garde quand meme, puisque je peux regler mes espacements de ligne en CSS ?

Moi je ne la garderais pas mais tu peux en mettre quand même

Tout dépend de ce que tu veux faire l'intérêt du css et de pouvoir modifier l'espace sur tout un site en une seule fois

si tu as des <br> partout cela peux être plus long

nenex · 2009-08-29 22:08:51

C'est bien se qu'il me semblais. Donc mon code HTML devrait ressembler a ca :

Code:

<div class="ligne-titre"><span class="titre"> Behorlegi ( <span class="lieu">Behorleguy</span> )</span></div>

<div class="ligne-hauteur">-<span class="altitude">1265m</span>-</div>

<div class="ligne-province">~ <span class="province">Province de la Navarre du Nord (Basse Navarre)</span></div>

<div class="ligne-date">( <span class="date">Juin 1998</span> )</div>

<div class="ligne-google-maps-I"><a href="http://www.nenex-argazkia.com/google-maps/behorlegi.htm" target="_blank" class="google-maps-I">Situer avec Google Maps</a></div>

<div class="ligne-google-maps-II">( <span class="google-maps-II">s'ouvrira dans une nouvelle fenêtre</span> )</div>

Mon code CSS pour les espaces entre les lignes :

Code:

.ligne-titre {line-height:1px;}

.ligne-altitude {line-height:1px;}

.ligne-province {line-height:1px;}

.ligne-date {line-height:1px;}

.ligne-google-maps-I {line-height:1px;}

.ligne-google-maps-II {line-height:1px;}

(Les valeurs pour les hauteur de ligne sont pas encore definit)

Piwigo.org

Annonce

#1 2009-08-20 16:01:28

Description en CSS : modifier l'interligne

#2 2009-08-29 15:57:25

Re: Description en CSS : modifier l'interligne

#3 2009-08-29 17:40:47

Re: Description en CSS : modifier l'interligne

#4 2009-08-29 18:08:34

Re: Description en CSS : modifier l'interligne

#5 2009-08-29 19:40:25

Re: Description en CSS : modifier l'interligne

Code:

#6 2009-08-29 19:43:20

Re: Description en CSS : modifier l'interligne

#7 2009-08-29 19:48:36

Re: Description en CSS : modifier l'interligne

#8 2009-08-29 19:49:58

Re: Description en CSS : modifier l'interligne

Code:

#9 2009-08-29 20:00:05

Re: Description en CSS : modifier l'interligne

Gotcha a écrit:

VDigital a écrit:

Code:

#10 2009-08-29 20:48:36

Re: Description en CSS : modifier l'interligne

#11 2009-08-29 21:34:54

Re: Description en CSS : modifier l'interligne

#12 2009-08-29 22:03:17

Re: Description en CSS : modifier l'interligne

nenex a écrit:

#13 2009-08-29 22:08:51

Re: Description en CSS : modifier l'interligne

Code:

Code:

Pied de page des forums