Standards Web Vs Tableaux

[NiGhMa]

Bonjour,

Voilà, je suis débutant dans 'Les Standards du Web' et je ne vois pas comment je peux faire ce que je fait avec les tableaux en utilisant les CSS.

Je m'explique :

Il m'arrive souvent d'employer la technique des tableaux afin d'avoir une en-tête ou un pied de page toujours bien fait sans me soucier de la taille (largeur) de l'écran/la fénêtre de l'internaute.

Voici un exemple un peu plus clair (je pense) :

<table width="100%"cellpadding="0" cellspacing="0">

	<tr>
  <td>
 	 <img src="/images/header_01.jpg" width="432" height="158" alt=""></td>
  <td width="100%">
 	 <img src="/images/header_03.jpg" width="100%" height="158" alt=""></td>
  <td>
 	 <img src="/images/header_05.jpg" width="330" height="158" alt=""></td>
	</tr>
</table>

Dans ce cas ci, l'image 'header_03.jpg' fait réellement 1 pixel de large et en utilisant un tableau en 100% l'image est automatiquement étirée.

Ce que j'aimerais faire, c'est avoir le même résultat mais en utilisant les standards.

Quelqu'un pourrait-il m'y aider ?

Merci

Modifié 7 Mars 2005 par NiGhMa

[mathieu147]

Je te suggère de regarder sur OpenWeb, ça devrait beaucoup t'aider.

[NiGhMa]

Il y a en effet beaucoup de choses intéressantes sur ce site surtout pour un débutant comme moi dans le domaine. Je promets de le lire au fur et à mesure de ma progression dans le domaine des standards du web.

En attendant, y aurait-il un exemple de ce que je cherche à faire afin que je puisses essayer de le comprendre ?

Merci

[jpv]

Pour pouvroi répondre à ta question il faudrait avoir l'exemple visuel de ce que tu veux faire.

CSS est un langage qui permets d'utiliser plusieurs techniques différentes pour le même effet, en fonction de ce que que tu veux obtenir.

Dans ton cas il faudrait au moins savoir de quoi est constitué ton image, fond unis, motifs répétés quel est son rôle dans le design et ses contraintes par rapport aux images du dessus et du dessous.

Sinon, pour apporter un élément de réponse le dimensionnement relatif d'une image est parfaitement conforme et tu n'à donc rien à changer.

Le problème est différent si tu veux te débarasser des tableaux de mises en pages, ce qui va nécessiter de repenser ta mise en page.

Faut d'en savoir plus, peux pas en dire plus...

JP

[NiGhMa]

Ah oui voici un petit exemple simple

Merci

Modifié 8 Mars 2005 par NiGhMa

[MarvinLeRouge]

Salut,

Si tu souhaites obtenir que ton fond rayé se répète sur toute la largeur de la page, en le collant en haut, c'est extrêmement simple. Il te suffit de rajouter la règle suivante à ton css :

body
{
  background : url("images/header_03.jpg") top left repeat-x;
}

De façon générale (je peux te le dire puisque je suis en train de refaire en css un site en tableaux de plus de 100 pages), la mise en page par css est :

- plus simple à comprendre

- plus simple à modifier

- plus légère en poids de page d'environ 50%

NB : Ne cherche pas à rayer la mention inutile : il n'y en a pas

[Nullette]

Bonjour MarvinLeRouge,

comment tu procèdes concrètement pour refaire un site en tableaux de plus de cent pages ? Tu commences par préparer le fichier css et après tu recopies le texte sur des pages sans tableaux ?

[Portekoi]

Salut,

Je vais surement passer pour un troll mais bon...

<ModeTroll: On>

la mise en page par css est :

- plus simple à comprendre

- plus simple à modifier

- plus légère en poids de page d'environ 50%

Plus simple à comprendre que les tableaux? Non je ne suis pas d'accord. Faut pas sortir de Saint Cyr pour comprendre les Tableaux

Plus simple à modifier? Oui si tu fais une page en tableau sans aucun CSS et sans includes sinon nan, c'est simple à changer...

Plus léger? Oui encore que certains pondent des feuilles de style très très conséquentes...

Le CSS, c'est très bien mais les "table", pour ne citer qu'eux, ne sont pas interdis par la norme w3c et certains ont tendance à l'oublier.

<ModeTroll: Off>

Bye

Portekoi

Modifié 8 Mars 2005 par portekoi

[NiGhMa]

Le CSS, c'est très bien mais les "table", pour ne citer qu'eux, ne sont pas interdis par la norme w3c et certains ont tendance à l'oublier.

<{POST_SNAPBACK}>

Tout à fait d'accord avec toi mais d'après ce que j'ai lu les tableaux ne sont pas fait pour aligner le design du site mais plutôt pour présenter des données qui ont toute leur importance dans un tableau.

Je me trompe ?

[NiGhMa]

Salut,

Si tu souhaites obtenir que ton fond rayé se répète sur toute la largeur de la page, en le collant en haut, c'est extrêmement simple. Il te suffit de rajouter la règle suivante à ton css :

body
{
  background : url("images/header_03.jpg") top left repeat-x;
}

De façon générale (je peux te le dire puisque je suis en train de refaire en css un site en tableaux de plus de 100 pages), la mise en page par css est :

- plus simple à comprendre

- plus simple à modifier

- plus légère en poids de page d'environ 50%

NB : Ne cherche pas à rayer la mention inutile : il n'y en a pas

<{POST_SNAPBACK}>

Merci avec ca et les articles que je viens de lire je peux arriver à ce que je cherche. Merci.

[Portekoi]

Lu,

A dire vrai je ne sais pas mais les tableaux remplissent les 2 fonctions sans soucis et sans être "hors la loi"... donc en même temps, qu'ils aient été concu pour telle ou telle raison.... du moment que tu peux faire un site oueb avec

<ModeTroll: On>

Et internet a été concue pour l'armée américaine alors faut pas l'utiliser

<ModeTroll: Off>

Troll Power

[NiGhMa]

Pour en revenir au sujet principal. Je viens de faire un test

Comme vous pouvez le constater j'ai un petit problème de largeur. Je rapelle aussi que ce que je cherche à faire, c'est bien de ne pas définir la largeur de l'image 'header_03' afin quelle puisse s'étendre sur tout le place qui lui reste.

Une idée ?

[MarvinLeRouge]

_AT_NighMa :

1) Tu devrais essayer ce que je t'ai donné : ça marche nickel pour avoir un fond rayé en haut de ta page.

2) Tu as mis tes éléments en float. Ils occupent donc juste la largeur nécessaire, sauf si tu précises leur largeur. Je te recommande néanmoins d'inclure ton image dans la balise header (dans la mesure où elle en fait bien partie, bien entendu).

_AT_portekoi : cette discussion a déjà eu lieu un certain nombre de fois et déclencherait à coup sûr un troll, je ne répondrai donc pas - soit dit sans aucune animosité, je précise - .

_AT_Nullette :

1) Tu t'organises

2) Tu t'organises

3) Tu t'organises

Ceci inclut la structuration des css, la structuration des pages, tes méthodes de travail. En l'occurence, je suis sur un cas plutôt favorable, puisque le site sur lequel je travaille est déjà très structuré par nature.

[Nullette]

@Nullette :

1) Tu t'organises

2) Tu t'organises

3) Tu t'organises

Ceci inclut la structuration des css, la structuration des pages, tes méthodes de travail. En l'occurence, je suis sur un cas plutôt favorable, puisque le site sur lequel je travaille est déjà très structuré par nature.

<{POST_SNAPBACK}>

J'espèrais que tu m'expliques comment m'organiser Mon site étant mal structuré

Merci quand même de m'avoir répondu.

[MarvinLeRouge]

1) La structure du site : tu regroupes tes pages par thèmes, catégories (éventuellement sous-catégories au besoin)

2) Les pages : essaie de faire modulaire

3) css : va toujours du plus général (ex. : tous tes liens seront en gras bleu Verdana) au plus spécifique (ex. : le lien x dans la page y sera en Times pas gras, mais italique et rouge, avec un line-height à 2em). Essaie également de décomposer tes css de façon cohérente (ex. : les règles de disposition du contenu, puis les règles de polices, puis le reste).

4) Quel que soit le code traité, que ce soit du html, du css ou quoi que ce soit d'autre : COMMENTE; c'est la clé de la maintenabilité