tableau, fusion et css

tableau, fusion et css - HTML/CSS - Programmation

Marsh Posté le 22-10-2007 à 12:07:19    

Bonjour,
 
Je suis en train de remodeler un ancien site internet,
j'essaie de séparer le fond de la forme au maximum.
 
J'utilise du conde xhtml et du css pour cela, malheureusement
je n'arrive pas à retranscrire la forme d'un tableau  avec des
cellules fusionnées.
 
Voici ce que j'aimerais obtenir :
 
www.walking-energie.com/time.html
(le premier tableau "Horaires : Walking - Nordic Walking" )
 
Si vous avez des solutions, je vous en remercie d'avance !
 
Adrien

Reply

Marsh Posté le 22-10-2007 à 12:07:19   

Reply

Marsh Posté le 23-10-2007 à 06:27:36    

Si tu considères ces données comme des données tabulaires, dans ce cas tu les laisses en tableaux.
 
Dans le cas contraire, il serait bon d'agencer les données afin qu'elles aient un look and feel différent d'un tableau, pour les horaires on laisse tel quel.
 

Code :
  1. <div class="infosSorties">
  2. <h3>Horaires : Walking - Nordic Walking</h3>
  3. <ul>
  4.  <li>- Mardi</li>
  5.  <li>- Jeudi :</li>
  6. </ul>
  7. <div class="infos">
  8.  15h30 à 17h00<br />
  9.  dès le 28.08.2007 au 22.11.2007<br />
  10.  dans la région du Lavaux<br />
  11. </div>
  12. <p class="desc">
  13.  Lieu dit "La Goille" à Savigny
  14. </p>
  15. <p class="more">
  16.  Sorties dans la région du Lavaux - Savigny - Chalet à Gobet
  17. </p>
  18. </div>
  20. <div class="infosSorties">
  21. <h3>Tarif pour 12 sorties :</h3>
  22. <ul>
  23.  <li>Walking :</li>
  24.  <li>Nordic Walking : </li>
  25. </ul>
  26. <div class="infos">
  27.  frs 80.-<br />
  28.  frs 110.-<br />
  29.  (y compris location des bâtons)
  30. </div>
  32. </div>
  34. <style>
  35. .infosSorties h3 {color:#6699FF;font-size:14px;overflow:hidden; zoom:1}
  36. .infosSorties ul {float:left; width:30%; list-style:none; margin:0; padding:0}
  37. .infosSorties ul li {margin:0; padding:0}
  38. .infosSorties .infos {overflow:hidden; zoom:1; text-align:center;}
  39. .infosSorties .desc {clear:both}
  40. .infosSorties .more {font-weight:bold;}
  41. </style>


Reply

Marsh Posté le 26-10-2007 à 15:11:48    

Excellent Gatsu!
Ca m'aide bien à avancer en gardant quelque chose de plus propre à mes yeux!
Merci.

Reply

Sujets relatifs:

Leave a Replay

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