La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML
(Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Convertion Table et DIV
« Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: Convertion Table et DIV  (Lu 2081 fois)
Convertion Table et DIV
« sur: le 15-08-2009 a 21:07:36 »
ercijean514
Membre récent
*

Hors-Ligne

Messages: 1





Voir le Profil
Répondre avec citation

Bonjour, j'utilise la balise "tables" (tr, td) en HTML depuis plusieurs années. Je dois me convertir au CSS et remplacer la balise table par des DIV selon les expert. Effectivement les page sont moin lourde et apparament mieux indexé.

Je trouve ca quand même difficile. Voici un exemple de convertion entre table et DIV. Es ce que je dois vraiment faire ca. Ca semble complexe pour pas grand chose. Moi, j'ai effectivement des tableau dans des tableau et de grandeur relative...ca va me prendre un temp fous pour tous convertir. En passant voici mon site www.quebeclocationdechalets.com

Donc, question.
*Es ce que mon code css est bon, es-ce la technique standard des "pro"?
*Si j'ai un formulaire conplexe a faire, c'est difficile dimaginer que je dois le faire avec des DIV. Es ce effectivement ce que je dois faire?
*Quel est votre opigon,
es ce que la balise "table" va quand même rester utilisable dans le futur en XHTML.
Les DIV sont peut-être mieux pour l'indexation et la lourdeur des pages mais le code est plus long et plus difficile a faire non? Pour des table complexe c'est mon constat..


merci pour vos commentaires


AVEC TABLE
Code:

            <table width="410"  border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td><img src="img/bg/CornerLeftTop.gif" width="12" height="12" border="0" alt="" /></td>
                    <td style="background-image:url(img/bg/borderTop.gif)" height="12" width="100%"></td>
                    <td><img src="img/bg/CornerrightTop.gif" width="12" height="12" border="0" alt="" /></td>
                </tr>
                <tr>
                    <td style="background-image:url(img/bg/borderLeft.gif)" width="12" ></td>
                    <td style="background-image:url(img/bg/bg.gif)" valign="top" height="100%">                   

*****CONTENU*****

                  </td>                       
                    <td background="img/bg/borderRight.gif" width="12" ></td>
                </tr>
                <tr>
                    <td><img src="img/bg/CornerLeftBot.gif" alt="" width="12" height="12" border="0"/></td>
                    <td background="img/bg/borderBot.gif" height="12" width="100%"></td>
                    <td><img src="img/bg/CornerrightBot.gif" alt="" width="12" height="12" border="0"/></td>
                </tr>
            </table> 



AVEC CSS

Code:



            <div id="Cadre_Blanc">
                <div id="Cadre_Blanc_Corner_TopLeft"></div>
                <div id="Cadre_Blanc_Border_top"></div>
                <div id="Cadre_Blanc_Corner_TopRight"></div>
               
                <div id="Cadre_Blanc_border_left"></div>
                <div id="Cadre_Blanc_Contenu">
               
                    *****CONTENU*****
                   
                </div>
                <div id="Cadre_Blanc_border_right"></div>

                <div id="Cadre_Blanc_Corner_BotLeft"></div>
                <div id="Cadre_Blanc_Border_Bot"></div>
                <div id="Cadre_Blanc_Corner_BotRight"></div>               
            </div>


/* Cadres*/
div#Cadre_Blanc{
   background-color:#8EA7CC;
   width:424px;   
}
   /*Ligne du haut du cadre*/
   div#Cadre_Blanc_Corner_TopLeft
   {
      float:left;
      width:12px;
      height:12px;
      background-image: url("img/bg/CornerLeftTop.gif");
      }   
   div#Cadre_Blanc_Border_top
   {
      float:left;
      width:400px;
      height:12px;
      background-image: url("img/bg/borderTop.gif");
      }
   div#Cadre_Blanc_Corner_TopRight
   {
      float:right;
      width:12px;
      height:12px;
      background-image: url("img/bg/CornerrightTop.gif");
      }   


   /*Centre du cadre et contenu*/
   div#Cadre_Blanc_border_left
   {
      float:left;
      width:12px;
      height:150px;
      background-image: url("img/bg/borderLeft.gif");
      }   
   div#Cadre_Blanc_Contenu {
      float:left;
      width:400px;
      height:150px;
      background-image: url("img/bg/bg.gif");
      }
   div#Cadre_Blanc_border_right
   {
      float:right;
      width:12px;
      height:150px;
      background-image: url("img/bg/borderRight.gif");
      }   

   /*Ligne du bas du cadre*/
   div#Cadre_Blanc_Corner_BotLeft
   {
      float:left;
      width:12px;
      height:12px;
      background-image: url("img/bg/CornerLeftBot.gif");
      }   
   div#Cadre_Blanc_Border_Bot
   {
      float:left;
      width:400px;
      height:12px;
      background-image: url("img/bg/borderBot.gif");
      }
   div#Cadre_Blanc_Corner_BotRight
   {
      float:right;
      width:12px;
      height:12px;
      background-image: url("img/bg/CornerrightBot.gif");
      }   

Rapporter au modérateur  

Re:Convertion Table et DIV
« Répondre #1 sur: le 16-08-2009 a 23:34:44 »
tony35520
Membre récent
*

Hors-Ligne

Messages: 18





Voir le Profil    E-Mail
Répondre avec citation

Salut,

Pour le passage aux div, oui c'est chaudement recommandé pour pouvoir progresser dans ta mise en page, sachant que le html strict veut que tu mette tout ce qui s'y rapporte dans une feuille de style, contrairement au contenu.
Je te conseil de garder les "float" pour des pages simples, pour les plus complexes mieux vaut passer par des "position: absolute;" et "position: relative".
La position relative te sert a placer ton contenu principal dans ta fenêtre, les positions absolues te servent à placer des éléments "en dehors du flux de ta page": cad ou tu veux!
Si tu veux plus de précisions n'hésite pas...

Rapporter au modérateur  
Re:Convertion Table et DIV
« Répondre #2 sur: le 18-08-2009 a 22:49:13 »
MarvinLeRouge
Superactif
****

Hors-Ligne

Messages: 584





Voir le Profil    WWW
Répondre avec citation

Salut,

Pour ma part, je trouve qu'il y a beaucoup de div là quand même; tu en as peut-être besoin, mais c'est généralement largement simplifiable. Si tu pouvais fournir une image de ce que tu souhaites convertir, en mettant simplement en avant l'élément concerné (genre la grosse flèche rouge), ça aiderait.

Rapporter au modérateur  

Développeur web / Création de site internet
jean@ceugniet.com
Jean Ceugniet, Développement web
SIRET : 523 611 044 00018
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg