5568 sujets

Sémantique web et HTML

y'a un truc qui m'echappe mais je n'arrive pas à aligner mon tableau à gauche sur Firefox. IL reste centré malgé mes menaces. Merci de votre aide

a écrit :
<table align="left">
<tr>
<td align="center">
blabla
</td>
</tr>
</table>
Menace-le de le remplacer par le couple div / css, par exemple! Smiley cligne
As-tu consulté la FAQ?
Tu ne donnes pas de renseignements concernant l'environnement et l'utilisation de ce tableau. C'est très vague.

""L'orientation des Standards est claire : tous les attributs de taille, de position, de couleurs, d'alignement (width, height, align, font, color,...),... ne doivent pas figurer sur la page html, mais sur ce qui va gérer l'affichage, c'est à dire la feuille de style CSS".
Alsacréations

Modifié par dom (28 Aug 2006 - 12:43)
en fait je souhaite ecrire un cadre de news sur mon site, j'ai donc ecris le code suivant:

a écrit :

<style>
#news {
position: absolute;
width: 250px;
top: 0;
right: 0;
}
#news div {
position: absolute;
top: 0;
right: 0;
width: 266px;
text-align: center;
background-color: #E86A10;
color: #FFFFFF;
font-weight:bold;
font-size:10px;
}
#news ul {
text-align:left;
border: 3px solid #E86A10;
height:120px;
overflow:auto;
margin: 0;
padding: 10px 0 0 0;
}
#news li {
padding: 0px;
margin: 0px;
list-style: none
display: block;
border: solid #cdd9e7 1px;
}
#news a {
display:block;
color:black;
text-decoration:none;
font-size:10px;
padding:2px 0 0 2px;
width:100%;
}
#news a:hover {
background-color:#cdd9e7;
}
#news span {
color:#CB3300;
font-weight:bold;
</style>

....

<div id="news">
<div>
NEWS
</div>
<ul>
{foreach:aNews,key,aValue}
<li>
<a href="#" onClick="javascript:openWindow('{makeUrl(#read#,#news#,#news#)}frmNews_id/{aValue[news_id]}',500,350);change_class('{aValue[news_id]}');">
{if:aValue Smiley icon }
<img src="{webRoot}/images/news/icons/{aValue Smiley icon }" />
{else:}
<img src="{webRoot}/themes/{theme}/images/empty.gif" height="10" />
{end:}
<span>{aValue Smiley date }</span>
{summarise(aValue Smiley title ,25):h}
</a>
</li>
{end:}
</ul>
</div>

...

le probleme est le suivant, mes images (icon) n'ont pas toutes la meme largeur, et je désire que les dates juste après soient alignées. Je ne sais guère comment faire. J'ai eu l'idee de créer un tableau uniquement pour mes images pour lui définir une largeur minimum comme ci dessous:


a écrit :

<div id="news">
<div>
NEWS
</div>
<ul>
{foreach:aNews,key,aValue}
<li>
<a href="#" onClick="javascript:openWindow('{makeUrl(#read#,#news#,#news#)}frmNews_id/{aValue[news_id]}',500,350);change_class('{aValue[news_id]}');">
<table cellspacing="0" cellpadding="0" width="35" border="0" align="left">
<tr>
<td align="center">
{if:aValue Smiley icon }
<img src="{webRoot}/images/news/icons/{aValue Smiley icon }" />
{else:}
<img src="{webRoot}/themes/{theme}/images/empty.gif" height="10" />
{end:}
</td>
</tr>
</table>
<span>{aValue Smiley date }</span>
{summarise(aValue Smiley title ,25):h}
</a>
</li>
{end:}
</ul>
</div>


Ca marche tres bien sur IE, il aligne bien les tableaux à gauche, par contre sur Firefox le tableau est centré et utilise toute la largeur de mon DIV, la date et le titre de la news se retrouvant sur une nouvelle ligne. J'ai essayé de faire un test simple comme mon précédent message avec simplement un tableau et il me centre systématiquement ce dernier. Voili voilou.
Bonsoir,
Libre à toi d'utiliser les attributs width, height, align, font, color,...
mais sache que ceux-ci sont invalide si tu utilise un doctype XHTML strict
et ce ce n'est pas une méthode de codage qui facilite la mise à jour
et la précision de l'aspect visuel de ton site.
Oublie les tableaux qui ne sont pas fait pour résoudre ou pour faciliter des
problème de mise en page. Ce mauvais reflexe est à l'origine de l'utilisation
excessive et inadéquate des tableaux pour gérer la mise en page.
Les tableaux ont été conçu principalement pour intégrer des données
tabulaires (calendriers, statistiques....) ou par exemple pour certaines galeries
d'images, etc.
Modifié par Hermann (30 Aug 2006 - 00:20)
UNE question, UNE réponse et pas de détournement Smiley cligne Je cherchais sur Google un problème à l'alignement d'un tableau sous Firefox et je suis tombé sur ce Post. J'ai cherché et voici ma réponse.

wind_of_o : Si l'on souhaites utiliser les CSS, txt-align: left n'est pas suffisant, il faut procéder ainsi...

...Ajoutes un style CSS à ton <table> en indiquant float :


table {
	float: left;
}

- - - - - - - - - - 

<table> <!-- Supprimer align="left" /-->
 <tr>
  <td align="center">
  blabla
  </td>
 </tr>
</table>
Hermann a écrit :
Bonsoir,
Libre à toi d'utiliser les attributs width, height, align, font, color,...
mais sache que ceux-ci sont invalide si tu utilise un doctype XHTML strict

juste une petite remarque : même en doctype Strict, mettre les attributs width et height des image n'est pas invalide ... Pour un doctype HTML tout comme XHTML d'ailleurs.
Bonjour,

j'en remets une couche, histoire d'être bien compris: ces attributs height et width font partie des "best practices" par exemple pour le web mobile...

Faut trier, les gars Smiley lol