Tableau en CSS avec restriction...

Tableau en CSS avec restriction... - HTML/CSS - Programmation

Marsh Posté le 01-02-2005 à 19:01:26    

bonjour,
 
voila je dois faire un tableau de 5 lignes et 2 colonnes. Sur ma page html, j'ai juste le droit d'utiliser les balises "div", "ul" et "il" tout le reste doit se trouver dans la feuille css.
Qui peut m'aider ?
 
autre question comment remplacer une balise "br" en html pour avoir la meme fonction en css (saut de ligne) ?
 
Me demander pas pourquoi que c'est 3 balises, c est un prof qui nous le demande.  
 
Merci d'avance

Reply

Marsh Posté le 01-02-2005 à 19:01:26   

Reply

Marsh Posté le 01-02-2005 à 19:04:02    

remib55 a écrit :

bonjour,
 
voila je dois faire un tableau de 5 lignes et 2 colonnes. Sur ma page html, j'ai juste le droit d'utiliser les balises "div", "ul" et "il" tout le reste doit se trouver dans la feuille css.
Qui peut m'aider ?
 
autre question comment remplacer une balise "br" en html pour avoir la meme fonction en css (saut de ligne) ?
 
Me demander pas pourquoi que c'est 3 balises, c est un prof qui nous le demande.  
 
Merci d'avance


 
Enfin un bon prof... Tu peux aller faire une prière à l'Eglise dès demain...  :D  

Reply

Marsh Posté le 01-02-2005 à 19:41:49    

héhé, ya pas un truc dans les règles du forum qui dit qu'on doit pas venir ici pour que les autres fasses vos devoir ????


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 01-02-2005 à 19:43:22    

En meme temps pour faire un tableau faut utiliser <table>. Je parle d'un vrai tableau, celui qui sert a afficher des donees tabulaires ... Faut pas tomber dans l'exces qui consiste a ne plus du tout utilser <table> meme lorsque ce dernier serait plus logique.
 
M'enfin, si c'est vraiment ce que demande le "prof", tu peux n'utiiser que des divs.
Apres suffit de "faire mumuse" avec les css pour afficher ca comme une table.
M'enfin, je trouve pas ca tres intelligent.
 
Si les donees sont vraiment tabulaires c'est <table> qu'il faut utiliser.
 

Citation :


autre question comment remplacer une balise "br" en html pour avoir la meme fonction en css (saut de ligne) ?  


J'ai pas trop compris, tu pourrais donner un exemple de code html ou tu voudrais "remplacer" le br ? Car tout depends de l'utilisation dont tu fais de cette balise...


Message édité par cerel le 01-02-2005 à 19:46:37
Reply

Marsh Posté le 01-02-2005 à 20:06:33    

remib55 a écrit :

bonjour,
 
voila je dois faire un tableau de 5 lignes et 2 colonnes. Sur ma page html, j'ai juste le droit d'utiliser les balises "div", "ul" et "il" tout le reste doit se trouver dans la feuille css.
Qui peut m'aider ?
 
autre question comment remplacer une balise "br" en html pour avoir la meme fonction en css (saut de ligne) ?
 
Me demander pas pourquoi que c'est 3 balises, c est un prof qui nous le demande.  
 
Merci d'avance


 
Tiens, je me rend compte que j'ai oublié du coup de répondre aux questions...  :D  
 
1) Comme le dit Cerel, on ne fait pas tes devoirs à ta place.
2) Pour les données tabulaire, +1 avec Cerel. Avec des divs, il te suffit de jouer avec des trucs genre :
 

Code :
  1. <div class="ligne">
  2. <div class="colonne">...</div>
  3. <div class="colonne">...</div>
  4. </div>
  5. <div class="ligne">
  6. <div class="colonne">...</div>
  7. <div class="colonne">...</div>
  8. </div>
  9. etc...


 
Pour les CSS, tu regardes du côté de float par exemple... Ou des positions absolute qui peuvent aussi marcher dans ce cas...
 
3) Pour la question du <br>, cette question n'a aucun sens. Tout dépend effectivement comme cela a été dit du contexte. Un div provoque naturellement un retour à la ligne. Un margin-bottom permet de régler l'espacement avec ce qui suit... Idem avec table...

Reply

Marsh Posté le 01-02-2005 à 23:35:22    

Citation :

Code :
 
<div class="ligne">  
<div class="colonne">...</div>  
<div class="colonne">...</div>  
</div>  
<div class="ligne">  
<div class="colonne">...</div>  
<div class="colonne">...</div>  
</div>  
etc...


 
ok mais le div fait passer à la ligne alors que moi je vois les deux div colonne sur la meme ligne... :??:

Reply

Marsh Posté le 01-02-2005 à 23:57:24    

Si tu dois faire ca dans le cadre d'un cours, alors je serais pret a parier que le prof vous a donne un cours dessus. A mon avis suffit juste de relire les notes du cours...
 
Il existe actuellement en tout cas 2 "solutions".
Allez quelques indices :
1) Une des solutions a ete evoquee par Hermes.
2) Pour la 2e "solution" il faut reflechir a la "nature" meme du div. "Un div c'est quoi ??".

Reply

Marsh Posté le 02-02-2005 à 01:18:17    

je bloque vraiment sur sur le passage de la ligne de ma deuxieme div (2eme colonne) pour le reste ca va mais je vois pas du tout...
 
si vous pouvez m'aider ca serait super...

Reply

Marsh Posté le 02-02-2005 à 09:37:17    

remib55 a écrit :

je bloque vraiment sur sur le passage de la ligne de ma deuxieme div


Utilise le positionnement CSS !!!  
 
Les autres ont donnés déja 10 fois la réponse mais bon ...
Va voir içi (Et lit le tutorial en entier !!! (3 pages)):
http://openweb.eu.org/articles/initiation_flux/


Message édité par fxoxo le 02-02-2005 à 09:38:39

---------------
stpfilms.free.fr
Reply

Marsh Posté le 02-02-2005 à 09:49:52    

Vu l'intitulé, je supose qu'il veux que tu utilise un xhtml comme cela
 
<div>
 <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>  
  <li></li>
 </ul>
</div>
<div>
 <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>  
  <li></li>
 </ul>
</div>
 
2 colonnes -->les divs
5 lignes -->les ul/li
 
Va voir http://www.alsacreations.com/articles/ : Construction de menus
Tu y trouvera les éléments pour mettre en forme les ul/li avec CSS
 
 
 
   


---------------
stpfilms.free.fr
Reply

Marsh Posté le 02-02-2005 à 09:49:52   

Reply

Marsh Posté le 02-02-2005 à 10:20:18    

fxoxo a écrit :

Vu l'intitulé, je supose qu'il veux que tu utilise un xhtml comme cela
...
 
2 colonnes -->les divs
5 lignes -->les ul/li
 
Va voir http://www.alsacreations.com/articles/ : Construction de menus
Tu y trouvera les éléments pour mettre en forme les ul/li avec CSS


 [:petrus75]  
 
j'en doute, ça serait stupide et ça n'a aucun sens sémantiquement parlant
 
on peut trouver des exemples de tableaux tableless sur CSSDébutant [:petrus75]  
 
remib > vous devez afficher des trucs précis à l'intérieur ou pas?
 
c'est juste pour faire un tableau?
 
parce que pour des données "tabulaires", on est censé utiliser un tableau, le reste n'a pas spécialement de sens/logique


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 02-02-2005 à 10:37:16    

Oui, faut pas vouloir supprimer les tableaux là où il en faut...

Reply

Marsh Posté le 02-02-2005 à 10:47:46    

non on doit faire un cv et mon probleme c'est pour avoir les dates et la formation sur la meme ligne mais tout en ayant toutes les lignes formation avec le meme decalage sur la gauche... d'ou mon idée de faire un tableau...(remib)


Message édité par remib55 le 02-02-2005 à 10:48:54
Reply

Marsh Posté le 02-02-2005 à 10:53:21    

remib55 a écrit :

non on doit faire un cv et mon probleme c'est pour avoir les dates et la formation sur la meme ligne mais tout en ayant toutes les lignes formation avec le meme decalage sur la gauche... d'ou mon idée de faire un tableau...(remib)


 
Ben faut juste deux colonnes [:spamafote] donc deux divs. [:spamafote]

Reply

Marsh Posté le 02-02-2005 à 10:55:20    

remib55 a écrit :

non on doit faire un cv et mon probleme c'est pour avoir les dates et la formation sur la meme ligne mais tout en ayant toutes les lignes formation avec le meme decalage sur la gauche... d'ou mon idée de faire un tableau...(remib)


pas tableau alors [:spamafote]  
 
hint: un CV est une liste de compétences/qualification [:cupra]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 02-02-2005 à 11:57:41    

si pas de tableau comment faire alors... comment faire aligner les dates avec les qualifications ???

Reply

Marsh Posté le 02-02-2005 à 13:42:20    

remib55 a écrit :

non on doit faire un cv et mon probleme c'est pour avoir les dates et la formation sur la meme ligne mais tout en ayant toutes les lignes formation avec le meme decalage sur la gauche... d'ou mon idée de faire un tableau...(remib)


 
Il faut que tu organises tes données HTML en leur appliquant des class qui veulent dire quelque chose.
 
Exemple :

Code :
  1. <ul>
  2.   <li class="formation">
  3.     <div class="dateFormation">...</div>
  4.     <div class="descriptionFormation">...</div>
  5.   </li>
  6.   ...
  7. </ul>


 
En suite il ne te reste plus qu'à bien définir ces classes pour que ces div s'affichent comme tu veux.
 
EDIT : utilisation de <ul><li> car en fait tu as une liste de formations.


Message édité par Bidem le 02-02-2005 à 13:45:02
Reply

Marsh Posté le 02-02-2005 à 14:06:21    

j'ai arrivé un faire un truc sans les ul et li juste avec les div et les position absolue mais ca fausse tout le but du css vu que chaque la ligne a sa configuration... donc si je rajoute une ligne il faut que je change toutes les positions (les valeurs des positions)

Reply

Marsh Posté le 02-02-2005 à 14:08:15    

Pour 5 lignes et 2 colonnes, tu fait 10 <div>. Chaque <div> aura ça dans son CSS :

Code :
  1. div {
  2.   width: 49%;
  3.   float: left;
  4. }


Et pis voilà...

Reply

Marsh Posté le 02-02-2005 à 14:15:47    

t'es sur la ??

Reply

Marsh Posté le 02-02-2005 à 14:24:13    

Ouais, grave :D

Reply

Marsh Posté le 02-02-2005 à 14:34:54    

bah j'ai rien pigé alors :(

Reply

Marsh Posté le 02-02-2005 à 14:42:21    

remib55 a écrit :

bah j'ai rien pigé alors :(


Code :
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4. <head>
  5.  <title>div</title>
  6.  <style type="text/css">
  7.    div {
  8.     border: 1px solid #00f;
  9.     height: 100px;
  10.     width: 49%;
  11.     float: left;
  12.    }
  13.  </style>
  14. </head>
  15. <body>
  16.  <div></div>
  17.  <div></div>
  18.  <div></div>
  19.  <div></div>
  20.  <div></div>
  21.  <div></div>
  22.  <div></div>
  23.  <div></div>
  24.  <div></div>
  25.  <div></div>
  26. </body>
  27. </html>


5 lignes et 2 colonnes en div :)

Reply

Marsh Posté le 02-02-2005 à 15:03:06    

FlorentG a écrit :


...
5 lignes et 2 colonnes en div :)


 
Ca fait 2 colonnes parce que le navigateur ne peut pas afficher + de 2 colones de 50% sur une ligne...
 
Ma proposition :

Code :
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4.     <head>
  5.         <title>div</title>
  6.         <style type="text/css">
  7.                 div.formation {
  8.                     clear:left;
  9.                 }
  10.                 div.date {
  11.                     border: 1px solid #00f;
  12.                     height: 100px;
  13.                     width: 20%;
  14.                     float: left;
  15.                 }
  16.                 div.desc {
  17.                     border: 1px solid #00f;
  18.                     height: 100px;
  19.                 }
  20.         </style>
  21.     </head>
  22.     <body>
  23.         <div class="formation">
  24.             <div class="date">12/7/2000-13/7/2000</div>
  25.             <div class="desc">job saisonier</div>
  26.         </div>
  27.         <div class="formation">
  28.             <div class="date">12/7/2001-13/7/2001</div>
  29.             <div class="desc">job saisonier</div>
  30.         </div>
  31.         <div class="formation">
  32.             <div class="date">12/7/2002-13/7/2002</div>
  33.             <div class="desc">job saisonier</div>
  34.         </div>
  35.         <div class="formation">
  36.             <div class="date">12/7/2003-13/7/2003</div>
  37.             <div class="desc">job saisonier</div>
  38.         </div>
  39.         <div class="formation">
  40.             <div class="date">12/7/2004-13/7/2004</div>
  41.             <div class="desc">job saisonier</div>
  42.         </div>
  43.     </body>
  44. </html>


 
Là on peut avoir des colonnes de largeur différentes

Reply

Marsh Posté le 02-02-2005 à 15:05:00    

bidem a écrit :

Ca fait 2 colonnes parce que le navigateur ne peut pas afficher + de 2 colones de 50% sur une ligne...
 
Là on peut avoir des colonnes de largeur différentes


Ben..... Oui :D
Il a dit 2 colonnes, je lui ai donné une solutions avec 2 colonnes, hein ;) Et c'est normal qu'on peut pas afficher plus de 2 colonnes de 50% :??: Pas tout compris là :heink:

Reply

Marsh Posté le 02-02-2005 à 20:18:13    

bidem a écrit :

Ca fait 2 colonnes parce que le navigateur ne peut pas afficher + de 2 colones de 50% sur une ligne...
 
Ma proposition :

Code :
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4.     <head>
  5.         <title>div</title>
  6.         <style type="text/css">
  7.                 div.formation {
  8.                     clear:left;
  9.                 }
  10.                 div.date {
  11.                     border: 1px solid #00f;
  12.                     height: 100px;
  13.                     width: 20%;
  14.                     float: left;
  15.                 }
  16.                 div.desc {
  17.                     border: 1px solid #00f;
  18.                     height: 100px;
  19.                 }
  20.         </style>
  21.     </head>
  22.     <body>
  23.         <div class="formation">
  24.             <div class="date">12/7/2000-13/7/2000</div>
  25.             <div class="desc">job saisonier</div>
  26.         </div>
  27.         <div class="formation">
  28.             <div class="date">12/7/2001-13/7/2001</div>
  29.             <div class="desc">job saisonier</div>
  30.         </div>
  31.         <div class="formation">
  32.             <div class="date">12/7/2002-13/7/2002</div>
  33.             <div class="desc">job saisonier</div>
  34.         </div>
  35.         <div class="formation">
  36.             <div class="date">12/7/2003-13/7/2003</div>
  37.             <div class="desc">job saisonier</div>
  38.         </div>
  39.         <div class="formation">
  40.             <div class="date">12/7/2004-13/7/2004</div>
  41.             <div class="desc">job saisonier</div>
  42.         </div>
  43.     </body>
  44. </html>


 
Là on peut avoir des colonnes de largeur différentes


 
 
desolé mais la tes 5 lignes se superpose... :sarcastic:  

Reply

Marsh Posté le 02-02-2005 à 20:30:38    

remib55 a écrit :

desolé mais la tes 5 lignes se superpose... :sarcastic:


 
Tu pourrais éviter le  :sarcastic:  avec des gens qui cherchent à t'aider et te proposent des solutions toutes faites qu'ils ne devraient même pas te proposer...  :heink:  

Reply

Marsh Posté le 03-02-2005 à 09:54:47    

remib55 a écrit :

desolé mais la tes 5 lignes se superpose... :sarcastic:


 
Chez moi ça marche (avec IE et FF).
 
Vérifie que tu as bien fait le copier coller :sarcastic:
 
 ;)

Reply

Marsh Posté le 03-02-2005 à 14:33:55    

en meme temps, vu qu'un CV est pour moi une liste de "formation" ou "expérience" et que l'intitulé disait d'utiliser div, ul, li...
ben je pense qu'il n'était pas prévu de faire un div pour chaque case d'un pseudo-tableau, mais seulement deux div en tout, contenant une liste chacun...
 
mais bon, ça ne regarde que moi... :o


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 03-02-2005 à 14:36:02    

Xav_ a écrit :

en meme temps, vu qu'un CV est pour moi une liste de "formation" ou "expérience" et que l'intitulé disait d'utiliser div, ul, li...
ben je pense qu'il n'était pas prévu de faire un div pour chaque case d'un pseudo-tableau, mais seulement deux div en tout, contenant une liste chacun...
 
mais bon, ça ne regarde que moi... :o


 
nope. Car une date doit être associée à un évènement.
 
Donc, c'est bel et bien une liste à deux niveaux qu'il faut employer. ;)

Reply

Marsh Posté le 03-02-2005 à 14:40:14    

Moi je serais partant pour une structure <h2><ul> (je rajoute des div pour bien structurer) :

Code :
  1. <div>
  2.   <h2>Formation</h2>
  3.   <ul>
  4.     <li>2004 : pouet</li>
  5.     <li>2003 : prout</li>
  6.   </ul>
  7. </div>
  8. <div>
  9.   <h2>Compétence</h2>
  10.   <ul>
  11.     <li>Dev : QBASIC, TI-83</li>
  12.     <li>Réseau : branchage de tuyaux dans la prise RJ45, configuration Kit Wanadoo</li>
  13.   </ul>
  14. </div>

Reply

Marsh Posté le 03-02-2005 à 18:23:24    

Citation :

nope. Car une date doit être associée à un évènement.
 
Donc, c'est bel et bien une liste à deux niveaux qu'il faut employer. ;)


 
ok, j'ai un peu trop simplifié, mais par rapport à la solution retenu juste avant mon poste, vous etes quand meme d'accord qu'il fallait retirer des div et ajouter des ul/li ;)


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 03-02-2005 à 18:51:52    

Xav_ a écrit :

Citation :

nope. Car une date doit être associée à un évènement.
 
Donc, c'est bel et bien une liste à deux niveaux qu'il faut employer. ;)


 
ok, j'ai un peu trop simplifié, mais par rapport à la solution retenu juste avant mon poste, vous etes quand meme d'accord qu'il fallait retirer des div et ajouter des ul/li ;)


 
Dans ce cas précis, je trouve qu'il faudrait juste une liste à deux niveaux. Sémantiquement, c'est la seule soluce vraiment correcte... Après il faut voir par rapport à la charte graphique... [:toto le hros]

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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