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.

Une liste en mode tableau

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager