Une liste en mode tableau

**Caxton** · 09/02/2011, 12h08

Bonjour,

A l'occasion de créer un forum, on m'a proposer de travaillé avec des listes. Fort heureusement j''arrive à les faire afficher mais je suis déçu du rendu.

J'aimerais savoir comment à partir d'une liste de la forme <ul><li>Titre</li><li>Message</li></ul> on peut afficher des colonnes.

Est-ce que quelqu'un aurait une piste pour que je puisse me documenter sur le sujet ?

Je vous remercie grandement pour votre aide.

**ornitho13** · 09/02/2011, 14h18

Salut,

utilise le "float:left" sur les LI pour les afficher les uns à la suite des autres horizontalement par exemple.
Attribue leur également une largeur fixe et pourquoi pas une bordure...

**Caxton** · 09/02/2011, 14h22

Un simple float: left;

Je pensait beaucoup plus compliqué moi

Bon alors j'essaie et je vous dis ce qu'il en est.

**Caxton** · 09/02/2011, 16h27

Effectivement ça semble fonctionné. Mais alors quel bazar !

En effet chaque li a son propre css

Voila ce que j'ai pu faire:
Coté PHP :

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
26
27
 
$section = '
				<ul class="ForumUl">
					<li class="ForumLiTop">Liste des sections</li>
			';
 
			//Lister les sections actives
			$select = "SELECT * FROM `$tableBdd` WHERE `Activation` = '1' AND `IdSectionParent` = '0'";
			$request = $bdd->query($select);
 
			while($rowSection = $request->fetch_assoc()) {
 
				//$tableBdd = $this->table.'Post';
				//$idSection = $rowSection['ID'];
 
				//Lister le nombre de sujet par section
				//$select2 = "SELECT COUNT(`ID`) FROM `$tableBdd` WHERE `IdSection` = '$idSection'";
				//$request2 = $bdd->query($select2);
				//$nbSujet2 = $request2->fetch_assoc();
 
				$section .= '<li class="ForumLiColsImg"><img src="'.$packImg.'/icones/dossier.png" border="0" /></li>';
				$section .= '<li class="ForumLiColsTitre"><a href="/'.$templateForum.'/forum-'.$rowSection['ID'].'.html" class="lien" title="Aller dans la section '.$rowSection['Nom'].'.">'.$rowSection['Nom'].'</a></li>';
				$section .= '<li class="ForumLiColsNb">2</li>';
				$section .= '<li class="ForumLiColsFin"></li>';
			}
 
			$section .= '</ul>';

Puis coté CSS :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
.ForumUl {
	margin: 0px;
	padding: 0px;
	border: 1px #4E76A8 solid;
	width: 570px;
	background-color: #F4F3F2;
}
 
.ForumLiTop {
	font-weight: bold;
	border-bottom: 1px #4E76A8 solid;
	background-color: #FFFEA1;
}
 
.ForumLiColsImg {
	float: left;
	border-right: 1px #4E76A8 solid;
	width: 40px;
	height: 35px;
	padding: 3px;
}
 
.ForumLiColsTitre {
	float: left;
	border-right: 1px #4E76A8 solid;
	width: 435px;
	height: 35px;
	padding: 3px;
}
 
.ForumLiColsNb {
	float: left;
	border-right: 1px #4E76A8 solid;
	width: 30px;
	height: 35px;
	padding: 3px;
}
 
.ForumLiCols {
	float: left;
	border-right: 1px #4E76A8 solid;
}
 
.ForumLiColsFin {
	clear: both;
	background-color: #4E76A8;
	overflow: hidden;
    font-size: 1px;
    line-height: 1px;
    height: 1px;
}

Y a pas un moyen plus simple de faire la même chose ?
Peut-on supprimer du coup la double ligne en bas ?

**ornitho13** · 09/02/2011, 19h10

peux tu mettre le code html généré au lieu du code PHP, ce serait plus facile pour t'aider

**Caxton** · 10/02/2011, 11h17

Ah oui ce n'est pas faux !

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<!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="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="author" content="" />
        <meta name="identifier-url" content="" />
 
        <meta name="description" content="Forum" />
        <meta name="keywords" content="Forum" />
 
        <title>Forum - BulleCMS</title>
 
        <link rel="stylesheet" type="text/css" href="/design/exilience/mentions.css" />
	</head>
	<body>
		<div id="PosDesign">
			<div id="Header">
				<div id="PosTitle">
					<h1>
						<a class="lienTitle" href="/" title="Retour à l'accueil">Forum - BulleCMS</a>
 
					</h1>
				</div>
			</div>
			<div id="Middle">
				<div id="Contenu">
 
				<ul class="ForumUl">
					<li class="ForumLiTop">Liste des sections</li>
 
					<li class="ForumLiColsImg"><img src="/tools/pack_img//icones/dossier.png" border="0" /></li>
 
					<li class="ForumLiColsTitre"><a href="/page-exilience-forum/forum-1.html" class="lien" title="Aller dans la section Toto.">Toto</a></li>
					<li class="ForumLiColsNb">2</li>	
					<li class="ForumLiColsFin"></li>
 
					<li class="ForumLiColsImg"><img src="/tools/pack_img//icones/dossier.png" border="0" /></li>
					<li class="ForumLiColsTitre"><a href="/page-exilience-forum/forum-2.html" class="lien" title="Aller dans la section Titi.">Titi</a></li>
					<li class="ForumLiColsNb">2</li>	
					<li class="ForumLiColsFin"></li>
				</ul>
 
				</div>
				<div id="Menu">
					<h3>Menu</h3>
					<a class="lien" href="/page-exilience/le-developpement-du-cms-patch-note~6.html" title="Patch-note du CMS">Patch-note du CMS</a><br /><a class="lien" href="/page-exilience/ajout_test_grundt~5.html" title="test_grundt">test_grundt</a><br />
					<h3>Forum</h3>
 
				<a href="/page-exilience-forum/forum-accueil.html" class="lien" title="Accueil du forum">Accueil du forum</a><br />
 
				<a href="/page-exilience-forum/forum-inscription.html" class="lien" title="Inscription forum">Inscription au forum</a><br />
 
					<!--<h3>Météo</h3>
					-->
				</div>
				<div class="Jumper"></div>
			</div>
			<div id="Footer">
				<div id="PosInfosFooter"></div>
			</div>
 
		</div>
	</body>
</html>

Bon en même temps c'est mon premier tableau en ul/li donc forcément, je cherche à comprendre ce qui cloque et ce qui peut être améliorer.

**ornitho13** · 10/02/2011, 12h37

ta façon de procéder me semble correct (une classe par colonne/cellule réutilisable sur chaque ligne)
Il faut bien prendre en compte que la fonction première des LI n'est pas de retranscrire des données tabulaires (c'est le role d'un tableau

), donc tu ne peux pas faire exactement ce que peut faire un tableau à moins d'y mettre le style (donc beaucoup de class).

concernant ta double ligne en bas du tableau, tu peux utiliser le border-width ou le border-bottom :

Code css :

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

1
2
3
4
5
6
7
8
9
10
 
.ForumUl {
	margin: 0px;
	padding: 0px;
	border: 1px #4E76A8 solid;
	border-width:1px 1px 0px 1px;
	width: 570px;
	background-color: #F4F3F2;
	list-style: none;
}

ou

Code css :

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

1
2
3
4
5
6
7
8
9
10
 
.ForumUl {
	margin: 0px;
	padding: 0px;
	border: 1px #4E76A8 solid;
	border-bottom:0px;
	width: 570px;
	background-color: #F4F3F2;
	list-style: none;
}

**Caxton** · 10/02/2011, 13h22

Ok !

Ce qui me rassure c'est que je n'ai pas trop fait d'erreur. Je me demande si je ne vais pas quand même revoir tout ça. J'avoue que ça me chipote.

Pour les lignes du bas, peut-être la solution est de virer le cadre de base, ou de forcé à ne pas afficher complètement mais on reste quand même dans un type d'affichage très improbable.

Je tiens à te remercie pour l'aide déjà qui ma donné une ouverture que je cherchais.

**Caxton** · 10/02/2011, 17h25

C'est bon, cette méthode à résolu mon double trait !

Une nouvelle fois merci pour cette aide

Une liste en mode tableau

Tableau en CSS

Discussions similaires

Partager

Partager