Manipuler div<class="class1 class2"> dans une css

Bonjour,

j'ai trois div dans plusieurs td d'une même tr:

div<class="class1 class2">
div<class="class1 class3">
div<class="class1 class4>

comme les deux premières div ont des contenus de hauteur variable, ma dernière div se retrouve affichée à des hauteurs également variées dans mes différentes colonnes.

je souhaite donc coller dans ma feuille de style un vertical-align: bottom qui me colle cette troisième div en bas de chaque td.

j'ai essayé en vain plusieurs orthographes basées sur class1 class4
(précédées d'un #block-views-truc-block, car c'est à l'intérieur d'un block de views pour drupal, mais peu importe)

est-ce du domaine du rêve ou est-ce possible ?

ps : est-ce clair ?
Modifié par corbintheone (29 Aug 2012 - 17:35)

Non, ce n'est pas clair du tout.
On ne peut pas savoir à quoi correspondent tes classes si tu ne postes pas la css correspondante.

Idéalement, mets un lien pour une démo en ligne.

le code qui est presque explicite pour l'identification des zones de l'image: product est la zone "ajouter au panier"

<table class="views-view-grid cols-4">
<tbody>
<tr class="row-1 row-first row-last">
<td class="col-1 col-first">
<div class="views-field views-field-title">
<div class="views-field views-field-field-image">
<div class="views-field views-field-field-product">

dans un premier temps, j'aimerais placer les "ajouter au panier" au même niveau.
(après, je verrai pour les images)
Modifié par corbintheone (29 Aug 2012 - 19:00)

Bonjour,

tu as besoin que ça s'affiche correctement dans quels navigateurs ?
Et dans quelles versions d'IE est-ce que ça pourrait s'afficher sans alignement vertical correct, comme actuellement ?
En résumé quelle compatibilité ?

Felipe a écrit :
tu as besoin que ça s'affiche correctement dans quels navigateurs ?

comme le laisse penser l'image, la destination est un site d'e-commerce, voire m-commerce.
donc, une compatibilité la plus élargie possible, pour une clientèle dont je pense qu'elle sera majoritairement IE toutes versions (actifs->bureau et retraités/inactifs->domicile)

pour ma part, je travaille sur firefox 15, et teste sur IE 9 et Chrome 21

j'ai tardé un peu avant de mettre le code,car j'ai espéré y arriver avec ces Démos des techniques de centrage vertical ... mais non

<table class="views-view-grid cols-4">
<tbody>
<tr class="row-1 row-first row-last">
<td class="col-1 col-first">
<td class="col-2">
<div class="views-field views-field-title">
<div class="views-field views-field-field-saison">
<div class="views-field views-field-field-image">
<div class="views-field views-field-field-product">
</td>
<td class="col-3">
<td class="col-4 col-last">
</tr>
</tbody>
</table>

et pour la <div class="views-field views-field-field-product"> que je voudrais coller en bas des td col-1, col-2 et caetera

div.views-field.views-field-field-product {
    vertical-align: bottom;
}
tr td, tr th {
    text-align: left;
}
table.views-view-grid {
    color: #FFFFFF;
}
table {
    border-spacing: 0;
    font-size: 0.857em;
}
#header, #footer-wrapper, #skip-link, ul.contextual-links, ul.links, ul.primary, .item-list .pager, div.field-type-taxonomy-term-reference, div.messages, div.meta, p.comment-time, table, .breadcrumb {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
    border-collapse: collapse;
}
body, body.overlay {
    color: #505050;
}
body, #site-slogan, .ui-widget, .comment-form label {
    font-family: Georgia,"Times New Roman",Times,serif;
}
body {
    font-size: 87.5%;
    line-height: 1.5;
    word-wrap: break-word;
}

et le lien du site et en l'occurrence le dernier bloc