[CSS 3] Remplacement tableau par CSS [Résolu]

[alain31tl]

Bonjour

Jusqu'à présent, j'utilisais une table pour afficher un simple tableau comme suit :

Code :

1
2
3
4
5
6
7
8
<table><tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>

et pour le style :

Code :

1
2
3
4
5
6
7
8
9
td
{
background: url('imgs/fond.png');
background-repeat:no-repeat;
width           : 30px;
height          : 30px;
line-height     : 30px;
text-align:center;
}

Simplement, je voulais savoir s'il était possible d'obtenir le même résultat d'affichage en substituant les balises classiques (table, tr, td) ... par du tout CSS.
Merci pour vos conseils éventuels.

[Emyleen]

Bonjour!

Bien sur, tout est possible

Maintenant il faudrait savoir à quoi va te servir cette liste de chiffre Si tu souhaites afficher des données tabulaires, utilise un tableau, pour une liste utilise les ul, etc...

[alain31tl]

Bonjour Emeline

Et merci pour cette orientation car elle correspond effectivement à mon besoin.

Plus de précisions :
En fait, il s'agit de petits liens pour une application serveur mais je n'ai que trés peu d'espace pour les caser, donc chaque pixel a son importance.

Style modifié :

Code :

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
26
27
28
29
30
31
32
33
nav
{
width             : 120px;
}
nav ul
{
list-style-type   : none;
}
nav li
{
display           : inline-block;
background     : url('imgs/fd.png');
width             : 24px;
height            : 24px;
line-height      : 24px;
text-align        : center;
}
nav a
{
text-decoration   : none;
color             : black;
}
 
nav a:hover
{
display           : inline-block;
background        : url('imgs/fd_2.png');
width             : 24px;
height            : 24px;
line-height       : 24px;
text-align        : center; 
color             : white; 
}

Code :

1
2
3
4
5
6
7
8
9
<nav>
                    <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
	                <li><a href="#">5</a></li>
                    </ul>
                </nav>

A présent, j'ai bien un affichage inline.

Cependant, il demeure 2 petits gênes.
Le premier est l'espace qui réside entre 2 éléments <li>
Même en fixant le width du <nav> à 120px, soit 24px par 5, il demeure toujours un espace entre les 2.
Hum ! comment le gérer ?

Et enfin, mon image au survol :

Code :

1
2
3
4
5
6
nav a:hover
{
display           : inline-block;
background        : url('imgs/fd_2.png');
......
......

N'a pas les mêmes dimensions que celle de base, alors qu'elles font toutes les deux 24 x 24 px.
Ce qui est étrange, c'est que si je remplace les 2 images de fond par des couleurs, je n'ai pas ce problème.

Un dernier p'tit souffle ?

[Emyleen]

Est-ce que tu as essayé de mettre des padding: 0 et margin:0; sur tout tes éléments? Souvent c'est source de soucis.

Pour ce qui est de ton image hover je t'avoue que je vois pas trop Essaye de mettre width: 24px; et height: 24px dans le css de ton a:hover.

[alain31tl]

C'est exactement ce que j'ai fais au départ.
( voir style)

Code :

1
2
3
4
5
6
7
8
9
10
nav a:hover
{
display           : inline-block;
background        : url('imgs/fd_2.png');
width             : 24px;
height            : 24px;
line-height       : 24px;
text-align        : center; 
color             : white; 
}

Sympas le CSS, mais la maîtrise est une autre affaire.
Perso, je suis plus dev. serveur et l'agrémentation, ce n'est pas trop mon truc.
J'avoue même une certaine négligence de ma part, parce que trop habitué à notre viel html.
A tort, je l'avoue.

Enfin bon, c'est dans de bonnes voies pour l'instant. lol

[Emyleen]

Ah oui excuse moi je n'avais pas vu Et si tu essayes de mettre aussi les width etc dans le css du a directement? En mettant l'image dans le a directement et pas dans le li?

[alain31tl]

Ah !
Un de moins.

Pour l'image, je pense que mon navigateur avait enregistré une ancienne à une dimension différente puisque celà fonctionne après avoir fait le ménage sur les fichiers temp.

Donc ok :

Code :

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
26
27
28
29
30
31
32
33
34
nav
{
width             : 120px;
}
nav ul
{
list-style-type   : none;
}
nav li
{
display           : inline-block;
background        : url('imgs/fd.png');
width             : 24px;
height            : 24px;
line-height       : 24px;
text-align        : center;
}
nav a
{
text-align        : center;
text-decoration   : none;
color             : black;
}
 
nav a:hover
{
display           : inline-block;
background        : url('imgs/fd_2.png');
width             : 24px;
height            : 24px;
line-height       : 24px;
text-align        : center; 
color             : white; 
}

Me reste juste cette histoire d'espace entre les <li>
Vais suivre ta recommandation.

à suivre...

[alain31tl]

Ok !

Finalement, avec moultes galères avec les balises <ul><li>, très récalcitrantes avec l'espacement margin, j'ai finalement opté pour la balise <a>, tout simplement.

2 avantages :
- Allégement des lignes de style
-Gestion plus pratique de margin

A toute fin utile :

Code :

<a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a>

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
a
{
display           : inline-block;
margin            : 2px;
background        : url('imgs/fd.png');
width             : 24px;
height            : 24px;
line-height       : 24px;
color             : black;
text-decoration   : none;
text-align        : center;
}		
a:hover
{
display           : inline-block;
margin            : 2px;
background        : url('imgs/fd_2.png');
width             : 24px;
height            : 24px;
line-height       : 24px;
color             : white;
text-decoration   : none;
text-align        : center;
}

Zoom :
Capture image

Merci à notre très charmante Emeline.
Et bonne continuation