Annonce BOX1

by matmat

HTML

<div class="annoncewrapper">
    <div class="annoncebox">
        <div class="annonce1-1">
            <div class="changeimage h40 w40 pos1">
                <img src="http://www.junkst.com/Images/Icones/upload.png" alt="Junkst" title="Junkst" />
            </div>
 
            <div class="imagewrapper">
                <img src="http://www.junkst.com/Images/Icones/logo_junkst.png" alt="Junkst" title="Junkst" />
            </div>
        </div>
        <div class="annonce1-2">
            <div class="wrappertable">
                <div class="row1 h60">
                    <div class="cl2 price">1200€</div>
                    <div class="cl2 lh20">
                        <p>o</p>
                        <p>o</p>
                        <p>o</p>
                    </div>
                </div>
                <div class="row1 h60">
                    <div class="cl2">A retirer sur place</div>
                    <div class="cl2">69200 / Charentay</div>
                </div>
                <div class="row1 h30">
                    <div class="cl1 pre1">Mis en ligne le 24/06/2014</div>
                    <div class="cl2">
                        <p style=""> <a id="supp.3" class="SupprimerSAAP" title="Supprimer" onclick="event.preventDefault(); return false;" href="#">

    <img alt="" style="background:transparent;" src="http://www.junkst.com/Images/Icones/Trash.png" class="h20"></img>

</a>
 <a id="edit.3" class="EditerSAAP" title="Editer annonce" onclick="event.preventDefault(); return false;" href="#">
        <img alt="" style="background:transparent;" src="http://www.junkst.com/Images/Icones/Set.png" class="h20"></img>
    </a>

                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
     <div class="displayad h40 lh40 pos2">
       Afficher plus! 
      </div>
                <div class="undercover w40 h40">
                <img...

CSS

html {
    font-size:100%;
}
.h60 {
    height:60px;
}
.h40 {
    height:40px;
}
.h40 {
    line-height:40px;
}
.w40 {
    width:40px;
}
.h30 {
    height:30px;
}
.h20 {
    height:20px;
}
.lh20 {
    line-height:20px;
}

.annoncewrapper {
    position:relative;
    width: 800px;
    margin:auto;
}
.annoncebox {
    display: table;
    width:100%;
    border-spacing:10px 0px;
}
.annoncebox:first-child {
}
.annoncebox > div {
    display: table-cell;
    position: relative;
    color: #777;
    text-align: center;
    vertical-align: middle;
    border-spacing:0px 0px;
}
.annonce1-1 {
    padding:20px;
    z-index: 2;
    background: #eee;
    box-sizing:border-box;
    border:1px solid gainsboro;
    position:relative;
}
.changeimage {
    background:grey;
    border:1px solid gainsboro;
    padding:2%;
    position:absolute;
    box-sizing:border-box;
    cursor:pointer;
}
.pos1{
        top:15%;
    left:-5%;
}
.pos2 {
    bottom:0%;
    right:1.1%;
    z-index:10;
}
.changeimage img {
    height:100%;
}
.changeimage:hover{
    background:#FF7000;
}
.imagewrapper {
    width: 150px;
    height:150px;
}
.annonce1-1 img {
    height:100%;
    width:auto;
    display:block;
}
.annonce1-2 {
    width: 100%;
    z-index: 1;
    background:;
    border:1px solid gainsboro;
    padding:20px;
}

.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;
}
.displayad {
    background:grey;
    border:1px...