FlagBox

by matmat

HTML

<!--<div id="flagaddbox" class="applibox">
    <table>
        <tr>
            <td><a href="#" id="addmembre" name="" class="flagaddmembre" onClick="event.preventDefault(); return false;"><img src="http://junkst.com//Images/Icones/add.png" class="h40 w40"/></a>
            </td>
            <td><a href="#" id="flagmembre" name="" class="flagaddmembre" onClick="event.preventDefault(); return false;"><img src="http://junkst.com/Images/Icones/flag.png" class="h40 w40"/></a>
            </td>
        </tr>
        <tr style="height:30px;">
            <td>Ajouter à mes contacts</td>
            <td>Marquer l'utilisateur</td>
        </tr>
    </table>
</div> -->

<div id="Contactbox" class="applibox">
	<table>
		<tr style="">
            <td style="width:33.33%;"><a href="#" id="GAAPPscaap" name="" class="applauncher" onClick="event.preventDefault(); return false;"><img src="http://junkst.com/Images/Icones/SAAP.png" class="h40 w40"/></a></td>
			<td style="width:33.33%;"><a href="#" id="SAAPPscaap" name="" class="applauncher" onClick="event.preventDefault(); return false;"><img src="http://junkst.com/Images/Icones/GAAP.png" class="h40 w40"/></a></td>
            <td style="width:33.33%;"><a href="#" id="SAAPPscaap" name="" class="applauncher" onClick="event.preventDefault(); return false;"><img src="http://junkst.com/Images/Icones/SVAP.png" class="h40 w40"/></a></td>
		</tr>
		<tr style="" >
			<td style="width:33.33%;" >Brocante</td>
			<td style="width:33.33%;" >Débarras</td>
            <td style="width:33.33%;" >Service</td>
        </tr>
		<tr style="">
            <td style="width:33.33%;"><a href="#" id="addmembrescaap" name="" class="flagaddmembre" onClick="event.preventDefault(); return false;"><img src="http://junkst.com/Images/Icones/add.png" class="h40 w40" /></a></td>
            <td style="width:33.33%;"><a href="#" id="flagmembrescaap" name="" class="flagaddmembre" onClick="event.preventDefault(); return false;"><img...

CSS

.h60 {
    height:60px;
}
.lh60 {
    line-height:60px;
}
.w60 {
    width:60px;
}
.h50 {
    height:50px;
}
.lh50 {
    line-height:50px;
}
.w50 {
    width:50px;
}
.h40 {
    height:40px;
}
.lh40 {
    line-height:40px;
}
.w40 {
    width:40px;
}
.h30 {
    height:30px;
}
.lh30 {
    line-height:30px;
}
.w30 {
    width:30px;
}
.h20 {
    height:20px;
}
.lh20 {
    line-height:20px;
}
.w20 {
    width:20px;
}
.h10 {
    height:10px;
}
.h5 {
    height:5px;
}
.applibox {
    z-index: 1;
    position: absolute!important;
    top: 0;
    left: 0;
    float: left;
    text-align: left;
    background-color:#F7F7FF!important;
    border: 6px solid gainsboro;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    font-family:'Century gothic', "lucida sans";
    font-size:0.9rem;
}
.applibox table {
    height: 100%;
    width: 100%;
    text-align: center;
    margin: auto;
    border-collapse: collapse;
}
.applibox table td {
    padding:2%;
    color:#FF7000;
}
.applibox img {
    border:none;
    text-align:center;
    vertical-align:middle;
}
.linebox td{
    border-top:1px solid #F5E6E6;
    width:100%;
    background:gainsboro;
    color:#990000;
}