Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1353 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Tableau en CSS avec restriction...

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Tableau en CSS avec restriction...

n°968684
remib55
Posté le 01-02-2005 à 19:01:26  profilanswer
 

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

mood
Publicité
Posté le 01-02-2005 à 19:01:26  profilanswer
 

n°968686
Hermes le ​Messager
Breton Quiétiste
Posté le 01-02-2005 à 19:04:02  profilanswer
 

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  

n°968714
Xav_
The only one...
Posté le 01-02-2005 à 19:41:49  profilanswer
 

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
n°968715
cerel
Posté le 01-02-2005 à 19:43:22  profilanswer
 

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
n°968733
Hermes le ​Messager
Breton Quiétiste
Posté le 01-02-2005 à 20:06:33  profilanswer
 

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...

n°968849
remib55
Posté le 01-02-2005 à 23:35:22  profilanswer
 

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... :??:

n°968863
cerel
Posté le 01-02-2005 à 23:57:24  profilanswer
 

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 ??".

n°968911
remib55
Posté le 02-02-2005 à 01:18:17  profilanswer
 

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...

n°968958
fxoxo
Posté le 02-02-2005 à 09:37:17  profilanswer
 

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
n°968963
fxoxo
Posté le 02-02-2005 à 09:49:52  profilanswer
 

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
mood
Publicité
Posté le 02-02-2005 à 09:49:52  profilanswer
 

n°968994
masklinn
í dag viðrar vel til loftárása
Posté le 02-02-2005 à 10:20:18  profilanswer
 

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
n°969012
FlorentG
Posté le 02-02-2005 à 10:37:16  profilanswer
 

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

n°969035
remib55
Posté le 02-02-2005 à 10:47:46  profilanswer
 

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
n°969045
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2005 à 10:53:21  profilanswer
 

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]

n°969047
masklinn
í dag viðrar vel til loftárása
Posté le 02-02-2005 à 10:55:20  profilanswer
 

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
n°969154
remib55
Posté le 02-02-2005 à 11:57:41  profilanswer
 

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

n°969323
Bidem
Posté le 02-02-2005 à 13:42:20  profilanswer
 

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
n°969367
remib55
Posté le 02-02-2005 à 14:06:21  profilanswer
 

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)

n°969373
FlorentG
Posté le 02-02-2005 à 14:08:15  profilanswer
 

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à...

n°969396
remib55
Posté le 02-02-2005 à 14:15:47  profilanswer
 

t'es sur la ??

n°969406
FlorentG
Posté le 02-02-2005 à 14:24:13  profilanswer
 

Ouais, grave :D

n°969425
remib55
Posté le 02-02-2005 à 14:34:54  profilanswer
 

bah j'ai rien pigé alors :(

n°969444
FlorentG
Posté le 02-02-2005 à 14:42:21  profilanswer
 

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 :)

n°969462
Bidem
Posté le 02-02-2005 à 15:03:06  profilanswer
 

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

n°969463
FlorentG
Posté le 02-02-2005 à 15:05:00  profilanswer
 

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:

n°969870
remib55
Posté le 02-02-2005 à 20:18:13  profilanswer
 

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:  

n°969882
Hermes le ​Messager
Breton Quiétiste
Posté le 02-02-2005 à 20:30:38  profilanswer
 

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:  

n°970222
Bidem
Posté le 03-02-2005 à 09:54:47  profilanswer
 

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:
 
 ;)

n°970584
Xav_
The only one...
Posté le 03-02-2005 à 14:33:55  profilanswer
 

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
n°970588
Hermes le ​Messager
Breton Quiétiste
Posté le 03-02-2005 à 14:36:02  profilanswer
 

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. ;)

n°970597
FlorentG
Posté le 03-02-2005 à 14:40:14  profilanswer
 

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>

n°970950
Xav_
The only one...
Posté le 03-02-2005 à 18:23:24  profilanswer
 

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
n°970979
Hermes le ​Messager
Breton Quiétiste
Posté le 03-02-2005 à 18:51:52  profilanswer
 

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]

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Tableau en CSS avec restriction...

 

Sujets relatifs
écriture d'un tableau dans un fichierliste horizontale sur plusieurs lignes en CSS ?
dimension d'un tableau de tableauCSS et les liens
tableau 2 dimensionsProbleme affichage tableau
Impression en CSS et lignes coupées[CSS] problème avec les id
[HTML/CSS] quelle méthode pour qu'une image s'adapte à la résolution ?Etirer un background en CSS, spossible ?
Plus de sujets relatifs à : Tableau en CSS avec restriction...

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.116 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR