Une question au sujet des divs...

Une question au sujet des divs... - HTML/CSS - Programmation

Marsh Posté le 20-12-2003 à 12:09:15    

Voilà, dans le cadre du forum que je compte reprendre, je me pose certaines questions...
 
Il est évident que je vais devoir utiliser au moins une table pour les données tabulaire du forum (message, nombre de posts, drapals etc...)
 
Pour le reste, il serait peut être pas mal d'utiliser uniquement les divs. Pourtant pour des choses idiotes comme :
 
[motif]une ligne de titre[motif], nous avons donc, un titre avec une décoration à gauche et à droite. Avec des divs, il suffit d'utiliser un float left. Mais imaginons maintenant que cette ligne de titre soit dynamique. Elle ne fera jamais la même longueur donc. SI cette ligne dépasse la taille de l'écran, les éléments ne resteront plus sur la même ligne et se supperposeront. Vous allez me dire : englobe le tout dans un div plus grand auquel tu fixes une taille... Ben oui, mais moi ce qui m'intéresse justement, c'est qu'il n'y ai pas de taille fixe, puisqu'un forum fonctionne avec des %. Dans le cas d'une table, celle-ci est UN élément DANS LESQUEL se trouve des cellules qui ne se supperposeront jamais.  
 
Voyez vous une solution ?
 
Pensez vous que les divs ne sont pas finalement réservé à un usage en absolut quand on veut faire des présentations un peu complexe, mais que pour ce qui est du relatif, les ruses à employer deviennent plus lourdes que l'emploi d'une unique table ?

Reply

Marsh Posté le 20-12-2003 à 12:09:15   

Reply

Marsh Posté le 20-12-2003 à 12:14:41    

Tant que j'y suis, une autre question :
 
Une des originalités de mon forum, est que son adresse sera elle aussi dynamique, en clair, on pourra intégrer le forum dans le div d'une page déjà existante (ou n'importe où ailleurs).
 
Oui, mais cela pose un problème :
 
Quand le forum prend toute la page, les marges du forum peuvent aisément être définies par le padding du body. Mais dans mon cas non.
 
Hors, comme la précédente question l'a montré, pas question de définir une largeur. La largeur du forum est égale à 100% du contenant moins les marges.
Un div avec un padding ne fonctionnera pas, puisque ce padding sera interprêté différemment suivant IE, Mozilla etc... et tantôt ajouté aux 100%, tantôt inclu dedant.
 
Je pourrais ne pas raisonner en terme de % et utiliser 2 divs imbriqués l'un dans l'autre (une ruse quoi) et utiliser les % uniquement au sein du 2° div conteneur. Oui, mais si jamais le supra-conteneur du forum (je rappelle que mon forum pourra être inclu dans un élément) est en absolute, tout tombe à la flotte...
 
Solution ?

Reply

Marsh Posté le 20-12-2003 à 13:44:11    

J'aime bien qu'on me tape dessus, mais selon moi un forum regroupe des données tabulaires, à structurer avec un tableau.
 
EDIT : en fait en y réfléchissant je ne suis pas sûr d'avoir répondu à une des questions !  :pt1cable:


Message édité par sibelius le 20-12-2003 à 13:45:13

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 20-12-2003 à 13:56:58    

SIBELIUS a écrit :

J'aime bien qu'on me tape dessus, mais selon moi un forum regroupe des données tabulaires, à structurer avec un tableau.
 
EDIT : en fait en y réfléchissant je ne suis pas sûr d'avoir répondu à une des questions !  :pt1cable:  


 
Effectivement, tu n'as répondu à aucune des 2 questions.  [:totozzz]  Il est clair que les messages et autres données tabulaires seront dans une table. Je parle de tout le reste ;)

Reply

Marsh Posté le 20-12-2003 à 14:10:59    

Hermes le Messager a écrit :

[motif]une ligne de titre[motif]
 
[...]
 
SI cette ligne dépasse la taille de l'écran, les éléments ne resteront plus sur la même ligne et se supperposeront.


La ligne de titre ne devrair pas être en flottant. Seulement les motifs.
 
C'est la solution qu'on emploie habituellement avec les designs 3 colonnes.
 

Hermes le Messager a écrit :

Pensez vous que les divs ne sont pas finalement réservé à un usage en absolut quand on veut faire des présentations un peu complexe, mais que pour ce qui est du relatif, les ruses à employer deviennent plus lourdes que l'emploi d'une unique table ?


Le problèmes est qu'on utilise aujourd'hui les flottants pour mettre des blocs cote à cote et faire du multicolonnage. C'est un peu du bricolage car les flottants ne servent pas à ça (à la base ça sert à remplacer l'attribut "align" et donc faire couler du texte autour d'un bloc).
 
J'adhère à 100% à ce que disais David Baron il y a quelques jours : http://dbaron.org/log/2003-11#e20031126a
 
Donc comme d'hab vivement les CSS 3 en 2042 :/


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 20-12-2003 à 14:35:29    

gm_superstar a écrit :


La ligne de titre ne devrair pas être en flottant. Seulement les motifs.
 
C'est la solution qu'on emploie habituellement avec les designs 3 colonnes.
 
 
Le problèmes est qu'on utilise aujourd'hui les flottants pour mettre des blocs cote à cote et faire du multicolonnage. C'est un peu du bricolage car les flottants ne servent pas à ça (à la base ça sert à remplacer l'attribut "align" et donc faire couler du texte autour d'un bloc).
 
J'adhère à 100% à ce que disais David Baron il y a quelques jours : http://dbaron.org/log/2003-11#e20031126a
 
Donc comme d'hab vivement les CSS 3 en 2042 :/


 
Et oué.
 
Voilà bien le problème. Si je fais une mise en page simple à 3 colonne, pas de problème, mais si je veux avoir un peu partout des motifs tels que ceux dont je viens de parler, ça va devenir ingérable avec des tonnes de balises qui vont se rajouter, des hack dans tous les sens etc... Le tout prévu pour les nav que j'utilise, mais sans garantie de fonctionnement avec ceux un peu plus ancien ou ceux qui vont sortir.
 
Je crois qu'il est temps après cette période passionnante d'expérimentation avec les divs riche en enseignement de se rendre à l'évidence. Oui au W3C et à la validité, non au recours systématique aux divs.  :)

Reply

Marsh Posté le 20-12-2003 à 14:43:55    

Hermes le Messager a écrit :


Et oué.
 
Voilà bien le problème. Si je fais une mise en page simple à 3 colonne, pas de problème, mais si je veux avoir un peu partout des motifs tels que ceux dont je viens de parler, ça va devenir ingérable avec des tonnes de balises qui vont se rajouter, des hack dans tous les sens etc... Le tout prévu pour les nav que j'utilise, mais sans garantie de fonctionnement avec ceux un peu plus ancien ou ceux qui vont sortir.


Heu... Mais qu'est-ce que tu appelles "motif" ? Tu as un exemple ? Par ce que là je vois pas trop pourquoi tu aurais des problèmes...
 

Hermes le Messager a écrit :

Je crois qu'il est temps après cette période passionnante d'expérimentation avec les divs riche en enseignement de se rendre à l'évidence. Oui au W3C et à la validité, non au recours systématique aux divs.  :)


Le mot important étant ici "systématique" ;)
 
Les DIV permettent de faire des choses que les tableaux ne font pas et réciproquement


Message édité par gm_superstar le 20-12-2003 à 14:44:13

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 20-12-2003 à 15:23:56    

Procédons par ordre.
 
Ma première préoccupation est de réaliser ça :
 

Code :
  1. |---------------------------------|
  2. |                                 |
  3. |  |---------------------------|  |
  4. |  |                           |  |
  5. |  |                           |  |
  6. |  |                           |  |
  7. |  |                           |  |
  8. |  |                           |  |
  9. |  |                           |  |
  10. |  |---------------------------|  |
  11. |                                 |
  12. |---------------------------------|


 
en sachant donc que la largeur totale est 100%, celle du deuxième carré intérieur de 100% moins 10px à gauche et moins 10px à droite et que cet ensemble (donc les deux carrés) peut être lui-même être contenu dans un autre conteneur (en absolute ou en relative) que le body.  
Rien que pour ça déjà, comment faire ?


Message édité par Hermes le Messager le 20-12-2003 à 15:25:15
Reply

Marsh Posté le 20-12-2003 à 15:31:05    

Hermes le Messager a écrit :

Procédons par ordre.
 
Ma première préoccupation est de réaliser ça :
 

Code :
  1. |---------------------------------|
  2. |                                 |
  3. |  |---------------------------|  |
  4. |  |                           |  |
  5. |  |                           |  |
  6. |  |                           |  |
  7. |  |                           |  |
  8. |  |                           |  |
  9. |  |                           |  |
  10. |  |---------------------------|  |
  11. |                                 |
  12. |---------------------------------|


 
en sachant donc que la largeur totale est 100%, celle du deuxième carré intérieur de 100% moins 10px à gauche et moins 10px à droite et que cet ensemble (donc les deux carrés) peut être lui-même être contenu dans un autre conteneur (en absolute ou en relative) que le body.  
Rien que pour ça déjà, comment faire ?


la largeur d'un div étant par défaut 100% de la plce disponible, je ne vois pas le problème...

Reply

Marsh Posté le 20-12-2003 à 15:33:22    

gizmo a écrit :


la largeur d'un div étant par défaut 100% de la plce disponible, je ne vois pas le problème...


 
Moi je le vois :
 
1) comment faire le padding de 10px de manière que ça passe partout sans hack ?
2) oui un div occupe toute la place disponible à condition que son conteneur ne soit pas en absolut. Hors, je veux que ce div puisse être inclu n'importe où puisque mon forum pourra lui aussi être inclu dans un élément comme une cellule de table ou un autre div.

Reply

Marsh Posté le 20-12-2003 à 15:33:22   

Reply

Marsh Posté le 20-12-2003 à 15:37:42    

1)tu fais simplement un margin de 10px pour le div intérieur
2)non, même si le conteneur est absolu, les div intérieurs prendront 100% de la largeur de ce conteneur absolu.

Reply

Marsh Posté le 20-12-2003 à 15:50:56    

gizmo a écrit :

1)tu fais simplement un margin de 10px pour le div intérieur
2)non, même si le conteneur est absolu, les div intérieurs prendront 100% de la largeur de ce conteneur absolu.


 
Ok. Je viens de tester et effectivement le div prend tout l'espace disponible en largeur même avec un conteneur en absolute.
 
Donc, passons à la question 2)
 
j'ai dans mon forum plusieurs choses comme :
 
[****]tatati tatata etc...[****]
 
où [****] représente un élément de décoration.  
 
Le tatati tatata est de longueur variable et pousse le [****]
 
QUOI QU'IL ARRIVE, ces 3 éléments sont alignés, même si la longueur totale dépasse la longueur du conteneur ou la longueur de la fenêtre. Donc pas question d'avoir un élément qui se barre et va en dessous du tatati tatata. ;)
 
Comment faire sachant que la largeur du conteneur global de tout ça ne peut être prédit ?

Reply

Marsh Posté le 20-12-2003 à 15:58:33    

quite à ce que cela induise un scroll horizontal?

Reply

Marsh Posté le 20-12-2003 à 16:00:32    

gizmo a écrit :

quite à ce que cela induise un scroll horizontal?


 
Oui, uniquement si ce scroll se produit au niveau de la fenêtre.
 
C'est le but, comme dans ce forum par exemple.

Reply

Marsh Posté le 20-12-2003 à 16:01:55    

ok, alors avec l'attribut css no-warp, cela devrait suffire. Seulement, je n'ai plus le souvenir de s'il est bien supporté par IE

Reply

Marsh Posté le 20-12-2003 à 16:12:09    

gizmo a écrit :

ok, alors avec l'attribut css no-warp, cela devrait suffire. Seulement, je n'ai plus le souvenir de s'il est bien supporté par IE


 
C'est bête, j'ai plus IE depuis que je suis passé sous Linux.  [:totozzz]  (Bon, ceci dit, je peux vérifier avec l'ordi de ma copine dans son bureau...  :D  Elle veut pas de Linux pour l'instant [:ddr555] )

Reply

Marsh Posté le 20-12-2003 à 16:19:41    

En fait, il y a un double problème :
 
1) Effectivement white-space : nowarp; ne fonctionne pas avec IE6.
 
2) Mais en plus, étant donné que pour aligner mes 3 éléments, j'utilise float, les éléments vont se supperposer si le total de la longueur dépasse la taille du super-élément conteneur.

Reply

Marsh Posté le 20-12-2003 à 16:27:46    

1)[:spamafote]
2) tu ne dois pas spécialement utiliser des float pour faire ce genre de décorations. Tu peux très bien envisager pour une des extrémité d'utiliser le fond du conteneur et pour l'autre, vu qu'il s'agit d'un titre le fond de celui-ci.

Reply

Marsh Posté le 20-12-2003 à 16:30:24    

gizmo a écrit :

1)[:spamafote]
2) tu ne dois pas spécialement utiliser des float pour faire ce genre de décorations. Tu peux très bien envisager pour une des extrémité d'utiliser le fond du conteneur et pour l'autre, vu qu'il s'agit d'un titre le fond de celui-ci.


 
Ah oui, bien joué pour le 2), j'y avais pas pensé à celle-là.  :jap:  Je vais voir ce que je peux faire. Bon évidemment, ça limite un peu les possibilités graphiquement, puisque ça m'oblige à avoir des motifs aux deux extrémités sembles et non par exemple <- mon texte ->, mais c'est intéressant.
 
Merci.
 
Je me mets au travail maintenant.  :hello:

Reply

Marsh Posté le 20-12-2003 à 16:42:03    

Hermes le Messager a écrit :

Bon évidemment, ça limite un peu les possibilités graphiquement, puisque ça m'oblige à avoir des motifs aux deux extrémités sembles et non par exemple <- mon texte ->, mais c'est intéressant.


Ou alors tu mets 2 DIV l'un dans l'autre chacun ayant son fond. C'est pas sémantiquement très bon mais ça apporte plus de souplesse qu'un seul fond.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 23-12-2003 à 16:04:33    

Je ne sais pas si tu les a déjà lus ou pas, mais peut-être que ces articles pourraient t'aider :  
http://www.alistapart.com/articles/customcorners/
http://www.alistapart.com/articles/slidingdoors/
 
Par contre niveau balisage c'est pas light.

Reply

Marsh Posté le 23-12-2003 à 16:09:08    

kriscool a écrit :

Je ne sais pas si tu les a déjà lus ou pas, mais peut-être que ces articles pourraient t'aider :  
http://www.alistapart.com/articles/customcorners/
http://www.alistapart.com/articles/slidingdoors/
 
Par contre niveau balisage c'est pas light.


 
Oui, mais non :
 

Code :
  1. /* Show only to IE PC \*/
  2. * html .boxhead h2 {height: 1%;} /* For IE 5 PC */
  3. .sidebox {
  4. margin: 0 auto; /* center for now */
  5. width: 17em; /* ems so it will grow */
  6. background: url(sbbody-r.gif) no-repeat bottom right;
  7. font-size: 100%;
  8. }


 
Quand je vois ce genre de truc, c'est non pour moi. Je veux du code SANS aucun aménagement pour tel ou tel navigateur.

Reply

Marsh Posté le 23-12-2003 à 16:22:45    

En fait pour le tuto sur les bordures custom je pensais pas à l'exemple de layout complet qu'il donne à la fin et qui est fait de façon assez crade au nom du "tout pareil partout".
 
C'est la technique utilisée pour régler le problème du "décoration avant, après et taille de contenu variable" qui est intéressante ici, et elle ne nécessite aucun hack.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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