menuannonce

by matmat

HTML

<script src="http://fonts.googleapis.com/css?family=Josefin+Slab"></script>
<div class="menuannonce">
    <div style="padding:6px 0;width:100%; ">
        <table style="" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td class="cellcolg" style=""><div class="menuannonceheader1">John Calagan</div><div class="menuannonceheader2"><a href="#" target="_blank"><img src="http://www.junkst.com/Images/Avatars/8.jpg" style="border:0" src="" height="80" width="80"/></a></div>

                    </td>
                    <td style="padding:14px 12px;vertical-align:top">
                        <div class="wrappermenu" style="">
                            <div class="menuannonceligne">Toutes les annonces du membre</div>
                            <div class="menuannonceligne">Toutes les annonces dans la catégorie</div>
                            <div class="menuannonceligne">Toutes les annonces dans la sous-catégorie</div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
        <div style="padding:6px 0;width:100%; ">
        <table style="" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td class="cellcolg" style=""><div class="menuannonceheader1"><span style="color:#990000;">Junkst</span>.com</div><div class="menuannonceheader2"><a href="#" target="_blank"><img src="http://www.junkst.com/Images/Icones/logo_junkst.png" style="border:0" src="" height="80" width="80"/></a></div>

                    </td>
                    <td style="padding:14px 12px;vertical-align:top">
                        <div class="wrappermenu" style="">
                            <div class="menuannonceligne">Toutes les annonces dans la localité</div>
                            <div class="menuannonceligne">Toutes les annonces dans la catégorie</div>
                            <div class="menuannonceligne">Toutes les...

CSS

.menuannonce {
    width:90%;
    box-sizing:border-box;
    border-top:1px solid gainsboro;
    border-bottom:1px solid gainsboro;
}
.menuannonce table {
    background:whitesmoke;
    width:80%;
    margin:0 auto;
}
.cellcolg {
    width:30%;
    background:gainsboro;
    padding:14px;
    text-align:center;
    vertical-align:top;
}
.menuannonceheader1{
    width:100%;height:30px;
    font-family:calibri;
    font-size:16px;
    font-weight:bold;
    color:#ff7000;
}

.menuannonceheader2{
    width:100%;height:104px;
}
.wrappermenu {
    display:inline-block;
    width:100%;
    box-sizing:border-box;
    padding-right:10px;
    padding-left:10px;
    vertical-align:middle;
    border-left:1px solid #990000;
}
.menuannonceligne {
    color:grey;
    font:12px arial, normal;
    margin:7px 0 5px;
    padding:10px;
    word-wrap:break-word;
    background:white;
    cursor:pointer;
    border-radius:2px;
}
.menuannonceligne:hover {
    background:#990000;
    color:whitesmoke;
}