Discussion :

[electronico68]

Bonojur et merci d'avance de vos réponces ,

J'aimerais avoir un design fluide dans un kit graphique que j'ai télécharger gratuitement, j'ai entendu parler de plusieurs choses:
-inserer un code "width: 100%;" dans la balise body de mon fichier css
-et mettre dans pourcentages à la place des pixels
J'ai essayé les 2 mais je ni suis pas arrivé...
Voici les fichiers (il faut cliquer sur HTML.zip) du kit graphique.

Merci encore

[FMaz]

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 <table width="100%" height="900" border="0" cellpadding="0" cellspacing="0">
    <tr> 
      <td height="194" colspan="3"><img src="images/head.jpg" width="951" height="194" border="0" usemap="#Map"></td>
    </tr>
    <tr> 
      <td width="20%" valign="top" background="images/fondgauche.jpg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
 
 
etc ....

En partant je crois que si tu désire vraiment un design "fluide" (t'es certain que c'est le bon terme?), tu devra refaire l'arrangement car la c'est pleins de tableau.

Sinon, le mieux ne serait-il pas que tu centre le tableau sur la page et que tu mette un fond de couleur uni (blanc ou noir) ?

[trotters213]

Avant toutes choses, utilisent des div pour faire ta mise en page et surtout pas des tableauxUn bon tuto : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

[Dsphinx]

J'entends bcp parler de tableau, div, css... Mais une disposition en "tableau" par rapport aux "div" est aussi conforme aux normes du W3C alors pourquoi vouloir formater tout le monde a utiliser des div ??? Je sais que la séparation des données et la mise forme est mieux respecté mais combien de site utilisent des div et d'autre des tableaux ??? enfin c'est mon avis...

[FMaz]

Parceque les tableaux ont été concu pour être... des tableaux (de donnée). Pas pour faire des mises en page.

Mais c'est vrai que ca à l'avantage de bien fonctionner.
Les div, ca sera bien dans le futur, mais c'est vrai que c'est pas encore au point pour des design complexe. Ca reste très compliqué, surtout sur la gestion des hauteur. Mais je crois que tu dois toujours ESSAYER de faire le design en DIV, et quand tu pense au suicide, règle le problème avec un tableau.

[zamanika]

Mais une disposition en "tableau" par rapport aux "div" est aussi conforme aux normes du W3C

Attention, ce n'est pas parce qu'une page passe au validateur que ta page est correcte : en gros, le validateur va te dire tes balises sont refermées, bien imbriquées, les attributs utilisés sont corrects etc. Mais le validateur ne renseigne en rien sur la qualité semantique de ton site

Par exemple les balises titres peuvent être mal utilisées et pourtant passeront au validateur : un exemple tout simple avec des titres et sous titres

Code :

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

1
2
3
4
5
<h2>1- mon titre</h2>
<h1>1-1-mon sous titre</h1>
<p>un paragraphe</p>
<h1>1-2-mon deuxième sous titre</h1>
<p>un autre paragraphe</p>

Ca passera au validateur, or on voit bien que la sémantique n'est pas correcte : la balise h1 sert pour les sous titres et h2 pour les titres...

[trotters213]

Avec une mise en page en tableaux ton code est syntaxiquement correct mais sémantiquement faux, or le validateur W3C ne regarde que la syntaxe (presque).

[electronico68]

J'essaie de tous reconstruire en CSS avec le tutorial que vous m'avez donné...
J'ai trouvé un site où le design est fluide mais quand je mais mes images a la place elle se redimenssionnes pas elle se font rogner et selon la résolution elles se rognent plus où moins....

[trotters213]

Montre nous ton code parce que comme ça c'est plutôt compliqué de deviner.

[electronico68]

Désoler, entre les fêtes et le boulot pas le temps d'aller sur l'ordinateur ...

S'il vous plait pouver vous me refaire mon site en css , je n'y arrive vraiment pas

le lien' il faut cliquez sur site.zip)

Merci encore de votre aide consta,te et de vos réponces si rapides

[blueice]

C'est un forum d'entraide, nous ne sommes pas là pour te faire ton boulot.
Très simplement :
Un head, et 3 colonnes, rien de plus simple.

[Dsphinx]

Salut ! Attention blueice, rien n'est simple si l'on ne possède pas les connaissances nécessaires cependant tu as raison on ne fait pas le boulot des autres mais on les aide...

Je propose que tu te reportes à quelques tutoriaux pour faire son site avec des CSS ! Il y a en qqun sur Developpez.com !

Bonne fêtes !

[blueice]

Salut ! Attention blueice, rien n'est simple si l'on ne possède pas les connaissances nécessaires cependant tu as raison on ne fait pas le boulot des autres mais on les aide

Voilà :

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
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
 
<div id="conteneur">
 
	  <div id="header">header</a>
 
</div>
 
	  <div id="haut">
 
			<ul class="menuhaut">
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>
			<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
 
			</ul>
 
	  </div>
 
	  <div id="gauche"><p>menu gauche</p>
	  	<p>largeur fixe : 150px</p>
 
			<ul class="menugauche">
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>
 
			<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			</ul>
 
	  </div>
 
	  <div id="droite"><p>menu droit</p>
	  	<p>largeur fixe : 150px</p>
 
			<ul class="menudroit">
 
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>
			<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			</ul>
 
	  </div>
 
  	<div id="centre">
 
  	  partie centrale avec du texte et du contenu<br />
  	  partie centrale avec du texte et du contenu<br />
  	  partie centrale avec du texte et du contenu<br />
  	  partie centrale avec du texte et du contenu<br />
  	  partie centrale avec du texte et du contenu<br />
 
  	  partie centrale avec du texte et du contenu<br />
partie centrale avec du texte et du contenu<br />
partie centrale avec du texte et du contenu<br />
partie centrale avec du texte et du contenu<br />
partie centrale avec du texte et du contenu<br />
partie centrale avec du texte et du contenu<br />
 
  	  partie centrale avec du texte et du contenu<br />
  	  partie centrale avec du texte et du contenu<br />
  	</div>
 
	  <div id="pied">ton pied de page</div>
</div>

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
81
82
83
84
85
86
87
88
89
 
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 50px;
background-color: #99CCCC;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}
 
.menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
.menuhaut li {
display: inline;
}
.menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menuhaut a:hover {
text-decoration: none;
}
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
.menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
.menudroit li {
margin-bottom: 5px;
}
.menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menudroit a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}