Discussion :

[schats]

bonjours
j'ai créer un petit script pout créer des catégorie avec le titre et le contenu dedans :p
le gros problème ... ca ne marche pas
normalement chaque case devrai mesurer 25% de la page de l'internaute et passer a la suivant mais sur la même ligne mais la cela me met l'un en dessous de l'autre
j'ai tout tenter ca ne veut pas revenir l'un a coter de l'autre
les code
le tableau
html

Code html :

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
 
 <ul id="ta">
     <li><h4>blague	</h4></li></ul><ul id="t">
  <li><a href="./blague.php?categorie=noir">noir</a></li>
  <li><a href="./blague.php?categorie=normal">normal</a></li>
  <li><a href="./blague.php?categorie=blonde">blonde</a></li>
  <li><a href="./blague.php?categorie=belge">belge</a></li>
  <li><a href="./blague.php?categorie=autre">autre</a></li>
 
</ul><ul id="ta"><li><h4>	bloooooooo</h4></li></ul>
<ul id="t"> 
  <li><a href="./blague.php?categorie=noir">noir</a></li>
  <li><a href="./blague.php?categorie=normal">normal</a></li>
  <li><a href="./blague.php?categorie=blonde">blonde</a></li>
  <li><a href="./blague.php?categorie=belge">belge</a></li>
  <li><a href="./blague.php?categorie=autre">autre</a></li>
 
</ul><ul id="ta"><li><h4> looolllllol</h4><li></ul>
	<ul id="t">
  <li><a href="./blague.php?categorie=noir">noir</a></li>
  <li><a href="./blague.php?categorie=normal">normal</a></li>
  <li><a href="./blague.php?categorie=blonde">blonde</a></li>
  <li><a href="./blague.php?categorie=belge">belge</a></li>
  <li><a href="./blague.php?categorie=autre">autre</a></li>
 
</ul>

et le css

Code css :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
ul#tab
 {
/* Initialisation de la liste : pas de puce, pas d'espace à gauche*/
list-style-type:none;
margin-left:0;
padding-left:0;
/* Note : ne pas mettre de width, c'est inutile et cela peut entrainer des difficultés par rapport au modèle de boite */
 
padding : 20;
overflow:hidden;/* Création d'un contexte de formatage, pour que les flottants restent dans leur conteneur, non reconnu par IE */
zoom:1; /* dote IE de layout, à passer en commentaire conditionnel pour la validation css*/
}
 
ul#tab li {
float:left;
width:25%;
margin-bottom:5px;
}
 
 
ul#tab li#pseudo
{
float:left;
width:25%;
margin-bottom:5px;
}
 ul#tab li#message
{
float:left;
width:50%;
margin-bottom:5px;
}
ul#tab {
display:block;
margin:0 3px;
padding:3px 0;
 
text-align:center;
background-image: url("im/fon.jpg");
}
 
ul#ta
 {
/* Initialisation de la liste : pas de puce, pas d'espace à gauche*/
list-style-type:none;
margin-left:0;
padding-left:0;
/* Note : ne pas mettre de width, c'est inutile et cela peut entrainer des difficultés par rapport au modèle de boite */
 
padding : 20;
overflow:hidden;/* Création d'un contexte de formatage, pour que les flottants restent dans leur conteneur, non reconnu par IE */
zoom:1; /* dote IE de layout, à passer en commentaire conditionnel pour la validation css*/
}
ul#ta{
display:block;
margin:0 3px;
padding:3px 0;
text-align:center;
background-image: url("im/fon.jpg");
width : 25%;
}
ul#ta ul#t
{
display:block;
margin:0 3px;
padding:3px 0;
text-align:center;
background-image: url("im/fon.jpg");
width : 25%;
}
ul#ta li {
float:left;
width:100%;
margin-bottom:5px;
}
ul#ta ul#t li {
float:left;
width:100%;
margin-bottom:5px;
}

merci de m'aider
schats

[cadoudal56]

Hello,

Je pense que ton probleme vient de cet attribut :

Code :

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

1
2
 
ul#ta {display:block;}

Deux possibilité, essaie de mettre le display en inline ou en table-cell
Sinon, le seul moyen que je vois c'est de changer les UL en DIV et de passer l'attribut display en table-cell

@+
cadou

[onirisme]

Je suis pas sûr d'avoir bien compris ce que tu voulais

Je comprend pas trop ton code

fais attention à ta syntaxe ; quand tu mets des valeurs, spécifies les px

padding : 20;

Ton css se double certains attributs :

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
ul#ta
 {
/* Initialisation de la liste : pas de puce, pas d'espace à gauche*/
list-style-type:none;
margin-left:0;
padding-left:0;
/* Note : ne pas mettre de width, c'est inutile et cela peut entrainer des difficultés par rapport au modèle de boite */
 
padding : 20;
overflow:hidden;/* Création d'un contexte de formatage, pour que les flottants restent dans leur conteneur, non reconnu par IE */
zoom:1; /* dote IE de layout, à passer en commentaire conditionnel pour la validation css*/
}
ul#ta{
display:block;
margin:0 3px;

Regarde ICI et dis moi si c'est ce que tu veux.

[schats]

oui c'est bien cela que je veut :p sauf avec une longeur reglabe selon l'écran du visteur :p

[onirisme]

Pour loa hauteur en fonction de la hauteur de l'écran, ajoute les valeurs à ton html et à ton body.

ode 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
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<body>
<div id="ulContener">/*Bloc principal qui contient tes balises ul et li*/
 	<ul>
 
	  <li><h4>blague1</h4></li>
	  <li><a href="./blague.php?categorie=noir">noir</a></li>
	  <li><a href="./blague.php?categorie=normal">normal</a></li>
	  <li><a href="./blague.php?categorie=blonde">blonde</a></li>
	  <li><a href="./blague.php?categorie=belge">belge</a></li>
	  <li><a href="./blague.php?categorie=autre">autre</a></li>
 
	</ul>
</div>
 
<div id="ulContener">  
	<ul>
	  <li><h4>blague2</h4></li>
	  <li><a href="./blague.php?categorie=noir">noir</a></li>
	  <li><a href="./blague.php?categorie=normal">normal</a></li>
	  <li><a href="./blague.php?categorie=blonde">blonde</a></li>
	  <li><a href="./blague.php?categorie=belge">belge</a></li>
	  <li><a href="./blague.php?categorie=autre">autre</a></li>
	</ul>
</div>
 
<div id="ulContener">    
	<ul>
	  <li><h4>blague3</h4></li>
	  <li><a href="./blague.php?categorie=noir">noir</a></li>
	  <li><a href="./blague.php?categorie=normal">normal</a></li>
	  <li><a href="./blague.php?categorie=blonde">blonde</a></li>
	  <li><a href="./blague.php?categorie=belge">belge</a></li>
	  <li><a href="./blague.php?categorie=autre">autre</a></li>
	</ul>
</div>
 
</body>

Code 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
 
html, body {
	height : 99% ;
}
h4{
	padding : 0 ;
	margin : 0 ;
}
 
#ulContener{
	height : 99% ;
	display : block ;
	float : left ;
	width : 25% ;
	background-color : #f5f5f5 ;
	border : solid thin #000000 ;
	margin : 0 5px 0 0 ;
}
 
#ulContener ul{
	list-style : none ;
	margin : 0 ;
	padding : 0 ;
}

Tu fais le ménage dans le code en fonction de ce que tu veux et tu ajoutes tes background. Si tu as des questions sur le pourquoi du comment, tu postes sur le forum.

[schats]

euh ca marche mais j'ai comme un petit problème le pied de page n'attend pas que les tableau soit fini pour ce mettre dessous
regarder ici

[onirisme]

Bonjour,

C'est lié à ta balise #corps et à ton tag body. Ajoute ces éléments et je pense que l'on se rapprochera de ce que tu veux

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
 
/*body,html > Regle la hauteur de page à 99%*/
html, body{
height : 99% ;
 
/*Tu places egalement la hauteur sur ta balise corps pour que celle ci prenne toute la page*/
#corps {
display : block ;
height : 99% ;
etc...
   }
 
/*Pour finir, corrige l'élement ulContener à 85% (question d'esthetique)*/
#ulContener {
  height : 85% ;
etc...
  }

Sur FF j'ai bien le pied de page en entier qui s'affiche en dessous du reste.

[schats]

ca marche :p le seul problème c'est que les case sont longue mais bon je sais regler ca :p

[onirisme]

ca marche :p le seul problème c'est que les case sont longue mais bon je sais regler ca :p

Pour la taille règle cette valeur en fonction de ce que tu veux :

Code :

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

1
2
3
4
5
 
#ulContener {
  height : 85% ;/*Ici */
etc...
  }

PS. Si c'est bon alors c'est ?

[schats]

oups j'ai réussi :p