Table HTML qui ne se repositionne pas

[Pang]

Bonjour,

 

Je sais pas comment je me suis débrouillé, mais lorsque je change la taille de la fenêtre d'affichage de mon navigateur, le tableau HTML de ma page perso reste fixe. D'habitude (...) ses dimensions sont adaptées à la fenêtre d'affichage; ici ça le fait pas

 

J'ai certainement dû oublier un truc quelque part, mais je sais pas trop comment ça marche...

 

<table style="text-align: left; width: 1008px; height: 629px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="width: 283px; text-align: center; background-color: rgb(255, 204, 102);">
<div style="text-align: center;">texte texte texte texte etc<br>
</div>

<br>
Encore du texte bla bla bla <br>
<br>
Du texte encore  <br>
TExte bla bla bla; </td>
<td style="width: 414px; text-align: center;"><img style="width: 411px; height: 629px;" alt="lamark" src="lamark_1946.jpg"></td>
<td style="width: 283px;" align="left">
<div style="text-align: center;"><img style="width: 270px; height: 177px;" alt="Simsynth" src="sim.gif"><br>

<br>
</div>
<div style="text-align: center;"><br>
<div style="text-align: center;">Encore du texte dans la troisième colonne<br>
<br>
Toujours du texte dans la troisème colonne<br>
<p>
<embed src="dewplayer.swf?son=/son/lamark.mp3&bgcolor=FFFFFF" quality="high" bgcolor="FFFFFF" name="dewplayer" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="20" width="200"></object></p>
<br>
</div>
</div>
<div style="text-align: center;"><br>
<br>
</div>
<br>
<br>
<br>
<br>
</td>
</tr>
</tbody>
</table>

 

Une solution simple à envisager ?

Modifié le 14 septembre 2009 par Pang

[KewlCat]

Tu as un attribut de style "width" dans chacun de tes éléments, donc il ne faut pas t'étonner que ton tableau ne bouge pas quand tu changes la taille de la fenêtre...

 

Il serait peut-être temps d'utiliser autre chose qu'un tableau pour faire la mise en page, non ?

[Pang]

Tu as un attribut de style "width" dans chacun de tes éléments, donc il ne faut pas t'étonner que ton tableau ne bouge pas quand tu changes la taille de la fenêtre...

, ok...

 

Il serait peut-être temps d'utiliser autre chose qu'un tableau pour faire la mise en page, non ?

Très certainement oui, mais je suis ignorant en la matière.

 

Je voulais simplement avoir une image au milieu de la page, et deux cadres de textes de chaque côté; mais une fois mon image placée au milieu, j'étais pas capable de coller du texte des deux côtés de mon image... alors j'ai utilisé le tableau... bof hein ?

 

Quelle méthode simple dois je utiliser pour faire ça ?

 

-----

 

Accessoirement, j'utilise aujourd'hui Kompozer qui me semblait adapté, mais qui n'arrête pas de planter pour je ne sais quelle raison.

Quel éditeur dans ce genre pourrais je essayer (orienté débutant) ?

[Mickey-3d]

Slt,

 

Je te détail ton probleme, dans ton code tu as donné une valeur fixe à la largeur de ton tableau:

 

<table style="text-align: left; width: 1008px; ...

 

Tu as mis "width: 1008px", donc ton tableau a une lageur de 1008px (pixel), le navigateur affiche donc un tableau de cette largeur et peu importe la taille de la fenetre, si tu souhaite voir ton tableau s'agrandir avec la fenetre donne lui une valeur relative en %, exp: 100%, le tableau prendra alors 100% de largeur de la page, Il va également falloir que tu fasse des modifs sur la taille de tes colonnes.

 

Ca devrait donner quelque chose comme ca (j'ai un peu simplifier ton code):

 

<table border="1" cellpadding="2" cellspacing="2" width="100%" height="629">
<tr>
	<td width="33%" align="center" bgcolor="#FFCC66">
		texte texte texte texte etc<br>
		texte texte texte texte etc<br>
		texte texte texte texte etc<br>
	</td>

	<td  width="33%" align="center" valign="middle">
		<img style="width: 411px; height: 629px;" alt="lamark" src="lamark_1946.jpg">
	</td>

	<td width="33%" align="center">
		<img style="width: 270px; height: 177px;" alt="Simsynth" src="sim.gif"><br>
		texte texte texte texte etc<br>
		texte texte texte texte etc<br>
		texte texte texte texte etc<br>
		<embed src="dewplayer.swf?son=/son/lamark.mp3&bgcolor=FFFFFF" quality="high" bgcolor="FFFFFF" name="dewplayer" allowscriptaccess="sameDomain"
		type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="20" width="200">
	</td>
</tr>
</table>

 

 

Mais je te le dis franchement , tu t'embarque dans une belle galère. Les tableaux servent à faire des tableaux et pas de la mise en page... Pour faire ce type de page tu aurai du utiliser 3 "div" avec des "float left" en CSS. Tu aurai le meme rendu mais avec un code bien plus simple et facil à modifier si besoin et un peu plus dans l'esprit...

 

En ce qui concerne ton editeur web, si j'ai un conseil à te donner de ce coté là, arrete et passe au bloc note (notepad ++), ca va te parraitre bien difficile au début, mais l'avantage c 'est que tu va apprendre les balise et comprendre comment ca marche, et "c'est celui qui a comprit qui sait" !!!!

[Dylav]

Bonsoir Pang,

 

Mickey-3d a tout à fait raison, il est plutôt simple de mettre en œuvre un colonnage avec des balises <div>. Tu trouveras un exemple-joyau ici :

 

Bonus : la souris folle

 

Fameux bonus que cette Souris Folle ! Une page certes pleine d'humour, mais ce n'est pas pour cela que j'attire votre attention sur ce petit rongeur. Une page réalisée par une sommité de Zébulon, mais ce n'est pas pour cela que je voulais l'évoquer dans ce dossier.

 

Non ! Ce que cette page a de remarquable, c'est la pureté de l'écriture et l'élégance de la solution.

 

La pureté de l'écriture ? Eh bien oui, on peut lire le source XHTML, on y voit le plan du discours en 3 parties, on y lit directement le texte. Il n'y manque que la mise en forme.

 

L'élégance, c'est la mise en oeuvre de trois colonnes avec une simple classe, décrite par seulement 3 attributs. Et c'est [presque] tout !

 

Et que voit-on en bas à droite ? Les certificats des validateurs XHTML et CSS... et ils ne sont pas volés !

 

N'hésitez pas à étudier les deux documents,

- "Affichage > Source" pour la page XHTML,

- et là, la feuille de style.

également pour les éditeurs de texte simples : même notepad !

[Pang]

Notepad c'est peut être bien pour quelqu'un qui a les près-requis ce qui n'est pas mon cas.

si tu souhaite voir ton tableau s'agrandir avec la fenetre donne lui une valeur relative en %, exp: 100%, le tableau prendra alors 100% de largeur de la page, Il va également falloir que tu fasse des modifs sur la taille de tes colonnes.

Bien sûr, et j'ai trouvé dans les propriétés de la table : %windows qui permet plus ou moins de corriger le problème, mais quoi qu'il en soit c'est vrai que c'est pas adapté du tout.

 

Je vais essayer de taper ton code à la main voir les changements que ça occasionne.

 

il est plutôt simple de mettre en œuvre un colonnage avec des balises <div>.

Ok, je pense suivre cet exemple à l'avenir

 

J'y retourne ce soir.

 

@ + et merci pour votre aide.

[Mickey-3d]

En fait c'est surtout que j'ai fait la meme erreur que toi quand j'ai commencé à faire des page web, je me suis dis pourquoi apprendre le code alors qu il y a des editeurs, grave erreure car dès qu'on a un probleme on est incapable de la corriger (c est ton cas ton editeur t'as collé des width fixes par rapport à sa page d'edition mais tu ne savais pas où chercher...) dans un premier temps jongle avec les deux, editeur & notepad++ , au fur et à mesure tu va lacher ton editeur...

 

Autre petit conseil, mets tes pages en PHP, ca te change rien niveau programation car tu peux mettre du code HTML dans une page PHP sans rien connaitre au PHP, sauf que ca te permet d'avoir accés aux fonction PHP en plus. Je ne te parle pas là d'attaquer des base de données ou autre choses plus complexe que permet le PHP mais de pouvoir utiliser certaine fonction comme les "includes" qui sont bien pratiques...

 

Coté du code que je t'ai re-travaillé, normalement t as juste a faire un simple copier/coller du tableau et ca doit passer.

[Pang]

C'est bien noté, merci pour tes recommandations.

 

Peux tu m'en dire plus à ce sujet :

mets tes pages en PHP, ca te change rien niveau programation car tu peux mettre du code HTML dans une page PHP sans rien connaitre au PHP, sauf que ca te permet d'avoir accés aux fonction PHP en plus.

Comment on fait pour 'mettre ses pages en PHP' ?

Si tu avais un lien à portée de main expliquant cette démarche ou par quoi commencer, je suis preneur !

Modifié le 16 septembre 2009 par Pang

[Dylav]

Salut Pang,

 

Tu trouveras sur le « Site du ZérO » (“Le site pour débutants où tout est expliqué... à partir de Zéro !”) des tutoriels fort bien faits dont je n'ai entendu dire que du bien. Ils semblent en effet particulièrement didactiques,

- XHTML / CSS pour concevoir et réaliser des pages WEB,

- PHP / MySQL pour leur donner du dynamisme et les appuyer sur une base de données.

 

Mickey-3d n'a en effet pas tort de te parler tout de suite de PHP mais, chaque chose en son temps, je te conseille pour ma part de commencer déjà par maîtriser HTML et les feuilles de style… le reste viendra par surcroît !

[Mickey-3d]

Comment on fait pour 'mettre ses pages en PHP' ?

 

En fait tu n'as pas a faire grand chose. Juste quand tu sauvegarde ta page tu choisis php comme type de fichier et c est bon, tu fais la demarche pour chacune de tes pages, comme ca tout es en php, tu as juste a modifier tes lien dans les pages: au lieu d avoir un lien qui pointe vers "tapage.html" tu met "tapage.php". Ca va rien te changer pour le moment vu que tu utilise que du html mais au moins tu sera pret lorsque que tu aura besoin d un peu de php.

 

Tres bon conseil de Dylav, va sur le site du zero les tutos sont vraiment bien et apprend a bosser avec un fichier css (feuille de style) pour la mise en page. En fait tout ca c'est just des bonnes habitudes a prendre qui te faciliteront ton devellopement web. De toute facon si ca te plait tu y viendra a un moment ou un autre....