Une liste en mode tableau [Résolu]

Microbulle · 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...

Microbulle · 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.

Microbulle · 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

Microbulle · 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;
}

Microbulle · 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.

Microbulle · 10/02/2011, 17h25

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

Une nouvelle fois merci pour cette aide

09/02/2011, 12h08	#1
Microbulle Membre du Club Alexandre Dessinateur et webmaster Inscription : janvier 2005 Messages : 357 Détails du profil Informations personnelles : Nom : Alexandre Âge : 34 Localisation : France, Corrèze (Limousin) Informations professionnelles : Activité : Dessinateur et webmaster Secteur : Communication - Médias Informations forums : Inscription : janvier 2005 Messages : 357 Points : 66 Points : 66	Une liste en mode tableau 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.
	00

09/02/2011, 14h18	#2
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	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...
	00

09/02/2011, 14h22	#3
Microbulle Membre du Club Alexandre Dessinateur et webmaster Inscription : janvier 2005 Messages : 357 Détails du profil Informations personnelles : Nom : Alexandre Âge : 34 Localisation : France, Corrèze (Limousin) Informations professionnelles : Activité : Dessinateur et webmaster Secteur : Communication - Médias Informations forums : Inscription : janvier 2005 Messages : 357 Points : 66 Points : 66	Un simple float: left; Je pensait beaucoup plus compliqué moi Bon alors j'essaie et je vous dis ce qu'il en est.
	00

09/02/2011, 19h10	#5
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	peux tu mettre le code html généré au lieu du code PHP, ce serait plus facile pour t'aider
	00

10/02/2011, 13h22	#8
Microbulle Membre du Club Alexandre Dessinateur et webmaster Inscription : janvier 2005 Messages : 357 Détails du profil Informations personnelles : Nom : Alexandre Âge : 34 Localisation : France, Corrèze (Limousin) Informations professionnelles : Activité : Dessinateur et webmaster Secteur : Communication - Médias Informations forums : Inscription : janvier 2005 Messages : 357 Points : 66 Points : 66	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.
	00

10/02/2011, 17h25	#9
Microbulle Membre du Club Alexandre Dessinateur et webmaster Inscription : janvier 2005 Messages : 357 Détails du profil Informations personnelles : Nom : Alexandre Âge : 34 Localisation : France, Corrèze (Limousin) Informations professionnelles : Activité : Dessinateur et webmaster Secteur : Communication - Médias Informations forums : Inscription : janvier 2005 Messages : 357 Points : 66 Points : 66	C'est bon, cette méthode à résolu mon double trait ! Une nouvelle fois merci pour cette aide
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email