[W3C] Design fluide ?

Version imprimable

17/12/2006, 10h29
electronico68

[W3C] Design fluide ?

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

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é...:cry: :mur: :evil:
Voici les fichiers (il faut cliquer sur HTML.zip) du kit graphique.

Merci encore:D :D :D

Code:

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) ?

18/12/2006, 08h59
trotters213

:salut:
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/
18/12/2006, 11h48
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... ;)
18/12/2006, 17h22
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.
18/12/2006, 19h29
zamanika
Citation:

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:

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...
19/12/2006, 08h43
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).
20/12/2006, 18h36
electronico68

Reconstruir tout en css...

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....8O 8O 8O
:help: :help: :help: :help:
:merci: :D :D :D
21/12/2006, 08h25
trotters213

Montre nous ton code parce que comme ça c'est plutôt compliqué de deviner.
26/12/2006, 20h59
electronico68

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

S'il vous plait pouver vous me refaire mon site en css:oops: :oops: :oops: , je n'y arrive vraiment pas:pleure: :pleure: :pleure:
:help: :help: :help:
le lien' il faut cliquez sur site.zip)

Merci encore de votre aide consta,te et de vos réponces si rapides:mrgreen: :mrgreen: :mrgreen:
26/12/2006, 23h11
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.
27/12/2006, 07h08
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 !

Citation:

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:

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:

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