comment modifier mon CSS pour que dans la colonne de droite les elements en gras et les elements qui ne le sont, ne sont pas alignés.
dans le css j'ai fait un float sur les elements en gra spour que ceux-ci puissent former une colonne à l'extremité droite de la cellule...
dans le css j'ai fait un float sur les elements en gra spour que ceux-ci puissent former une colonne à l'extremité droite de la cellule...
<html>
<head>
<title>HTML avec des interfaces DOM et JavaScript</title>
<script>
// Example ObjetSmartLink en json
var SmartlinkJson = {"id_source":"7315f47dba65515fca60c851d7065bc6","url_source":"http:\/\/news.yahoo.com\/s\/afp\/20060822\/od_afp\/chinacateringcultureoffbeat_060822074830","title_source":"Jail-theme teahouse becomes prisoner of own success in China - Yahoo! News","smartlinks_infos":[{"id_dest":"1735c9d7c2f5b9a51aeaa7aadd3e8df3","score":"268","deleted":"0","date":"1164279208","zone_cible":"151","manually_added":"0","url_dest":"http:\/\/news.yahoo.com\/s\/csm\/ojilleleven","title_dest":"Hostage: The Jill Carroll Story - Epilogue * Family reunion "},{"id_dest":"2fb28d5e3fadd63c9c44736c119b7418","score":"585","deleted":"0","date":"1164279208","zone_cible":"151","manually_added":"0","url_dest":"http:\/\/news.yahoo.com\/s\/csm\/ojilltwo","title_dest":"Hostage: The Jill Carroll Story - Part 2 "},{"id_dest":"380cd804c08c0d64de89ec0d1fa59b8b","score":"335","deleted":"0","date":"1164279208","zone_cible":"151","manually_added":"0","url_dest":"http:\/\/news.yahoo.com\/s\/csm\/ojillthree","title_dest":"Hostage: The Jill Carroll Story - Part 3: The first video "},{"id_dest":"54fe13d026b97bd6e7ce98eab3bb4d23","score":"280","deleted":"0","date":"1164279208","zone_cible":"151","manually_added":"0","url_dest":"http:\/\/news.yahoo.com\/s\/csm\/ojillnine","title_dest":"Hostage: The Jill Carroll Story - Part 9 * The Muj brothers"},{"id_dest":"f9b24f20bc6917a5deb5537e4f5be4cc","score":"352","deleted":"0","date":"1164279208","zone_cible":"151","manually_added":"0","url_dest":"http:\/\/news.yahoo.com\/s\/csm\/ojillone","title_dest":"The Jill Carroll Story - Part 1: The kidnapping"}]};
//var SmartlinkJson = <?= $jsonstring ?>
//construction de SmartLink Objet JS
var SmartLink = eval(SmartlinkJson);
//alert(SmartLink.smartlinks_infos.length);
function DisplaySmartLinks () {
// rц╘cupц╗re une rц╘fц╘rence vers l'ц╘lц╘ment body
var zone_affichage = document.getElementById('SmartLink');
// crц╘ation des ц╘lц╘ments <table> et <tbody>
var smartlinksTable = document.createElement("table");
var smartlinksTbody = document.createElement("tbody");
// crц╘ation des cellules
//for(var j = 0; j < 2; j++) {
// crц╘ation d'un ц╘lц╘ment <tr>
var smartlinksLine = document.createElement("tr");
// crц╘ation du premier ц╘lц╘ment <td> de la ligne SmartLinks
var smartlinksCell1 = document.createElement("td");
// Remplissage de la cellule relative au lien source du SmartLink
smartlinksCell1.innerHTML += '<span>' + SmartLink.title_source + '</span>';
smartlinksCell1.innerHTML += '<br />';
smartlinksCell1.innerHTML += (SmartLink.url_source);
// ajoute la premiere cellule <td> ц═ la ligne <tr>
smartlinksLine.appendChild(smartlinksCell1);
// crц╘ation du second ц╘lц╘ment <td> de la ligne smartlinks
var smartlinksCell2 = document.createElement("td");
// var smartlinksCell2pt1 = document.createElement("div");
// Remplissage de la cellule relative aux liens cible du SmartLink
for (sli=0; sli<SmartLink.smartlinks_infos.length; sli++) {
//alert(sli);
smartlinksCell2.innerHTML += (SmartLink.smartlinks_infos[sli].title_dest);
smartlinksCell2.innerHTML += ' ';
smartlinksCell2.innerHTML += '<span id="DateCible">' + SmartLink.smartlinks_infos[sli].date + '</span>';
//smartlinksCell2.innerHTML += (SmartLink.smartlinks_infos[sli].date);
smartlinksCell2.innerHTML += '<br />';
// }
// ajoute la seconde cellule <td> ц═ la ligne <tr>
smartlinksLine.appendChild(smartlinksCell2);
// ajoute la ligne <tr> ц═ l'ц╘lц╘ment <tbody>
smartlinksTbody.appendChild(smartlinksLine);
}
// ajoute <tbody> ц═ l'ц╘lц╘ment <table>
smartlinksTable.appendChild(smartlinksTbody);
// ajoute <table> ц═ l'ц╘lц╘ment <body>
zone_affichage.appendChild(smartlinksTable);
// dц╘finit l'attribut border de mytable ц═ 2
smartlinksTable.setAttribute("border", "1");
}
</script>
<style>
#SmartLink table
{
border-width: 0px;
font-family: verdana, trebuchet, arial, helvetica, sans-serif;
border-collapse: collapse;
font-size: 12px;
}
#SmartLink table td
{
border-color: #c0c0c0;
border-style: solid;
border-width: 1px;
vertical-align: top;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
#SmartLink table td span
{
font-weight: bold;
}
#DateCible
{
float: right;
}
#TitreCible
{
float: left;
}
</style>
</head>
<body onload="DisplaySmartLinks()">
<div id="SmartLink">
test smartlink
</div>
</body>
</html>
