Titre: Convertion Table et DIV
Posté par: ercijean514 le le 15-08-2009 a 21:07:36
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");
}
|
|
|
Titre: Re:Convertion Table et DIV
Posté par: tony35520 le le 16-08-2009 a 23:34:44
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... |
Titre: Re:Convertion Table et DIV
Posté par: MarvinLeRouge le le 18-08-2009 a 22:49:13
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. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|