Notf

by matmat

HTML

<div id="notifwrapper">
    <div class="notiftitle">
        <?php echo $row_count;?>Demandes en attente</div>
    <div class="listerelations" style="">
        <div class="parenthtml h30">
            <div class="wrapper1 wrapper1-w2">
                <div class="helper"></div>
                <div class="imgcontent70 ml5">
                    <img src="http://www.junkst.com/Images/Avatars/8.jpg" alt="Junkst" title="Junkst" />
                </div>
                <div class="imgcontent2 ">John Calagan</div>
            </div>
            <div class="dhtml h30 l30">	<span class="helper"></span>
	<a href="-" title="Gérer groupes" class="ajoutcontactgroupe" id="<?php echo 'ajcontact.'.$row['M_ID'];?>" onClick="event.preventDefault(); return false;">
						<img src="http://www.junkst.com/Images/Icones/arrowdown.png"  style=" opacity:.6;filter: alpha(opacity=.6);" alt="" />
						</a>

                <div class="dhtml2 lh20">
                    <p class="titleggbox">Actions</p>
                    <p><a href="#">Accepter</a> 
                    </p>
                    <p><a href="#">Refuser</a> 
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

html, body {
    /* suppression des éventuels styles par défaut */
    margin:0;
    padding:0;
    font-size:100%;
    /* on spécifie un repère pour le calcul des hauteurs */
    height:100%;
    font-family:Georgia;
    padding:10px;
}
a {
    text-decoration:none;
    color:#900;
}
.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;
}
#Relations {
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    width:339px;
    border:1px solid grey;
    box-shadow: 1px 2px 8px #808080;
    padding-bottom:1%;
}
.Title {
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    background:whitesmoke;
    box-sizing:border-box;
    border-bottom:1px solid gainsboro;
}
.helper, .imgcontent70, .imgcontent2, .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%;
}
.imgcontent70 {
    /* des dimensions au hasard */
    height:70%;
    margin-left:2%;
    /* on le rend visible */
}
.imgcontent70 img {
    height:100%;
}
.imgcontent50 {
    height:50%;
    margin-left:2%;
}
.imgcontent50 img {
    height:100%;
}
.imgcontent2 {
    margin-left:2%;
    color:#808080;
}
.imgcontent3 {
    /* des dimensions au hasard */
    height:50%;
    cursor:pointer;
    /* on le rend visible */
}
.imgcontent3 img {
    height:100%;
}
.wrapper1 {
    width:85%;
    height:100%;
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
}
.wrapper2 {
    width:10%;
    height:100%;
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
}
.publiwrapper {
    position:relative;
    width:90%;
    margin:auto;
   ...