GAAP Membre

by matmat

HTML

<div class="contenuWL">
    <div class="ligneSAGA1">
        <div class="ligneSAGA1-1"> <span> Corvette 1974 stingray </span>

        </div>
        <div class="ligneSAGA1-2"> <span>Auto-Moto / Collection  </span>

        </div>
    </div>
    <div class="ligneSAGA1" style="height:153px;">
        <div class="ligneSAGA1-3"> <a> <img alt="ahah"/></a>

        </div>
        <div class="ligneSAGA1-4">
            <div class="ligneSAGA1-5">
                <div class="ligneSAGA1-6">
                    <p class="prix">1200 €</p>
                </div>
                <div class="ligneSAGA1-6">
                    <p>84240 - La tour d'aigues</p>
                </div>
            </div>
            <div class="ligneSAGA1-5">
                <div class="ligneSAGA1-6">
                    <p>A retirer sur place</p>
                </div>
                <div class="ligneSAGA1-6">
                    <p>&nbsp;</p>
                </div>
            </div>
            <div class="ligneSAGA1-5" style="border-top:1px solid #F5E6E6;">
                <div class="ligneSAGA1-7">
                    <p>Mis en ligne le 24 mars 2014 par <a>John Calagan</a>

                    </p>
                </div>
                <div class="ligneSAGA1-8" id="vp_1">
                    <p ><a >voir plus</a>

                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="ligneSAGA2" id="tp_1">
        <div class='outer2'> <a href="-" class='continner'>
        <div class='inner2'></div>

    </a>

            <div class="inner4"><a> <img alt="ahah"/></a><a> <img alt="ahah"/></a><a> <img alt="ahah"/></a></div>
            <div class="inner5">
                1. Une super corvette de la classe
                <br/>
                2. Elle est vraiment trop super
                <br/>
            </div>
        </div>
    </div>

CSS

.outer2 {
    padding-left: 23px;
    position: relative;
    height:auto;
    width:100%;
    min-height:100px;
    background:white;
}
.inner2 {
    left:0;
    position:absolute;
    height:100%;
    width:15px;
    border-right: 1px  solid grey;
    border-top: 1px  solid grey;
    border-bottom: 1px  solid grey;
    background:#ddf;
}

.inner4 {
    margin-top:20px;
    width:94%;
    background:white;
    min-height:100px;
    border-bottom: 1px  solid #F5E6E6;
}

.inner4 img{
width:80px;
height:80px;
}
.inner4 a {
width:31.5%;
text-align:center;    

    display:inline-block;
    height:100px;
    line-height:100px;
}
.inner5 {
    margin-top:5px;
    width:100%;
    background:white;
    font-family:calibri;
    font-size:14px;
    padding-bottom:10px;
}
.inner2 a:hover{
 background:red;   
}

.contenuWL {
    vertical-align: middle;
    display: inline-block;
    margin-top:10px;
    margin-bottom:20px;
    width:100%;
    margin-right:auto;
    margin-left:auto;
    overflow:hidden;
    min-height :300px;
    background-color:#F7F7FF;
    border:1px solid #F5E6E6;
    border-radius:0px 30px 0px 30px;
    padding-bottom:30px;
    box-shadow: 1px 1px 3px #808080;
    opacity:0.92;
    filter: alpha(opacity=92);
}
.menutopWL {
    width:100%;
    height:30px;
    border-bottom:solid #990000 1px;
    clear:both;
}
.menutopWL span {
    float: right;
    margin-left:10px;
    margin-right:10px;
}
.menutopWL img {
    width:22px;
    height:22px;
    margin-top:3px;
    opacity:0.8;
    filter: alpha(opacity=80);
}
.barrenavmort {
    float: none;
    display: inline;
    margin-right:10px!important;
    vertical-align:middle;
    line-height:20px;
    height:20px;
    font-family: Constantia, Palatino, serif;
    font-style: normal;
    font-size:10px!important;
    cursor:default!important;
}
.barrenav {
    float: none;
    display: inline;
    margin-right:10px!important;
    vertical-align:middle;
    line-height:20px;
    height:20px;
    font-family:...

JavaScript

$(document).ready( function(m) {
$(document.body).on('click','.ligneSAGA1-8',function(event) {
    
     var elementType =   $(this).attr('id');
    $('#tp_1').toggle('slow');
    
    });  
    $(document.body).on('click','.inner2',function(event) {
    
     var elementType =   $(this).attr('id');
    $('#tp_1').toggle('slow');
    event.preventDefault;
        return false;
    }); 
});