Account

by matmat

HTML

<div id="Mainwrapper">
    <div class="accountheader">
        <div class="accountmaininfo h50"></div>
        <div class="accountmaininfowrapper">
            <div class="accountmaininfo h50 lh50 userstatsccount">24 contacts - 25 annonces</div>
            <div class="accountmaininfo h50 lh50 usernameaccount">John Calagan</div>
        </div>
        <div class="accountmaininfo h50"></div>
        <div class="imageaccount">
            <div class="imagewrapper">
                <img src="http://www.junkst.com/Images/Icones/logo_junkst.png" alt="Junkst" title="Junkst" />
                <div class="changeimage h40 w40 pos1">
                    <img src="http://www.junkst.com/Images/Icones/upload.png" alt="Junkst" title="Junkst" />
                </div>
            </div>
        </div>
    </div>
    <div class="accountcontent">
        <div class="maintitle h40 jqaccountdisplay">
            <div class="wrapper1">
                <div class="helper"></div>
                <div class="imgcontent70">
                    <img src="http://www.junkst.com/Images/Icones/account.png" alt="Junkst" title="Junkst" />
                </div>
                <div class="contentmaintitle">Mon <span class="cOR"> Identité</span>

                </div>
            </div>
            <div class="wrapper2">
                <div class="helper"></div>
                <div class="imgcontent50">
                    <img src="http://www.junkst.com/Images/Icones/pencil.png" alt="Junkst" title="Junkst" />
                </div>
            </div>
        </div>
        <div class="formaccount">
            <form class="moncompte" name="InfoPersoForm" id="InfoPersoForm" action="#" method="post">
                <p>
                    <label class="lbl-formulaire" for="id_forname">prenom :</label>
                    <input id="id_forname" name="id_forname" class="txt-formulaire" type="text" maxlength="20" value="<?php if (isset($_POST['id_forname'])){echo $_POST['id_forname'];} else...

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:30px;
}
a {
    text-decoration:none;
    color:#900;
}
.h10 {
    height:20px;
}
.w10 {
    width:20px;
}
.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;
}
.h50 {
    height:50px;
}
.lh50 {
    line-height:50px;
}
.h60 {
    height:60px;
}
.lh60 {
    line-height:60px;
}
.w60 {
    width:60px;
}
.helper, .imgcontent70, .imgcontent2, .contentmaintitle, .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, .contentmaintitle {
    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;
}
.maintitle {
    /* 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;
}
#Mainwrapper {
    /* hautr de la fenêtre, par...

JavaScript

$(document.body).on('click', '.jqaccountdisplay', function (event) {

    $(this).next('.formaccount').toggle();
});