salut à tous,
tout d'abord je voudrais préciser que j'y connais pas grand chose aux CSS.
J'ai des données dynamiques que j'affiche à l'intérieur de div. La largeur des divs est fixe mais la hauteur varie en fonction du contenu.
J'aimerais obtenir un alignement régulier (en tableau) de mes divs au lieu du patchwork suivant.
Pièce jointe 135796
Voilà mon code pour l'affichage
Est-ce que c'est possible de faire ça avec du CSS?
je vous remercie d'avance
tout d'abord je voudrais préciser que j'y connais pas grand chose aux CSS.
J'ai des données dynamiques que j'affiche à l'intérieur de div. La largeur des divs est fixe mais la hauteur varie en fonction du contenu.
J'aimerais obtenir un alignement régulier (en tableau) de mes divs au lieu du patchwork suivant.
Pièce jointe 135796
Voilà mon code pour l'affichage
Code:
<Html>
<tpl for=".">
<div class="thumb-wrap" id="{ID}">
<div class="matchTable" style="width:300px;">
<div class="matchRow">
<div class="matchCell">INDEX</div>
<div class="matchCell">{INDEX}</div>
</div>
<div class="matchRow">
<div class="matchCell">Ligue</div>
<div class="matchCell">{[LeagueRenderer(values.LEAGUEID)]}</div>
</div>
<div class="matchRow">
<div class="matchCell">LOCAUX</div>
<div class="matchCell">{[TeamRenderer(values.HOMETEAMID)]}</div>
</div>
<div class="matchRow">
<div class="matchCell">VISITEURS</div>
<div class="matchCell">{[TeamRenderer(values.GUESTTEAMID)]}</div>
</div>
<div class="matchRow">
<div class="matchCell">DATE</div>
<div class="matchCell">{DATE:date('d M Y')} - {TIME:date('G:i')}</div>
</div>
<div class="matchRow">
<div class="matchCell">PLACE DE JEU</div>
<div class="matchCell">{[PlayGroundRenderer(values.PLAYGROUNDID)]}</div>
</div>
</div>
{[convocationsRenderer(values.CONVOCATION)]}
</div>
</tpl>
</Html>Code:
.matchTable {
/*width:300px;*/
display: table;
}
.matchRow {
width: 100%;
display: table-row;
}
.matchCell {
padding: 3px;
margin: 3px;
border-style: none none solid none;
border-width: 1px;
border-color: #C0C0C0;
display: table-cell;
}
.matchTableCaption {
margin-top: 5px;
display: table-caption;
text-align: center;
font-weight: bold;
}
.match-view .x-panel-body {
background: white;
font: 11px Arial, Helvetica, sans-serif;
}
.match-view .thumb-wrap {
float:left;
margin: 4px;
margin-right: 0;
padding: 4px;
border: 1px solid #999999;
}
.match-view .thumb-wrap span {
display: block;
overflow: hidden;
text-align: center;
width: 86px; // for ie to ensure that the text is centered
}
.match-view .x-item-over{
border: 1px solid #dddddd;
background: #efefef url(../../Shared/images/row-over.gif) repeat-x left top;
padding: 4px;
}
.match-view .x-item-selected{
background: #eff5fb url(../../Shared/images/selected.gif) no-repeat right bottom;
border: 1px solid #99bbe8;
padding: 4px;
}je vous remercie d'avance
Aucun commentaire:
Enregistrer un commentaire