Mise en forme des tags

Bonjour,
J'ai créé une feuille de style pour gérer mes tags. Sur mes tests, tout se passait bien, mais maintenant que c'est intégrer dans spip, et que la taille est gérer par les occurrences. Mes tags sont coupés, j'avais mis un hidden pour empecher qu'ils ne sortent du bloc, mais la j'aimerais qu'ils aillent à la ligne.

Voici mon fichier css :

.cloud {
	background:url(../images/block-bg-small-2.gif) repeat-y 1px 0;
	float:left;
	margin:9px 0 0;
	width:167px;
}
.cloud .box-bottom-bg {
	padding:0 0 10px;
}
.cloud h2 {
	font:bold 32px/25px "Times New Roman", Times, serif;
	letter-spacing:-2px;
	margin:0;
	padding:5px 0 12px 5px;
	text-transform:uppercase;
}
.cloud h2 span {
	color:#840909;
	font-size:20px;
	line-height:10px;
}
.cloud ul {
	font:11px Arial, sans-serif;
	line-height:14px;
	margin:0;
	padding:0 4px 0 8px;
}
.cloud ul li {
	display:inline;
}
.cloud ul li.font-size-11 {
	font-size:11px;
}
.cloud ul li.font-size-13 {
	font-size:13px;
}
.cloud ul li.font-size-15 {
	font-size:15px;
}
.cloud ul li.font-size-17 {
	font-size:17px;
}

et mon code html :

	<div class="box cloud">
				<div class="box-top-bg">
					<div class="box-bottom-bg">
						<h2>Naviguer<br><span>par mots clefs</span></h2>
						    <ul>
						    <li>
                                                
                                                <a href="http://www.stop-francafrique.com/spip/spip.php?mot203"><font size="1">Corruption</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot118"><font size="5">Criminalité&nbsp;financière</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot176"><font size="1">Géopolitique</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot120"><font size="3">Critique&nbsp;des&nbsp;médias</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot198"><font size="1">Colonialisme</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot215"><font size="1">Iran</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot222"><font size="4">Histoire</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot190"><font size="1">Radio&nbsp;France</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot217"><font size="1">Cerveau</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot156"><font size="2">Vie&nbsp;culturelle</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot123"><font size="3">Françafrique</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot208"><font size="1">The&nbsp;New&nbsp;Yorker</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot200"><font size="1">Illustration</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot210"><font size="1">Prison</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot211"><font size="1">TCC</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot219"><font size="1">Erotisme</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot205"><font size="1">Autisme</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot220"><font size="1">Guerres&nbsp;coloniales</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot178"><font size="0">Textes&nbsp;de&nbsp;scène</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot122"><font size="1">Enquêtes</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot172"><font size="1">Amour</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot221"><font size="1">Paris</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot185"><font size="1">Pour&nbsp;ATD-Quart-Monde</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot216"><font size="1">Cognitivisme</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot166"><font size="1">Nucléaire</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot218"><font size="1">Anxiété</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot199"><font size="1">Génocide</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot209"><font size="1">Paradis&nbsp;fiscaux</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot214"><font size="1">USA</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot187"><font size="4">Nostalgies</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot213"><font size="1">Rwanda</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot168"><font size="1">Ecole</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot157"><font size="1">Face&nbsp;à&nbsp;la&nbsp;maladie</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot171"><font size="3">Justice</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot224"><font size="1">Méditation</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot212"><font size="1">Clearstream</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot182"><font size="1">Cinéma</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot177"><font size="1">Indochine</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot202"><font size="1">Agenda</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot196"><font size="2">Enfance</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot179"><font size="1">Sciences</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot119"><font size="4">Psychologie</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot181"><font size="2">Guerres&nbsp;mondiales</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot223"><font size="1">Famille</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot204"><font size="1">Dépression</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot201"><font size="1">Ecole</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot197"><font size="2">Humour</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot173"><font size="1">Guerre&nbsp;froide</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot207"><font size="1">Théâtre</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot240"><font size="1">Voyage</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot206"><font size="1">ATD-Quart&nbsp;Monde</font></a> &nbsp; 
<a href="http://www.stop-francafrique.com/spip/spip.php?mot189"><font size="1">Radio&nbsp;France</font></a> &nbsp; 
                                                 </li>
					</ul></div>
				</div>
			</div>
			

Re,

Essaye d'intégrer
white-space: nowrap;
Pour forcer le passage à la ligne
Modifié par ghost (11 Mar 2008 - 18:04)

Du coup, il n'affiche pas le reste des tags, il stoppe des le premier mot à mettre à la ligne. Je l'ai peut etre mal place?

.cloud ul {
	font:11px Arial, sans-serif;
	line-height:14px;
	margin:0;
	padding:0 4px 0 8px;
	white-space: nowrap;
}

Re,

Je le verrais mieux sur les <li>

Non, ca ne marche pas non plus... flut...

.cloud ul li {
	display:inline;
	white-space: nowrap;
}

Re,

Désolé, autant pour moi white-space: nowrap;
va à l'inverse de ce que tu cherches, j'ai du trop forcé sur l'apéro

Oui, j'ai essaye toutes les combinaisons, et ca ne marche pas...argg...
bonne apero qd meme...

Re,

En regardant plus en détail ton code, je ne le sens pas trop, l'utilisation de ta liste est curieuse et tes class font-size-x ne te servent à rien !! Curieux.
De cette manière tu n'y arriveras pas je crois.

Une piste:

<ul>
<li><a href="#" class="font-size-15">test</a></li>
<li><a href="#" class="font-size-17">Criminalité financière</a></li>
<li><a href="#" class="font-size-11">Géopolitique</a></li>  
<li><a href="#" class="font-size-13">Critique des médias</a></li>  
<li><a href="#" class="font-size-11">Colonialisme</a></li>  
<li><a href="#" class="font-size-11">Iran</a></li>  
<li><a href="#" class="font-size-15">Histoire</a></li>  
<li><a href="#" class="font-size-11">Radio France</a></li>  
<li><a href="#" class="font-size-17">Cerveau</a></li>  
<li><a href="#" class="font-size-12">Vie culturelle</a></li>  
<li><a href="#" class="font-size-13">Françafrique</a></li>  
<li><a href="#" class="font-size-11">The New Yorker</a></li>  
<li><a href="#" class="font-size-13">Illustration</a></li>  
<li><a href="#" class="font-size-11">Prison</a></li>  
<li><a href="#" class="font-size-11">TCC</a></li>  
<li><a href="#" class="font-size-15">Erotisme</a></li>  
<li><a href="#" class="font-size-11">Autisme</a></li>  
<li><a href="#" class="font-size-11">Guerres coloniales</a></li>  
<li><a href="#" class="font-size-10">Textes de scène</a></li>  
<li><a href="#" class="font-size-11">Enquêtes</a></li>  
<li><a href="#" class="font-size-11">Amour</a></li>  
<li><a href="#" class="font-size-15">Paris</a></li>  
<li><a href="#" class="font-size-11">Pour ATD-Quart-Monde</a></li>  
<li><a href="#" class="font-size-17">Cognitivisme</a></li>  
<li><a href="#" class="font-size-11">Nucléaire</a></li>  
<li><a href="#" class="font-size-11">Anxiété</a></li>   
<li><a href="#" class="font-size-15">USA</a></li>  
<li><a href="#" class="font-size-14">Nostalgies</a></li>  
<li><a href="#" class="font-size-11">Rwanda</a></li>  
<li><a href="#" class="font-size-11">Ecole</a></li>  
</ul>

ul {
width:167px;
font:11px Arial, sans-serif;
border: 1px solid blue;
line-height:14px;
overflow: auto;
margin:0;
list-style-type: none;
padding:0 4px 0 8px;

}

li {
display: inline;
margin-right: 5px;
}

li  a{
text-decoration: none;
color: #000;
}

.font-size-11 {
font-size:11px;
}

.font-size-13 {
font-size:13px;
}

.font-size-15 {
font-size:15px;
}

.font-size-17 {
font-size:27px;
line-height: 27px;
}

A voir si ça gaze avec ton php? (spip?) pour que tu puisses y retrouver tes petits

Ca me fait une barre de navigation sur firefox..bizarre
check sur cette page :
http://stacy.hotlick.free.fr/LesArenes/agenda.html

Rappel : l'entité nbsp signifie Non-breaking space, espace insécable.
Chaque tag comptant plusieurs mots ne sera pas coupé, exactement comme white-space:nowrap.
Enlève les nbsp des tag pour résoudre le problème.

Ah super, ca m'a effectivement enlever ma barre, mais j'ai tjrs mes mots coupés .. ??!!
http://stacy.hotlick.free.fr/LesArenes/agenda.html

je ne comprends pas

makasayo a écrit :
je ne comprends pas

Virer sans autre forme de procès le width de l'élément ul. Tu demandes à cet élément de prendre une largeur supérieure à celle de son conteneur, et ce conteneur est en overflow:hidden. Et donc, en conséquence:
- le ul déborde;
- la partie qui déborde est masquée.

Salut,

Normal, ton code html n'est pas bon pour ce genre d'usage
une liste avec un seul <li> contenant tous tes liens, à quoi sert elle?
Tant qu'à faire utilise un <p>! Et de cette manière ça ne fonctionnera jamais.
De plus tes class pour différentier tes tailles de caractères ne sont pas utilisées, tu utilises <font size x></font> qui n'est de plus pas compatible avec ton doctype (Bah ça encore).
Je pense qu'il y a une profonde mistake au niveau de ton html.

Bonne continuation

Oui, mais je suis partie du code de mon développeur spip... donc pas trop de choix... je vais voir si c'est possible de faire autrement. Merci

.cloud ul li a{white-space:nowrap}

Ça marche mais je comprends plus où était le problème, on revient pas au point de départ ?!

j'ai de nouveau un ascenseur en bas de mon nuage de mots


le html spip :

<div class="box cloud">
				<div class="box-top-bg">
					<div class="box-bottom-bg">
						<h2>Naviguer<br><span>par mots clefs</span></h2>

						    <ul>
						    <li>
                                                
                                                <a href='spip.php?mot157'><font size=1>Epreuves&nbsp;de&nbsp;la&nbsp;vie</font></a>  
<a href='spip.php?mot120'><font size=3>Critique&nbsp;des&nbsp;médias</font></a>  
<a href='spip.php?mot200'><font size=1>Illustration</font></a>  
<a href='spip.php?mot119'><font size=4>Psychologie</font></a>  

<a href='spip.php?mot173'><font size=1>Guerre&nbsp;froide</font></a>  
<a href='spip.php?mot207'><font size=1>Théâtre</font></a>  
<a href='spip.php?mot177'><font size=1>Indochine</font></a>  
<a href='spip.php?mot206'><font size=1>ATD-Quart&nbsp;Monde</font></a>  
<a href='spip.php?mot122'><font size=1>Enquêtes</font></a>  
<a href='spip.php?mot205'><font size=1>Autisme</font></a>  
<a href='spip.php?mot189'><font size=1>Radio&nbsp;France</font></a>  

<a href='spip.php?mot172'><font size=1>Amour</font></a>  
<a href='spip.php?mot181'><font size=2>Guerres&nbsp;mondiales</font></a>  
<a href='spip.php?mot210'><font size=1>Prison</font></a>  
<a href='spip.php?mot224'><font size=1>Méditation</font></a>  
<a href='spip.php?mot209'><font size=1>Paradis&nbsp;fiscaux</font></a>  
<a href='spip.php?mot221'><font size=1>Paris</font></a>  
<a href='spip.php?mot220'><font size=1>Guerres&nbsp;coloniales</font></a>  

<a href='spip.php?mot241'><font size=1>EMDR</font></a>  
<a href='spip.php?mot212'><font size=1>Clearstream</font></a>  
<a href='spip.php?mot218'><font size=1>Anxiété</font></a>  
<a href='spip.php?mot178'><font size=1>Textes&nbsp;de&nbsp;scène</font></a>  
<a href='spip.php?mot242'><font size=1>Psychanalyse</font></a>  
<a href='spip.php?mot222'><font size=3>Histoire</font></a>  
<a href='spip.php?mot217'><font size=1>Cerveau</font></a>  
<a href='spip.php?mot198'><font size=1>Colonialisme</font></a>  

<a href='spip.php?mot171'><font size=2>Justice</font></a>  
<a href='spip.php?mot185'><font size=1>Pour&nbsp;ATD-Quart-Monde</font></a>  
<a href='spip.php?mot156'><font size=3>Histoire&nbsp;culturelle</font></a>  
<a href='spip.php?mot168'><font size=1>Ecole</font></a>  
<a href='spip.php?mot176'><font size=1>Géopolitique</font></a>  
<a href='spip.php?mot196'><font size=2>Enfance</font></a>  
<a href='spip.php?mot213'><font size=1>Rwanda</font></a>  
<a href='spip.php?mot240'><font size=1>Voyage</font></a>  

<a href='spip.php?mot223'><font size=1>Famille</font></a>  
<a href='spip.php?mot203'><font size=1>Corruption</font></a>  
<a href='spip.php?mot199'><font size=1>Génocide</font></a>  
<a href='spip.php?mot179'><font size=1>Sciences</font></a>  
<a href='spip.php?mot187'><font size=3>Nostalgies</font></a>  
<a href='spip.php?mot197'><font size=2>Humour</font></a>  
<a href='spip.php?mot182'><font size=1>Cinéma</font></a>  
<a href='spip.php?mot123'><font size=2>Françafrique</font></a>  
<a href='spip.php?mot204'><font size=1>Dépression</font></a>  

<a href='spip.php?mot166'><font size=1>Nucléaire</font></a>  
<a href='spip.php?mot215'><font size=1>Iran</font></a>  
<a href='spip.php?mot214'><font size=1>USA</font></a>  
<a href='spip.php?mot211'><font size=1>TCC</font></a>  
<a href='spip.php?mot118'><font size=4>Criminalité&nbsp;financière&nbsp;internationale</font></a>  
<a href='spip.php?mot201'><font size=1>Ecole</font></a>  
<a href='spip.php?mot219'><font size=1>Erotisme</font></a>  
<a href='spip.php?mot208'><font size=1>The&nbsp;New&nbsp;Yorker</font></a>  
                                                 </li>

					</div>

le css :

.cloud {
background:url(../squelettes/images/block-bg-small-2.gif) repeat-y 1px 0;
float:left;
margin:9px 0 0;
width:167px;
}
.cloud .box-bottom-bg {
padding:0 0 10px;
}
.cloud h2 {
font:bold 32px/25px "Times New Roman", Times, serif;
letter-spacing:-2px;
margin:0;
padding:5px 0 12px 5px;
text-transform:uppercase;
}
.cloud h2 span {
color:#840909;
font-size:20px;
line-height:10px;
}
.cloud ul {
font:11px Arial, sans-serif;
line-height:14px;
overflow: auto;
margin:0;
list-style-type: none;
padding:0 4px 0 8px;
}
.cloud ul li {
display: inline;
margin-right: 5px;
}

.cloud ul li a{
text-decoration: none;
color: #000;
}

.cloud ul li.font-size-11 {
font-size:11px;
}
.cloud ul li.font-size-13 {
font-size:13px;
}
.cloud ul li.font-size-15 {
font-size:15px;
}
.cloud ul li.font-size-17 {
font-size:27px;
line-height: 27px;
}

.cloud font-size-11 {
font-size:11px;
}
.cloud font-size-13 {
font-size:13px;
}
.cloud font-size-15 {
font-size:15px;
}
.cloud font-size-17 {
font-size:27px;
line-height: 27px;
}