comment gerer des div (plutot qu'un tableau) ?

comment gerer des div (plutot qu'un tableau) ? - HTML/CSS - Programmation

Marsh Posté le 08-06-2006 à 16:17:20    

Bonjour,  
 
je dois  faire la refonte d'un site qui actuellement est structuré en tableau
La refonte consiste a respecter les convetnions XHTML  
disposer les elements de la page avec des div pour assouplir la mise en page, et avoir un temps de chargement meilleur
 
Le probleme est le suivant:
la page se décompose en 3 zones:
1 bandeau a droite
1 bandeau a gauche
1 zone de contenu au milieu
 
les bandes doivent se réduire/s'effacer en fonction de la resolutrion de l'ecran.
La zone de contenu doit rester fixer en taille mais doit pouvoir se decaler vers la gauche si on redimentionne.
 
et ce qui bloque c que actuellement les div que j'ai défini avec des CSS, restent fixes au lieu de s'adapter.
 
voici un code de test :
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
  3.   <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  5.   <meta name="generator" content="PSPad editor, www.pspad.com">
  6.   <title></title>
  7. <style type="text/css">
  8. BODY {
  9. margin:0px;
  10. }
  11. #page {
  12. width:100%;
  13. height : 100%;
  14. background-color: #0000FF;
  15. }
  16. #principal {
  17. position:absolute;
  18. width:100%;
  19. height : 95%;
  20. border:1px solid #FF0000;
  21. }
  22. #bord_gauche {
  23. position:absolute;
  24. left:0px;
  25. top: 0px;
  26. width:185px;
  27. height : 100%;
  28. background-color: #EFF6CC;
  29. border:1px solid #000000;
  30. overflow:none;
  31. }
  32. #centre {
  33. position:absolute;
  34. left:186px;
  35. top:0px;
  36. width:910px;
  37. height:90%;
  38. border:1px solid #0000FF;
  39. }
  40. #bord_droit {
  41. position:absolute;
  42. left:1097px;
  43. top: 0px;
  44. width:164px;
  45. height : 100%;
  46. background-color: #EFF6CC;
  47. border:1px solid #000000;
  48. }
  49. </style>
  50.   </head>
  51.   <body>
  52. <div id="page">
  53. <div id="principal">
  54.  <div id="bord_gauche">
  55.  BORD GAUCHE
  56.  </div>
  57.  <div id="centre">
  58.  CENTRE
  59.  </div>
  60.  <div id="bord_droit">
  61.  BORD DROIT
  62.  </div
  63. </div>
  64. </div>
  65.   </body>
  66. </html>

Reply

Marsh Posté le 08-06-2006 à 16:17:20   

Reply

Marsh Posté le 08-06-2006 à 16:20:57    

voui, c'est Le cas particulier dans lequel tu as besoin d'un tableau. Puis tu mets des divs à l'intérieur.

Reply

Marsh Posté le 08-06-2006 à 16:26:56    

cas particulier ?
pourtant c une structuration de page qu'on retrouve tres souvent...

Reply

Marsh Posté le 08-06-2006 à 16:35:29    

tu peut fouiller le forum, il y a moultes discussions sur le sujet, aucune solution CSS pure ne réponds exactement au problème d'avoir des colonnes de même hauteur étirables suivant la plus grande.
Par contre, à l'intérieur de ce tableau, tu peut avoir des colonnes étirables.

Reply

Marsh Posté le 08-06-2006 à 17:55:28    

+1
 
Les tableaux dans certains cas ne sont pas un mal à condition comme dans le cas présent de n'en avoir qu'un et que ces propriétés évidemment soient précisées à l'aide de CSS et non dans le code HTML.

Reply

Marsh Posté le 08-06-2006 à 18:14:24    

en fait le truc c que
si dans ma page html j'ai que la colonne centrale avec un margin left et right en auto, et avec 2 bandes latérales vides qui se réduisent lors du redimetionnement ca marche tres bien, le décalage s'effectue
 
Seulement dans mon cas ces 2 bandes laterales vides doivent etres utilisées pour y integrer des images
 
Donc je sais pas trop comment organiser mon interface de div
pour que les choses suivantes fonctionnent ensemble :
1 - que la colonne centrale se décale bien  
2 - que les bandes latérales s'écrasent bien pendant le décalage
3 - que les bandes latérales contiennent des images au lieu d'etre simplement des espaces vides "non physique" rendus par un margin auto
 
et tout ca sans utiliser le moindre tableau.
 
 
Je sais pas si je suis tres clair.
 
merci si vous avez des idées !
parce que si une solution existe ca me servira énormément.

Message cité 1 fois
Message édité par jokaritaff le 08-06-2006 à 18:16:19
Reply

Marsh Posté le 08-06-2006 à 18:28:56    

jokaritaff a écrit :

en fait le truc c que
si dans ma page html j'ai que la colonne centrale avec un margin left et right en auto, et avec 2 bandes latérales vides qui se réduisent lors du redimetionnement ca marche tres bien, le décalage s'effectue
 
Seulement dans mon cas ces 2 bandes laterales vides doivent etres utilisées pour y integrer des images
 
Donc je sais pas trop comment organiser mon interface de div
pour que les choses suivantes fonctionnent ensemble :
1 - que la colonne centrale se décale bien  
2 - que les bandes latérales s'écrasent bien pendant le décalage
3 - que les bandes latérales contiennent des images au lieu d'etre simplement des espaces vides "non physique" rendus par un margin auto
 
et tout ca sans utiliser le moindre tableau.
 
 
Je sais pas si je suis tres clair.
 
merci si vous avez des idées !
parce que si une solution existe ca me servira énormément.


 
Quel est le but de ne pas utiliser DU TOUT de tableau si c'est au final pour avoir un truc bancal avec pleins de divs inutiles + des hacks CSS dont la pérénité sera plus que douteuse ?  :o  

Reply

Marsh Posté le 08-06-2006 à 20:09:00    

le but est de:
- alleger le plus possible le code HTML
- un meilleur referencement
- démontrer que c'est possible a faire (OpenWeb le fait sous diverses formes)
 
disons que je veux vraiment une structure de base en DIV
Apres dans le contenu, les articles, les menus etc...
je les arrangerai probablement en tableau

Reply

Marsh Posté le 08-06-2006 à 20:23:32    

jokari34 a écrit :

le but est de:
- alleger le plus possible le code HTML
- un meilleur referencement
- démontrer que c'est possible a faire (OpenWeb le fait sous diverses formes)
 
disons que je veux vraiment une structure de base en DIV
Apres dans le contenu, les articles, les menus etc...
je les arrangerai probablement en tableau


 
j aurais plutot fait l inverse c est marrant
surtout si tu veux alleger ton code  :sweat:  
pour le referencement je crois bien que les spiders s en cognent  
et openweb l a prouvé a ta place :d

Reply

Marsh Posté le 08-06-2006 à 20:29:11    

jokari34 a écrit :

le but est de:
- alleger le plus possible le code HTML


 
Dans ton cas, ça va alourdir le code.
 

Citation :

- un meilleur referencement


 
C'est pas une table dans ton code qui va changer quoi que ce soit au référencement.
 

Citation :


- démontrer que c'est possible a faire (OpenWeb le fait sous diverses formes)


 
Ben non, dans ton cas, c'est pas possible à faire à moins de ruser comme un malade, d'utiliser des hacks etc... etc... pour finallement avoir un résultat bancal.
 

Citation :

disons que je veux vraiment une structure de base en DIV
Apres dans le contenu, les articles, les menus etc...
je les arrangerai probablement en tableau


 
C'est exactement le contraire qu'il faut faire dans ton cas : N'avoir qu'un seul tableau pour les colonnes et ensuite n'utiliser que des divs (sauf cas de données tabulaires bien sûr).
 

Reply

Marsh Posté le 08-06-2006 à 20:29:11   

Reply

Marsh Posté le 08-06-2006 à 20:33:44    

jokari34> laisse tomber
 
C'est, comme on te le propose, le contraire qu'il faut faire: utiliser un tableau global, et des divs à l'intérieur.

Reply

Marsh Posté le 08-06-2006 à 20:38:15    

mIRROR a écrit :

j aurais plutot fait l inverse c est marrant
surtout si tu veux alleger ton code  :sweat:  
pour le referencement je crois bien que les spiders s en cognent  
et openweb l a prouvé a ta place :d


 
Les mises en pages sans tableau c'est le bonheur absolu, il est vrai que l'on se fait chier au départ et qu'on applique des hacks, mais pour changer la mise en page c'est le bonheur :o
Le html fait sémantiquement c'est bien, c'est même bien pour les moteurs de recherche, pour les lecteurs d'écran, et c'est bien quand tu fais du Javascript par le DOM, tu parcoures les éléments et paf, c'est tout magique [:dawa]
 
Et ça allège fortement le code et ça le rend surtout plus lisible et plus propre quand on le fait correctement


---------------
Blablaté par Harko
Reply

Marsh Posté le 08-06-2006 à 20:43:51    

pour faire des colonnes il existe display: table/table-cell/table-row et compagnie ... apres qu'IE soit LE SEUL navigateur qui ne sache pas de quoi ca parle c'est un probleme dont ne devrait pas avoir a se soucier :D
 
edit : http://wiki.media-box.net/documentation/css/display

Message cité 1 fois
Message édité par afbilou le 08-06-2006 à 20:56:27
Reply

Marsh Posté le 08-06-2006 à 20:52:04    

gatsu35 a écrit :

Les mises en pages sans tableau c'est le bonheur absolu, il est vrai que l'on se fait chier au départ et qu'on applique des hacks, mais pour changer la mise en page c'est le bonheur :o


 
Même pas. Dans son cas, tout changement de mise en page sera un cauchemard surtout quand on considère les divs totalement inutiles qu'il devra utiliser...
 

Citation :

Le html fait sémantiquement c'est bien, c'est même bien pour les moteurs de recherche, pour les lecteurs d'écran, et c'est bien quand tu fais du Javascript par le DOM, tu parcoures les éléments et paf, c'est tout magique [:dawa]


 
Oui. Mais dans son cas, l'utilisation des divs n'aura rien de sémantique. On sait parfaitement que les ruses qu'il faut utiliser pour avoir 3 colonnes qui s'allongent mutuellement en fonction des deux autres reposent non seulement sur des hacks CSS, mais aussi sur des divs suplémentaires qui ont des fonctions complêtement détournées et plus du tout sémantiques.
 

Citation :

Et ça allège fortement le code et ça le rend surtout plus lisible et plus propre quand on le fait correctement


 
Oui, mais pas dans son cas. [:spamafote]
 
Dans son cas, ça alourdit le code et ça le rend moins lisible. [:spamafote]

Reply

Marsh Posté le 08-06-2006 à 21:10:53    

gatsu35 a écrit :

pour changer la mise en page c'est le bonheur :o


 
bah franchement jusque la j ai toujours tout fait en divs
et dernierement j ai eu exactement le meme probleme
et au bout de quelques heures sans solution bah tu reviens vite a ta table
le site d openweb lé bien beau mais avec deux colonnes et sur fond blanc
le site du w3c est tellement gavé de liens que forcement les trois colonnes touchent le sol mais la c est juste la gravité :/
 
donc j ai peut etre choisi la facilité mais bon [:spamafote]

Reply

Marsh Posté le 08-06-2006 à 21:13:48    

afbilou a écrit :

pour faire des colonnes il existe display: table/table-cell/table-row et compagnie ... apres qu'IE soit LE SEUL navigateur qui ne sache pas de quoi ca parle c'est un probleme dont ne devrait pas avoir a se soucier :D
 
edit : http://wiki.media-box.net/documentation/css/display


 
remarque gatsu avait déniché un hack pas mal pour ca ^^
 
edit
tu crois que ca marche le hasLayout pour ca ?
(je vais tester tiens ^^)

Message cité 1 fois
Message édité par mIRROR le 08-06-2006 à 21:15:20
Reply

Marsh Posté le 08-06-2006 à 21:15:02    

Je suis tout à fait d'accord qu'il faut plus d'un DIV pour reussir une mise en page de warrior au niveau graphique.
 
c'est le cas actuellement, on refait la refonte du site d'un gros gros client, et on fait tout en CSS, ben on a quand même un systeme de base en tableau et derriere il y a une grosse quantité de DIV :(, malheureusement à l'heure actuellement on ne peut pas faire mieux, mais les CSS c'est clairement de la balle pour la simplification du taf lorsque tu fais du cheuteumeuleu


---------------
Blablaté par Harko
Reply

Marsh Posté le 08-06-2006 à 21:19:08    

mIRROR a écrit :

remarque gatsu avait déniché un hack pas mal pour ca ^^


des hacks et des merdes sur les CSS j'en découvre tous les jours, depuis bientot 3 mois je fais du HTML et des CSS (surtout des CSS 8h par jour) sous FF, IE et Safari (opera n'est pas encore à l'ordre du jour)
et je peux te dire que des bugs et d'autres joyeuseté tu en rencontre tous les jours.
 
par exemple :  

Code :
  1. <div class="divtotable">
  2. <form style="display:table">
  3. <input type="text" value="mon formulaire s'affiche pas sous SAFARI">
  4. </form>


sous Safari, si le champ père est en display:table, le formulaire fils ne s'affiche pas [:dawa], super :o
 
et d'autres exemples joyeux comme le principe du layout ((lien) (merci masklinn pour le tuyau) qui me permet de me sauver de bien des situations tordus sous IE
genre : rien que le fait de forcer le layout sur un élément, me permet de l'afficher sous IE (il ne s'affiche pas sinon [:dawa]


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed