Discussion :

[mimimoni]

Bonjour,

Dans ma page html, je dispose d'une liste. J'ai fait en sorte qu'elle tienne sur une ligne. Mon problème est maintenant de personnaliser la taille de l'espace entre chacun des mots de cette liste. Par exemple :

"cahier" "montre" "stylo à bille" "trousse"

Si j'utilise la propriété word-spacing, je peux personnaliser cet espace, le problème c'est que cet espace s'applique également aux différents mots du terme "stylo à bille"...

Connaîtriez-vous une solution ?

[Bisûnûrs]

On aimerait d'abord avoir un peu de code à nous mettre sous la dent !

[mimimoni]

Il suffit de demander !


Html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul id="listebox1">
                    <li><a href="http://twitter.com/about">À propos</a></li>
          			<li><a href="http://twitter.com/about/contact">Contact</a></li>
          			<li><a href="http://blog.fr.twitter.com">Blog</a></li>
          			<li><a href="http://status.twitter.com">État du service</a></li>
                    <li><a href="http://twitter.com/goodies">Goodies</a></li>
                    <li><a href="http://dev.twitter.com/">API</a></li>
					<li><a href="http://business.twitter.com/twitter101">Entreprises</a></li>
                    <li><a href="http://support.twitter.com">Aide</a></li>
          			<li><a href="http://twitter.com/jobs">Emploi</a></li>
          			<li><a href="http://twitter.com/tos">Conditions</a></li>
          			<li><a href="http://twitter.com/privacy">Confidentialité</a></li>   
       			 </ul>

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
 
#listebox1{
	margin:0 auto;
	padding-left:80px;
	overflow:hidden;
	font-size:11px;
	font-family:"Helvetica Neue",Arial,Sans-serif;
	width:650px;
	height:47px;
	/*word-spacing:7px;*/
}

Qu'en penses-tu?

[Bisûnûrs]

Et le code CSS des "li" ?

[mimimoni]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#listebox1 li {
	display:inline;
}

voila !

[Bisûnûrs]

Dans ce cas là n'utilise pas le word-spacing mais les padding left et right sur les "li".

[mimimoni]

nikel !! merci merci !!

[mimimoni]

Dis-moi, es-ce que je peux te demander un dernier truc pour ma page html ? Après elle devrait être finie. ça concerne le pied de page.

J'ai réussi à réaliser le pied de page à un détail prêt. Il occupe bien toute la largeur de ma page et il est placé en bas sans espace entre lui et la fin de ma page. Le seul problème qui reste c'est sa hauteur. Il doit faire 47px de height, mais si je le spécifie dans le CSS, un espace blanc se créé entre le pied de page et la fin de ma page.


Css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#piedepage {
	position:absolute;
	background-color: #eeeeee;
	background-image: url(../images/bg-ftr-top.gif);
	background-repeat: repeat-x;
	background-attachment: scroll;
	background-position: 0pt 0pt;
	width:100%;
	margin-bottom:O;
	/*height:47px;*/
}

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
23
24
25
<div id="piedepage">
	<div id="contentbox">
    			<div id="copyright">
        			<span class="copy">&copy; 2010 Twitter</span>
        		</div>
 
            	<ul id="listebox1">
                    <li><a href="http://twitter.com/about">À propos</a></li>
          			<li><a href="http://twitter.com/about/contact">Contact</a></li>
          			<li><a href="http://blog.fr.twitter.com">Blog</a></li>
          			<li><a href="http://status.twitter.com">État du service</a></li>
                    <li><a href="http://twitter.com/goodies">Goodies</a></li>
                    <li><a href="http://dev.twitter.com/">API</a></li>
					<li><a href="http://business.twitter.com/twitter101">Entreprises</a></li>
                    <li><a href="http://support.twitter.com">Aide</a></li>
          			<li><a href="http://twitter.com/jobs">Emploi</a></li>
          			<li><a href="http://twitter.com/tos">Conditions</a></li>
          			<li><a href="http://twitter.com/privacy">Confid</a></li>   
       			 </ul>
 
				<div id="language">
					<span class="l">Langue&nbsp;:&nbsp;&nbsp;</span><a class="french" href="#">français</a>&nbsp;<a class="arrow" href="#">▼</a>
				</div>
	</div>
</div>

Voila voila, si tu veux bien encore m'aider un peu... merci !

[Bisûnûrs]

Tu utilises une position absolue sans renseigner top left right ou bottom, il te manque donc des informations pour que ton CSS soit correct. Est-ce que ton position:absolute est nécessaire ? Si oui, renseigne bottom:0 et left:0.

De plus, tu es peut-être confronté au phénomène de fusion des marges :
http://plambert.developpez.com/tutor...e-marges/#LI-C

[mimimoni]

Hm, j'ai lu l'article. Le conteneur général de mon pied de page (#pied de page) ne contient que margin-bottom=0 comme marge.

Tu penses que mon pied de page pourrait être en fusion avec un autre élément de ma page ?

Pour la position absolute, si je l'enlèves, le pied de page se décale sur la gauche. J'ai renseigné left=0 et donc margin-bottom=0 qui y était déjà. J'ai essayé de mettre plusieurs valeurs pour top, puis padding-top, puis margin-top mais soit cela à pour effet d'agrandir mon pied de page vers le bas, soit ça ne change rien à sa taille.

C'est grave docteur ? On peut encore faire quelque chose pour lui ou c'est fini ?