Une question élément css

Version imprimable

Voir 40 message(s) de cette discussion en une page

28/07/2017, 14h50
koala19100

Une question élément css

bonjours

Es-ce que je dois mettre une class a chaque balise ou pas (sauf si nécessaire)

.maclass div (juste une class avec une balise)

où je peut mettre

.maclass div p (juste une class avec 2 balises)

donc si vous me dite la class avec une balise suffit pour le css

et mettre une class html à chaque fois nécessaire afin d’éviter de mettre en css laclass avec 2 balise

es ce que c'est bien ça ou c'est autorisé 2 balise sur le css
28/07/2017, 15h34
danielhagnoul

:salut:

:calim2:

Je n'ai pas compris cette explication, un petit exemple (codes CSS et HTML) illustrant votre propos serait le bienvenu.

Un sélecteur CSS peut être très simple ou très complexe selon les besoins.

En général, un sélecteur trop complexe (plus de trois éléments dans le sélecteur) est souvent la conséquence d'une erreur de conception.
28/07/2017, 18h50
JefReb
Oui, un petit exemple serait le bienvenue.
Pour ma part, je pense qu'il faut utiliser les classes le moins possible quand on peut.
En jouant sur parent > enfant, quelquefois cela est plus clair dans le CSS.
Il faut aussi lire les tutoriels sur les css,
car
Code:

1 2 3 4 5 .maclass { ...} div.maclass { ...} div.maclass p { ...} p.maclass { ...}
L'interprétation par le navigateur sera complètement différent ...

le resultat sera le même dans les 3 cas

1 er cas

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
      <!--Début du header-->
	  <header>	  
	  <h1>cadre</h1>	  
	  <nav><ol>	 
	  <li class="icon-accueil" title="header accueil"><a href="" title="Portail">portail</a></li>
	  <li class="icon-forum" title="header forum"><a href="" title="Forum">forum</a></li>
	  <li class="icon-inscription" title="header Inscription"><a href="" title="Inscription">inscription</a></li>
	  <li class="icon-connexion" title="header connexion"><a href="" title="Connexion">connexion</a></li>
	  <li class="icon-rechercher" title="header rechercher"><a href="" title="Rechercher">rechercher</a></li>
	  <li class="icon-faq" title="header faq"><a href="" title="Faq">faq</a></li>
	  <li class="icon-concours" title="header Concours"><a href="" title="Concours">concours</a></li>
	  <li class="icon-mini-chat" title="header twitter"><a href="" title="Mini-chat">mini-chat</a></li>
	  <li class="icon-facebook" title="header facebook"><a href="" title="Facebook">facebook</a></li>
	  <li class="icon-twitter" title="header twitter"><a href="" title="Twitter">twitter</a></li>
	  </ol></nav>
      </header>
	  <!--Fin du header-->

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
	  header
	  {
	  border:#CCCCCC 1px solid;
	  }
	  header h1
	  {
	  border-bottom:#CCCCCC 1px solid;
	  }
 
	  header li
	  {
	  border-right:#CCCCCC 1px solid;
	  padding:1em;
	  float:left;
	  }

2 eme cas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
      <!--Début du header-->
	  <header>	  
	  <h1>cadre</h1>	  
	  <nav><ol class="header">	 
	  <li class="icon-accueil" title="header accueil"><a href="" title="Portail">portail</a></li>
	  <li class="icon-forum" title="header forum"><a href="" title="Forum">forum</a></li>
	  <li class="icon-inscription" title="header Inscription"><a href="" title="Inscription">inscription</a></li>
	  <li class="icon-connexion" title="header connexion"><a href="" title="Connexion">connexion</a></li>
	  <li class="icon-rechercher" title="header rechercher"><a href="" title="Rechercher">rechercher</a></li>
	  <li class="icon-faq" title="header faq"><a href="" title="Faq">faq</a></li>
	  <li class="icon-concours" title="header Concours"><a href="" title="Concours">concours</a></li>
	  <li class="icon-mini-chat" title="header twitter"><a href="" title="Mini-chat">mini-chat</a></li>
	  <li class="icon-facebook" title="header facebook"><a href="" title="Facebook">facebook</a></li>
	  <li class="icon-twitter" title="header twitter"><a href="" title="Twitter">twitter</a></li>
	  </ol></nav>
      </header>
	  <!--Fin du header-->

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
	  header
	  {
	  border:#CCCCCC 1px solid;
	  }
	  header h1
	  {
	  border-bottom:#CCCCCC 1px solid;
	  }
 
	  .header li
	  {
	  border-right:#CCCCCC 1px solid;
	  padding:1em;
	  float:left;
	  }

3 éme cas

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
 
      <!--Début du header-->
	  <header>	  
	  <h1>cadre</h1>	  
	  <nav><ol>	 
	  <li class="header icon-accueil" title="header accueil"><a href="" title="Portail">portail</a></li>
	  <li class="header icon-forum" title="header forum"><a href="" title="Forum">forum</a></li>
	  <li class="header icon-inscription" title="header Inscription"><a href="" title="Inscription">inscription</a></li>
	  <li class="header icon-connexion" title="header connexion"><a href="" title="Connexion">connexion</a></li>
	  <li class="header icon-rechercher" title="header rechercher"><a href="" title="Rechercher">rechercher</a></li>
	  <li class="header icon-faq" title="header faq"><a href="" title="Faq">faq</a></li>
	  <li class="header icon-concours" title="header Concours"><a href="" title="Concours">concours</a></li>
	  <li class="header icon-mini-chat" title="header twitter"><a href="" title="Mini-chat">mini-chat</a></li>
	  <li class="header icon-facebook" title="header facebook"><a href="" title="Facebook">facebook</a></li>
	  <li class="header icon-twitter" title="header twitter"><a href="" title="Twitter">twitter</a></li>
	  </ol></nav>
      </header>
	  <!--Fin du header-->

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
	  header
	  {
	  border:#CCCCCC 1px solid;
	  }
	  header h1
	  {
	  border-bottom:#CCCCCC 1px solid;
	  }
 
	  .header
	  {
	  border-right:#CCCCCC 1px solid;
	  padding:1em;
	  float:left;
	  }

à votre avis c'est mieux lequelle

29/07/2017, 08h07
Invité
Bonjour,

on ne comprend toujours... rien... :koi:

On met ce qui est nécessaire et suffisant.
Point.
De préférence, on simplifie au maximum... comme tu l'as fait dans le 1er cas.
Donc, pas utile de mettre des classes superflues.

Sinon, on peut aussi cibler de façon précise et UNIQUE avec un identifiant <balise id="...">.

Ou, si tu as d'autres <li> dans ton header (autres que ceux du menu), tu cibles UNIQUEMENT ceux du menu avec :

Code:

header > nav > li { ... }

La règle essentielle à retenir : SIMPLICITE.

A LIRE, aussi :
- Règles d'application des styles CSS et gestion des conflits
29/07/2017, 21h01
koala19100

par exemple

https://fiddle.jshell.net/7oqzh3ac/1/

et

https://fiddle.jshell.net/xhk1oudc/

es-ce que c'est bon où pas

merci

Bonjour,

Citation:

es-ce que c'est bon où pas

pas bien compris ce que tu cherches mais si je regarde un extrait de ton code, par exemple
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16  <li class="global-forum-index"> <span class="forum-index"></span> <h3 class="forum-index">titre catégorie <p>description de la catégorie.</p> </h3> <span class="forum-index">30 000</span> <ol class="forum-index"> <li></li> </ol> <div class="forum-index"> <h3>titre du topic</h3> <time datetime="2012-02-11T16:24:02">11 février 2012 à 16:24:02</time> Par <span>pseudo</span> </div> </li>
je ne peux que constater que cela est inutilement compliqué et plein d'éléments qui ne servent à rien.

PS: au passage, tu en es où de cette discussion Votre avis sur mon code ?

30/07/2017, 15h59
koala19100

et comme ça c'est bon

https://fiddle.jshell.net/yr2df975/
30/07/2017, 18h11
Invité

Non.
C'est inutilement compliqué.
30/07/2017, 18h16
Invité

Merci de nous expliquer clairement ce que tu veux.
30/07/2017, 21h08
koala19100

https://fiddle.jshell.net/yr2df975/

tu peut faire un code bon pour voir comment tu fait

merci
31/07/2017, 08h35
JefReb

Koala,
Je pense que le forum est là pour donner un avis, conseiller, aider à trouver comment faire, orienter la recherche ou dépanner quand le problème est bien poser.
Mais faire complètement la programmation, c'est un peu beaucoup demander.
Dans ton code tu utilises flex, c'est très bien et moderne, mais je ne comprends pas pourquoi alors passer par des ol et li.
la bonne div n'aurait-elle pas suffit?
31/07/2017, 09h29
Invité

"un code bon" est un code SIMPLE.
31/07/2017, 12h01
koala19100

car je prefere ol li pour compter le nombre de cadre

et pour info c'est un mec de votre site qui m'a dit de mettre li ol

encore une fois vous changer d'avis entre ce forum et site zero et le chat de ce forum

vous changer 15000 fois l'avis

pour toi un code pourrit

https://fiddle.jshell.net/sx2ohj2z/

etant doner tt le code est pourrit

pas un mot de gentil snifff
31/07/2017, 17h48
NoSmoking

Citation:

car je prefere ol li pour compter le nombre de cadre

pas besoin de cela pour faire du comptage.

Citation:

et pour info c'est un mec de votre site qui m'a dit de mettre li ol

cela n'est pas incompatible.

Citation:

encore une fois vous changer d'avis entre ce forum et site zero et le chat de ce forum

Chaque intervenant à sa façon de voir les choses et comme tu restes très évasif il est difficile de te répondre pile poil.

Citation:

vous changer 15000 fois l'avis

Tu as mal du compter, je pense que c'est plus :mouarf:

Pour en revenir à ton code la liste <ol> se justifie dans la mesure où il y a une suite de news ordonnées, par contre à l'intérieur de chaque <li> il te faut composer une structure qui colle à ce que tu veux mettre en avant et de styler en fonction du rendu que tu souhaites.

Comme dit par jreaux62 « "un code bon" est un code SIMPLE. ».

Si tu as du mal à visualiser la chose n'hésites pas à faire une maquette sur PAPIER de ce que tu veux, souvent cela aide à mettre en place la structure HTML, car pour le moment on a du mal à voir ou tu veux en venir.

Citation:

pas un mot de gentil snifff

Courage tu vas y arriver.
01/08/2017, 09h31
koala19100

je vous ai fai dejà plein d'exemple

par exemple

https://fiddle.jshell.net/7oqzh3ac/1/

et

https://fiddle.jshell.net/mtzxznh3/

et

https://fiddle.jshell.net/sx2ohj2z/

vous ne voulez pas me dire ceux qu'il faut corriger à part dire que mon code est pourrit

fessez un petit effort svp

je fait des effort pour html et css et vous au lieu de voir il y a une progresion

vous dite pas un mot en disant c'est mieux mais on peut amélioré

vous dite à la place mon code est pourrit

je vous demande de faire voir un bon code merci de votre aide

Bonjour,

Citation:

Envoyé par koala19100

...fessez un petit effort svp...

OK... :fessee: Ca va mieux comme ça ? :mouarf:

Voilà un code "propre", avec juste ce qu'il faut :

J'ai mis des id au lieu de classes, car je suppose qu'il n'y en aura qu'un (unique).

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
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
81
82
83
84
<div id="portail-global">
 
	<aside id="portail-aside">
 
		<ol>
 
			<li>
				<h3>titre</h3>
				<div>...</div>
			</li>
 
			<li>
				<h3>titre</h3>
				<div>...</div>
			</li>
 
			<li>
				<h3>titre</h3>
				<div>...</div>
			</li>
 
		</ol>
 
	</aside>
 
	<section id="portail-news">
 
		<article>
			<header>
				<h1>titre de la news</h1>
			</header>
			<div>
				contenu article...
			</div>
			<aside>
				pictos news, lien "Lire plus"...
			</aside>
		</article>
 
		<article>
			<header>
				<h1>titre de la news</h1>
			</header>
			<div>
				contenu article...
			</div>
			<aside>
				pictos news, lien "Lire plus"...
			</aside>
		</article>
 
		<article>
			<header>
				<h1>titre de la news</h1>
			</header>
			<div>
				contenu article...
			</div>
			<aside>
				pictos news, lien "Lire plus"...
			</aside>
		</article>
 
	</section>
 
	<nav id="portail-menu">
 
		<ul>
 
			<li>
				<a href="...">lien</a>
			</li>
			<li>
				<a href="...">lien</a>
			</li>
			<li>
				<a href="...">lien</a>
			</li>
 
		</ul>
 
	</nav>
 
</div>

Il suffit alors d'adapter le CSS.

01/08/2017, 11h27
koala19100

merci, mai je préfere mon code car il y a moin de balise que le tient il y a des balises en trop
donc il faudra que tu simplifie ton code ;)
je done juste mon avis ;)

come je suis trop gentil come mec voilà un code simplifier

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
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
 
 
	  <div class="global-portail">
	  <div class="portail">
	                          <aside>
							         <h3>titre</h3>
									 bla bla bla
							  </aside>
	                          <aside>
							         <h3>titre</h3>
									 bla bla bla
							  </aside>
	                          <aside>
							         <h3>titre</h3>
									 bla bla bla
							  </aside>
	                          <aside>
							         <h3>titre</h3>
									 bla bla bla
							  </aside>
	  </div>
 
	  <div class="portail">
	                               <article>
								   <h2>titre de la news</h2>
								   <p>message</p>
								   <ol><li class="icon-news-vue" title="news vue">Vues : 4910</li><li class="icon-news-commentaire" title="news commentaire">Commentaires : 8</li><li class="icon-ecrire-news" title="">Écrire un commentaire</li><li class="icon-news-forum">Forum : Mises à jour</li>
								   </ol>
								   </article>
 
	                               <article>
								   <h2>titre de la news</h2>
								   <p>message</p>
								   <ol><li class="icon-news-vue" title="news vue">Vues : 4910</li><li class="icon-news-commentaire" title="news commentaire">Commentaires : 8</li><li class="icon-ecrire-news" title="">Écrire un commentaire</li><li class="icon-news-forum">Forum : Mises à jour</li>
								   </ol>
								   </article>
 
	                               <article>
								   <h2>titre de la news</h2>
								   <p>message</p>
								   <ol><li class="icon-news-vue" title="news vue">Vues : 4910</li><li class="icon-news-commentaire" title="news commentaire">Commentaires : 8</li><li class="icon-ecrire-news" title="">Écrire un commentaire</li><li class="icon-news-forum">Forum : Mises à jour</li>
								   </ol>
								   </article>
 
	                               <article>
								   <h2>titre de la news</h2>
								   <p>message</p>
								   <ol><li class="icon-news-vue" title="news vue">Vues : 4910</li><li class="icon-news-commentaire" title="news commentaire">Commentaires : 8</li><li class="icon-ecrire-news" title="">Écrire un commentaire</li><li class="icon-news-forum">Forum : Mises à jour</li>
								   </ol>
								   </article>
 
	  </div>
 
	  <div class="portail">
	                          <aside>
							         <h3>titre</h3>
									 bla bla bla
							  </aside>
	                          <aside>
							         <h3>titre</h3>
									 bla bla bla
							  </aside>
	                          <aside>
							         <h3>titre</h3>
									 bla bla bla
							  </aside>
	                          <aside>
							         <h3>titre</h3>
									 bla bla bla
							  </aside>
	  </div>
	  </div>

apparement li ca ne sert à rien ;)

j’ai réfléchit cette nuit

je met dans l'index ou d'autres pages qui contient 1 menu voir 2 menu aside

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
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
 
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
    <title>Document sans titre</title>
<link rel="stylesheet" type="text/css" href="mapage.css">
</head>
<body>
       <!--Début du global-->
	   <main>
	  <!--Début du menu header-->
	  <header>
	  <h1>mon logo</h1>
	  <nav><ol>
	  <li class="icon-accueil" title="header accueil"><a href="" title="Portail">portail</a></li>
	  <li class="icon-forum" title="header forum"><a href="" title="Forum">forum</a></li>
	  <li class="icon-inscription" title="header Inscription"><a href="" title="Inscription">inscription</a></li>
	  <li class="icon-connexion" title="header connexion"><a href="" title="Connexion">connexion</a></li>
	  <li class="icon-rechercher" title="header rechercher"><a href="" title="Rechercher">rechercher</a></li>
	  <li class="icon-faq" title="header faq"><a href="" title="Faq">faq</a></li>
	  <li class="icon-concours" title="header Concours"><a href="" title="Concours">concours</a></li>
	  <li class="icon-mini-chat" title="header twitter"><a href="" title="Mini-chat">mini-chat</a></li>
	  <li class="icon-facebook" title="header facebook"><a href="" title="Facebook">facebook</a></li>
	  <li class="icon-twitter" title="header twitter"><a href="" title="Twitter">twitter</a></li>
	  </ol></nav>
      </header>
	  <!--Début du menu header-->
      <!--Début du filaraine-->
	  <filaraine>
	  <div id="breadcrumb">
	  <a href="#" class="active">Navigation</a>
	  <a href="#">Comparer</a>
	  <a href="#">Confirmer commande</a>
	  <a href="#">Terminer</a>
	  </div>
	  </filaraine>
      <!--Fin du filaraine-->
      <!--début la balise div se met sur tout les pages-->
	  <div id="global-portail">
	  <!--Début aside-->
	  <aside class="portail">
	  <!--Début du 1 er menue-->
	  <h3>menu principal</h3>
	  <nav><ul>
	  <li><a href="../../forum/index.php" title="index du forum">index du forum</a></li>
	  <li><a href="../../portail.php" title="portail">portail</a></li>
	  <li><a href="../../rechercher/index.php" title="rechercher">rechercher</a></li>
	  <li><a href="../../membre/inscription.php" title="inscription">inscription</a></li>
	  <li><a href="../../membre/membre.php" title="membres">membres</a></li>
	  <li><a href="../../membre/equipe.php" title="l'équipe du forum">l'équipe du forum</a></li>
	  <li><a href="../../faq/index.php" title="faq">faq</a></li>
	  <li><a href="../../concours/index.php" title="concours">concours</a></li>
	  </ul></nav>
	  <!--Fin du 1 er menue-->
      <!--Début du 2 éme menue-->
	  <h3>titre</h3>
 
      <!--fin du 2 éme menue-->
 
      <!--Début du 3 éme menue-->
	  <h3>titre</h3>
 
      <!--fin du 3 éme menue-->
	  <!--Fin aside-->
	  <!--Début de la section-->
	  <section class="portail">
 
	  <!--début des cadre du sondage-->
	  <div><h2>titre du sondage</h2><p>blablabla</p></div>
	  <!--fin des cadre du sondage-->
 
 
 
	  <!--début pagination-->
	  <div class="global-pagination">
	  <h3>10 news</h3>
	  <span>&nbsp;</span> 
 
	  </div> 
	  <!--fin pagination-->
	  <!--Début 1 er news-->
	  <article>
	  <h2>Titre de la news</h2>
	  <time>10:30</time> Par <span>Pseudo</span>
	  <p>ma news</p>
	  <ul>
	  <li class="icon-news-vue" title="news vue">Vues : 4910</li>
	  <li class="icon-news-commentaire" title="news commentaire">Commentaires : 8</li>
	  <li class="icon-ecrire-news" title="">Écrire un commentaire</li>
	  <li class="icon-news-forum">Forum : Mises à jour</li>
	  </ul>
	  </article>
	  <!--Fin 1 er news-->
	  <!--Début 2 éme news-->
	  <article>
	  <h2>Titre de la news</h2>
	  <time>10:30</time> Par <span>Pseudo</span>
	  <p>ma news</p>
	  <ul>
	  <li class="icon-news-vue" title="news vue">Vues : 4910</li>
	  <li class="icon-news-commentaire" title="news commentaire">Commentaires : 8</li>
	  <li class="icon-ecrire-news" title="">Écrire un commentaire</li>
	  <li class="icon-news-forum">Forum : Mises à jour</li>
	  </ul>
	  </article>
	  <!--Fin 2 éme news-->
	  <!--début pagination-->
	  <div class="global-pagination">
	  <h3>10 news</h3>
	  <span>&nbsp;</span> 
 
	  </div> 
	  <!--fin pagination-->
	  <!--début des cadre du 10 derniere forum-->
	  <div><h2>titre du topic forum</h2><p>blablabla</p></div>
	  <!--fin des cadre du 10 derniere forum-->
	  </section>
	  <!--fin de la section-->
	  <!--Début aside-->
	  <aside class="portail">
	  <!--Début du menu-->
      <!--Début du 1 éme menue-->
	  <h3>titre</h3>
 
      <!--fin du 1 éme menue-->
 
      <!--Début du 2 éme menue-->
	  <h3>titre</h3>
 
      <!--fin du 2 éme menue-->
	  <!--Fin du menu-->
	  </aside>
	  <!--Fin aside-->
	  </div>
      <!--fin la balise div se met sur tout les pages-->
      <!--Début du footer-->
      <footer>
	  footer
	  </footer>
      <!--Fin du footer-->
	   </main>
       <!--Fin du global-->
</body>
</html>

et une page

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
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
 
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
    <title>Document sans titre</title>
<link rel="stylesheet" type="text/css" href="mapage.css">
</head>
<body>
       <!--Début du global-->
	   <main>
	  <!--Début du menu header-->
	  <header>
	  <h1>mon logo</h1>
	  <nav><ol>
	  <li class="icon-accueil" title="header accueil"><a href="" title="Portail">portail</a></li>
	  <li class="icon-forum" title="header forum"><a href="" title="Forum">forum</a></li>
	  <li class="icon-inscription" title="header Inscription"><a href="" title="Inscription">inscription</a></li>
	  <li class="icon-connexion" title="header connexion"><a href="" title="Connexion">connexion</a></li>
	  <li class="icon-rechercher" title="header rechercher"><a href="" title="Rechercher">rechercher</a></li>
	  <li class="icon-faq" title="header faq"><a href="" title="Faq">faq</a></li>
	  <li class="icon-concours" title="header Concours"><a href="" title="Concours">concours</a></li>
	  <li class="icon-mini-chat" title="header twitter"><a href="" title="Mini-chat">mini-chat</a></li>
	  <li class="icon-facebook" title="header facebook"><a href="" title="Facebook">facebook</a></li>
	  <li class="icon-twitter" title="header twitter"><a href="" title="Twitter">twitter</a></li>
	  </ol></nav>
      </header>
	  <!--Début du menu header-->
      <!--Début du filaraine-->
	  <filaraine>
	  <div id="breadcrumb">
	  <a href="#" class="active">Navigation</a>
	  <a href="#">Comparer</a>
	  <a href="#">Confirmer commande</a>
	  <a href="#">Terminer</a>
	  </div>
	  </filaraine>
      <!--Fin du filaraine-->
	  <!--Début de la section-->
	  <section>
	  <!--début pagination-->
	  <div class="global-pagination">
	  <h1>titre</h1>
	  <p><button></button><button</button></button> 
	  </div> 
	  <!--fin pagination-->
	  <!--debut du forum-->
	  <div class="global-forum">
	  <h2>titre du forum</h2>
	                           <div class="global-forum-index">
										 <div class="element"></div>
										 <div class="element"></div>
										 <div class="element"></div>
										 <div class="element"></div>									 
										 </div>
	                           <div class="global-forum-index">
										 <div class="element"></div>
										 <div class="element"></div>
										 <div class="element"></div>
										 <div class="element"></div>									 
										 </div>
 
	  <h2>titre du forum</h2>
	                           <div class="global-forum-index">
										 <div class="element"></div>
										 <div class="element"></div>
										 <div class="element"></div>
										 <div class="element"></div>									 
										 </div>
	                           <div class="global-forum-index">
										 <div class="element"></div>
										 <div class="element"></div>
										 <div class="element"></div>
										 <div class="element"></div>									 
										 </div>
 
 
	  <!--début pagination-->
	  <div class="global-pagination">
	  <span>&nbsp;</span>
	  <p><button></button><button</button></button> </p>
	  </div> 
	  <!--fin pagination-->
	  <!--fin du forum-->
	  </div>
 
	  <!--debut de la legende-->
	  <div class="global-legende">
	  <h2>titre</h2>
 
	  blablabla
 
	  <h3>titre</h3>
 
	  blablabla
 
	  </div>
	  <!--fin de la legende-->
	  </section>
	  <!--fin de la section-->
      <!--Début du footer-->
      <footer>
	  footer
	  </footer>
      <!--Fin du footer-->
	   </main>
       <!--Fin du global-->
</body>
</html>

en résumer

pour une page 2 colonnes

Code:

1
2
3
4
5
6
7
8
 
<header><nav></nav></header>
<filaraine></filaraine>
<div>
<aside><h3>titre</h3><h3>titre</h3><h3>titre</h3></aside>
<section>contenu</section>
</div>
<footer></footer>

pour une page 3 colonnes

Code:

1
2
3
4
5
6
7
8
9
 
<header><nav></nav></header>
<filaraine></filaraine>
<div>
<aside><h3>titre</h3><h3>titre</h3><h3>titre</h3></aside>
<section>contenu</section>
<aside><h3>titre</h3><h3>titre</h3><h3>titre</h3></aside>
</div>
<footer></footer>

pour une page 1 colonnes(enfin avec juste un cadre

Code:

1
2
3
4
5
6
7
8
 
<header><nav></nav></header>
<filaraine></filaraine>
<div>
<section>contenu</section>
<aside><h3>titre</h3><h3>titre</h3><h3>titre</h3></aside>
</div>
<footer></footer>

bien entendu j'ai fait vite fait un plan

j'attend votre page pour refaire tout mes pages avec ce code ;)

es-ce que c'est bien ça
merci

Voir 40 message(s) de cette discussion en une page