WL Box

by matmat

HTML

<div id="Mainwrapper">
    <div class="ligneWL1 h40 lh40">
        <div class="helper"></div>
        <div class="ic1WL1 h40 lh40"><a href="#" onclick="event.preventDefault(); return false;"><img src="http://www.junkst.com/Images/Icones/arrowdownWL.png" onclick="javascript:toggleDisplay('<?php echo $vardiv;?>');" alt=""  /></a>

        </div>
        <div class="enteteWL1  h40 lh40" id="
            <?php echo 'intitule_'.$wlid;?>" onclick="javascript:toggleDisplay('
            <?php echo $vardiv;?>');" class="WLentete" style="border:none!important;">Mon idée</div>
        <div class="ic1WL1 h40 lh40" id="<?php echo 'premiumdiv_'.$wlid; ?>"> <a href="" onclick="event.preventDefault(); return false;" class="premiumflag" id="<?php echo 'premium.'.$wlid;?>" title=""><img src="http://www.junkst.com/Images/Icones/Premium.png"  style="" alt="" /></a>	
        </div>
        <div class="ic1WL1 h40 lh40"> <a href="#" onclick="event.preventDefault(); return false;" id="<?php echo 'supp.'.$wlid;?>" class="SupprimerWLE" title="Supprimer"><img src="http://www.junkst.com/Images/Icones/Trash.png"  style="" alt="" /></a>

        </div>
        <div class="ic1WL1 h40 lh40"> <a href="#" onclick="event.preventDefault(); return false;" id="<?php echo 'edit.'.$wlid;?>" class="editerWLE" title="Editer tout (éditez les éléments par double clic)"><img src="http://www.junkst.com/Images/Icones/Set.png"  style="" alt="" /></a>	
        </div>
    </div>
    <div class="WL2wrapper">
        <div class="WL2-1">
            <div class="wrappertable">
                <div class="row1 h40">
                    <div class="cl2 w50p">L'idée est pour</div>
                    <div class="cl2 w50p">Afficher pour le groupe</div>
                </div>
                <div class="row1 h40">
                    <div class="cl2">
                        <select name="CHILD" id="SELECTCHILD_1" class="SELECTCHILD" onclick="inlineModSelect(1, this, 'WL_WIS_CHILD', 'texte');">
                         ...

CSS

#Mainwrapper {
    /* hautr de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    width:813px;
    box-shadow: 1px 2px 8px #808080;
    border:1px solid grey;
    padding-bottom:3%;
    position:relative;
}
a {
    text-decoration:none;
    color:#900;
}
.h10 {
    height:20px;
}
.w10 {
    width:20px;
}
.h20 {
    height:20px;
}
.lh20 {
    line-height:20px;
}
.h30 {
    height:30px;
}
.w30 {
    width:30px;
}
.w40 {
    width:40px;
}
.lh30 {
    line-height:30px;
}
.h40 {
    height:40px;
}
.lh40 {
    line-height:40px;
}
.h60 {
    height:60px;
}
.lh60 {
    line-height:60px;
}
.w60 {
    width:60px;
}
.helper, .imgcontent70, .imgcontent2, .contentmaintitle, .imgcontent3, .imgcontent50 {
    /* on permet à ces éléments de s'aligner verticalement */
    display:inline-block;
    vertical-align:middle;
}
.helper {
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    height:100%;
}
.row1 {
    background:whitesmoke;
    vertical-align:middle;
    width:100%;
    display:table-row;
}
.cl1 {
    display:table-cell;
    vertical-align:middle;
    width:40%;
}
.pre1 {
    font-size:0.9rem;
    font-style:italic;
}
.cl2 {
    display:table-cell;
    vertical-align:middle;
}
.cl2 p {
    display:block;
    height:20px;
    padding:0;
    margin:0;
}
.cl2 img {
    margin-left:3%;
}
.price {
    color:#FF7000;
    font-family:Georgia;
    font-size:1.3rem;
}
.row2 {
    display:block;
    background:white;
    width:100%;
}
.wrappertable {
    display:table;
    width:100%;
    border:1px solid gainsboro;
}
.changeimage img {
    height:100%;
}
.changeimage:hover {
    background:#FF7000;
}
.imagewrapper {
    width: 150px;
    height:150px;
}
.changeimage {
    background:grey;
    border:1px solid gainsboro;
    padding:2%;
    position:absolute;
    box-sizing:border-box;
    cursor:pointer;
}
/****** ********/
 .ligneWL1 {
    box-sizing:border-box;
    margin-right:0px;
    margin-left:0px;
   ...