Auteur Sujet: Xhtml Et Tableau...  (Lu 10291 fois)

0 Membres et 1 Invité sur ce sujet

Hors ligne Nepher

  • Habitué
  • **
  • Messages: 196
    • http://www.warhammer-forum.com
Xhtml Et Tableau...
« le: 03 août 2003 à 00:12:20 »
Salut à tous...

Voilà, donc j'avais comme idée première de refaire mon site en 100% XHTML 1.1... et avec la sérieuse intention de me passer des tableaux pour la mise en page, histoire de pouvoir skinner à volonter en changeant la css. Seulement voilà, j'ai des petits problèmes, la nouvelle version comporte une en-tête, pis un contenu en 3 colonnes (menu / contenu / infos pratiques) et enfin un pied de page. Ma volonté était que le menu, qui possède un arrière-plan, s'étire sur toute la longueur du contenu central. Mais après des heures de travail et de recherche, ben je ne suis parvenu à aucun résultat convaincant... pas moyen d'arriver à ce que deux DIV côtes à côtes s'ajustent automatiquement pour avoir la même longueur...

Ma question est donc : les DIV peuvent-ils remplacer les tableaux dans 100% des cas, ou bien alors c'est juste un truc qui fait bien, mais qui ne remplace pas le bon vieux tableau ?

XHTMLlement votre...

Hors ligne alex

  • VIP
  • *****
  • Messages: 1 915
Xhtml Et Tableau...
« Réponse #1 le: 03 août 2003 à 00:31:00 »
Juste un (excellent) exemple => http://www.csszengarden.com/

(Merci à je-sais-plus-qui)

Hors ligne Anubis

  • Habitué
  • **
  • Messages: 161
    • http://
Xhtml Et Tableau...
« Réponse #2 le: 03 août 2003 à 00:54:50 »
Citer
Juste un (excellent) exemple => http://www.csszengarden.com/

(Merci à je-sais-plus-qui)
 :D  
virtual void Life[span style=\'color:purple\']() = 0;[/span]

Genezys, humeurs d'un codeur
ChuWiki, le wiki simple et facile
Le lynx et autre félins (j'ai seulement fait les designs ^^)

Hors ligne Anubis

  • Habitué
  • **
  • Messages: 161
    • http://
Xhtml Et Tableau...
« Réponse #3 le: 03 août 2003 à 01:02:18 »
CssZenGarden est une bonne réponse. Oui le tableau peut totalement être oublié pour le design, ce n'est pas fait pour ça et il existe d'autres outils (prévus à la base) pour faire du design.

Le problème étant qu'il faut « réapprendre » à faire des designs, et ce n'est pas forcément simple, mais de plus en plus de gens sont doués et pourront t'aider.

Maintenant je te conseille les sites suivants :

http://openweb.eu.org (site généraliste sur les standards web)
http://www.glish.com/css/ (positionnement sans tableaux - de bons templates 2, 3 colonnes)
http://www.pompage.net/liste/ (la mailing-liste qui sera vraiment en mesure de répondre à tes questions sur ce sujet - dont je fais partis)

PS : J'espérais que PhpNet serait aussi motivé que toi pour le redesign de leur page d'acceuil mais j'ai pas de nouvelles :-(.

 
virtual void Life[span style=\'color:purple\']() = 0;[/span]

Genezys, humeurs d'un codeur
ChuWiki, le wiki simple et facile
Le lynx et autre félins (j'ai seulement fait les designs ^^)

Hors ligne Nepher

  • Habitué
  • **
  • Messages: 196
    • http://www.warhammer-forum.com
Xhtml Et Tableau...
« Réponse #4 le: 03 août 2003 à 03:28:22 »
Merci pour ce complément d'informations, mais dans tout ce que j'ai vu, les pages sont moins larges que la valeur réelle de la résolution... et c'est justement ce problème que je cherche à éviter... évidemment qu'il est simple de définir à la main la dimension des pages, moi je voudrais que les pages s'adaptent toutes seules à la résolution... donc que ma page fasse 100% de large sur 100% de haut, mais qu'en plus, si la page est plus longue que 100%, que le menu puisse s'étirer (dumoins son arrière plan, pour faire une colonne colorée)... et là, je n'ai pas encore trouvé de réponse satisfaisante...

Et d'après mes recherches, celà n'est pas possible, car une DIV ne peut tout simplement pas prendre la même taille qu'une autre... alors que deux cellules d'un tableau le peuvent... en effet, si une cellule est plus étirée que l'autre, tout le tableau s'étire, et donc forcément, la première aussi... ce n'est pas le cas des DIV, car leur mode de superposition leur permet de ne pas dépendre d'un conteneur... dumoins pas en float... et là est mon problème...

Enfin bon, si je trouve, je vous dirai quoi, mais j'ai énormément de doutes, les DIV ont du mal à s'adapter d'une résolution à l'autre, et j'ai horreur de faire un site designé pour un type de résolution... pcq une DIV de 700 de large, ca rend bien en 800x600... mais que c'est laid en 1024, et je ne vous dit même pas au dessus... ca parait minuscule, ce petit bout de texte dans une page vide... ben c'est pareil pour les menus... quand on scroll, et que le menu disparait, ben il laisse une grande place vide à gauche, un blanc... et je n'aime pas ça, donc je voudrais combler ce blanc avec le prolongement du fond du menu....

Bonne chance à tous pour trouver la solution.

Hors ligne Anubis

  • Habitué
  • **
  • Messages: 161
    • http://
Xhtml Et Tableau...
« Réponse #5 le: 03 août 2003 à 13:51:01 »
Les DIVs sont clairements la solution pour un design Liquid. Tu peux très bien utilisé comme unités de mesure l'em (hauteur de ligne), l'ex (largeur de la lettre x) ou encore le % (pourcentage du parent).

Sur le design que j'avais fait pour PhpNet, le menu ET le contenu s'adaptait en largeur en fonction de la résolution en utilisant des pourcentage.
virtual void Life[span style=\'color:purple\']() = 0;[/span]

Genezys, humeurs d'un codeur
ChuWiki, le wiki simple et facile
Le lynx et autre félins (j'ai seulement fait les designs ^^)

Hors ligne Nepher

  • Habitué
  • **
  • Messages: 196
    • http://www.warhammer-forum.com
Xhtml Et Tableau...
« Réponse #6 le: 03 août 2003 à 15:57:09 »
Non non, je m'explique... dans ton design, le menu à gauche ok ? Bon, tu lui mets un fond coloré par exemple. Ensuite imagine le DIV de droite, avec le contenu... S'il est plus long que le menu, ben la couleur de fond du menu ne va pas s'étirer pour faire toute la hauteur du texte....

Ainsi supposons l'include du contenu... une fois il fait une dizaine de ligne, et une autre fois une centaine (un récit par exemple)... bon, et bien je voudrais que dans les deux cas, la couleur de fond du menu aille depuis le haut du contenu, jusque tout en bas... et ce même si le nombre de lignes change... et ça c'est impossible...

La largeur n'est pas vraiment le problème, c'est surtout la longueur, et le fait qu'une div ne puisse pas adapter sa hauteur par rapport à une autre, de sorte que la taille de chacune des deux soit identique, et que cette taille valle celle de la plus grande des deux DIV... je sais pas si c'est très clair... En gros, avec comparaison d'un tableau... :

2 cellules verticales. La cellule de gauche doit mesurer 160px de large, ni plus ni moins, et ce pour toutes les résolutions, pas question de pourcentage. La cellule de droite occupe le reste de la largeur de la page.
La cellule de gauche possède un fond qui se répète, et celle de droite possède un fond blanc. Si le texte est très long, la cellule de gauche, le menu, s'étire, et le fond se répète de façon que partout à gauche du texte principal, il y ait une bande de couleur, et pas un vide...

Si c'est toujours pas clair, je mettrai un exemple en image...
« Modifié: 03 août 2003 à 15:58:20 par Nepher »

Hors ligne Anubis

  • Habitué
  • **
  • Messages: 161
    • http://
Xhtml Et Tableau...
« Réponse #7 le: 03 août 2003 à 22:12:52 »
Citer
Ainsi supposons l'include du contenu... une fois il fait une dizaine de ligne, et une autre fois une centaine (un récit par exemple)... bon, et bien je voudrais que dans les deux cas, la couleur de fond du menu aille depuis le haut du contenu, jusque tout en bas... et ce même si le nombre de lignes change... et ça c'est impossible...
Ok donc en résumé, tu veux que les boîtes de ton menu et de ton contenu soient toujours de la même hauteur et que les deux « arrivent en bas » au même niveau ?

Bah c'est tout à fait possible, puisque j'ai vu passer cette question sur la liste Pompeurs (citée ci-dessus) avec pas mal de solutions, mais je me suis pas intérressé au thread donc je peux pas te donner de solution :-(.

Et à l'avenir, je te conseille de ne pas dire qu'un design est impossible avant de réellement savoir de quoi tu parles. Tu évoques tout de même des outils qui sont en conception par des designers web depuis 1999. Je pense que beaucoup ont déjà rencontré ton problème, et qu'ils l'ont résolus.
virtual void Life[span style=\'color:purple\']() = 0;[/span]

Genezys, humeurs d'un codeur
ChuWiki, le wiki simple et facile
Le lynx et autre félins (j'ai seulement fait les designs ^^)

Hors ligne Penelope

  • Habitué
  • **
  • Messages: 212
    • http://
Xhtml Et Tableau...
« Réponse #8 le: 04 août 2003 à 10:03:15 »
Je suis pas sûre d'avoir bien compris ton problème.  :huh:
Mais si ce que j'ai compris est juste, il me semble que tu devrais rajouter un div pour contenir les deux "cellules" verticales.
La hauteur de ce div sera celle de la cellule la plus grande en hauteur. Et pour l'autre cellule, il suffit de mettre une hauteur à 100% pour qu'il s'adapte.

 
[color=ff9999]Cordialement, Penelope [/color]

Hors ligne Anubis

  • Habitué
  • **
  • Messages: 161
    • http://
Xhtml Et Tableau...
« Réponse #9 le: 04 août 2003 à 12:06:40 »
Malheureusement cela ne fonctionne pas. Selon les spécifications CSS2, spécifer une hauteur à 100% permet de donner à la boîte la même taille que son parent si celui-ci a déjà une taille spécifié ce qui n'est pas le cas ici, puisque la taille est en fonction de la longueur du texte.

Par contre, pour ton menu, je pense avoir trouvé une solution.

<div id='Article'>
  <div id='Contenu'>
    <!-- Le contenu de l'article  -->
  </div>

  <div id='Menu'>
    <!-- Le menu  -->
  </div>
</div>

Il te suffit ensuite de faire flotter ton contenu à droite pour que le menu remonte à gauche

#Contenu
{
  float: right;
  width: 75%;
}
#Menu
{
  margin-left: 75%;
}

Ensuite tu pourras mettre les styles que tu veux sur les boites. Pour styler ton contenu, il faut les mettre dans #Contenu, et styler ton menu sur toute la heuteur, il faut les mettre dans #Article  et pas dans #Menu !!!! car #Article a bien la même hauteur que #Contenu.
virtual void Life[span style=\'color:purple\']() = 0;[/span]

Genezys, humeurs d'un codeur
ChuWiki, le wiki simple et facile
Le lynx et autre félins (j'ai seulement fait les designs ^^)

Hors ligne Nepher

  • Habitué
  • **
  • Messages: 196
    • http://www.warhammer-forum.com
Xhtml Et Tableau...
« Réponse #10 le: 04 août 2003 à 13:43:17 »
le problème est qu'alors mon contenu ne fera jamais que 75% de la largeur de la page, or je voudrais qu'il fasse 100% - 160 px, donc la largeur du menu... et le menu doit impérativement faire 160px, pcq il possède une image de fond qui fait 160 px de large, et qui ne peut se répéter que verticalement, pas horizontalement...

De toute façon, en xhtml, les tableaux peuvent encore être utilisés... et donc je crois que je vais continuer à les utiliser, pcq là ça me casse la tête pour un résultat qui ne me plait pas...

Hors ligne Gitanjali

  • Débutant
  • *
  • Messages: 21
Xhtml Et Tableau...
« Réponse #11 le: 04 août 2003 à 17:23:04 »
Citer
De toute façon, en xhtml, les tableaux peuvent encore être utilisés... et donc je crois que je vais continuer à les utiliser, pcq là ça me casse la tête pour un résultat qui ne me plait pas...

Trés mauvaise idée.
Poste plutôt un lien vers ta page ça sera plus simple pour t'aider.

-Gitanjali.

Hors ligne Anubis

  • Habitué
  • **
  • Messages: 161
    • http://
Xhtml Et Tableau...
« Réponse #12 le: 04 août 2003 à 17:30:11 »
Le code que tu dois mettre :

<div id='Article'>
  <div id='Menu'>
    <!-- Le menu  -->
  </div>

  <div id='Contenu'>
    <!-- Le contenu de l'article  -->
  </div>
</div>

#Menu
{
  float: left;
  width: 160px;
}
#Contenu
{
  padding-right: 160px;
}
#Article
{
  background: url('MonImagePourLeMenu')
}

Je ne le répèterais jamais assez, les tableaux ne sont pas faits pour faire du design ! Ils ont été créé pour présenter des données tabluaires, et ne doivent être utiliser que pour ça !
virtual void Life[span style=\'color:purple\']() = 0;[/span]

Genezys, humeurs d'un codeur
ChuWiki, le wiki simple et facile
Le lynx et autre félins (j'ai seulement fait les designs ^^)

Hors ligne Nepher

  • Habitué
  • **
  • Messages: 196
    • http://www.warhammer-forum.com
Xhtml Et Tableau...
« Réponse #13 le: 04 août 2003 à 18:21:05 »
Bon, voilà alors l'image, ca ira nettement plus vite effectivement...



Bien sur ce n'est pas complet, il y a encore des cellules plus bien qui viennent se caser en dessous du contenu, à droite du menu.

Hors ligne maverick78

  • VIP
  • *****
  • Messages: 2 601
    • http://www.clan-ck.com
Xhtml Et Tableau...
« Réponse #14 le: 04 août 2003 à 18:25:36 »
impossible tu penses ? http://www.clan-ck.com/new/
La force est dans la céréale
Clan cereal-killer : http://www.clan-ck.com

Ne te demande pas ce que ton pays peut faire pour toi mais plutôt ce que tu peux faire pour ton pays...(JF Kennedy)