Groupe box
by matmat
HTML
<div id="groupebox" class="titrerelation" style="">
<div class="manageheader">Gérer mes groupes</div>
<div class="h40">
<div class="wrapper1 wrapper1-w2">
<div class="">
<select name="listegroupe" id="listegroupe" class="groupes lh30">
<option value="00">- Membres Taggés -</option>
</select>
</div>
</div><div class="wrapper2 ">
<div class="imgcontent50" id="affichegerergroupe"><a href="#" id="SupprimerGroupe" name="SupprimerGroupe" class="groupe" title="Supprimer le groupe" onClick="event.preventDefault(); return false;">
<img src="http://www.junkst.com/Images/Icones/cancel.png" alt="Junkst" title="Junkst" /></a>
</div>
</div><div class="wrapper2 ">
<div class="imgcontent50" id="affichegerergroupe">
<a href="#" id="EditerGroupe" name="EditerGroupe" class="groupe" title="Renommer le groupe"> <img src="http://www.junkst.com/Images/Icones/pencil.png" alt="Junkst" title="Junkst" /></a>
</div>
</div><div class="wrapper2 ">
<div class="imgcontent50" id="affichegerergroupe">
<a href="#" id="AjGroupe" class="groupe" title="Ajouter Groupe"> <img src="http://www.junkst.com/Images/Icones/plus.png" alt="Junkst" title="Junkst" /></a>
</div>
</div>
</div>
<div id="p_nvgroupe" class="h40">
<label>Nouveau:</label><input name="nouveaunomgroup" id="nouveaunomgroup" class="txt-formulaire" type="text" maxlength="20" /><div
id = "ModifierNomGroupe"
name = "ModifierNomGroupe"
class = "addmodgp imgcontent70" ><img src = "http://www.junkst.com/Images/Icones/check.png"
style = "" alt=""/></div>
</div>
<div id="p_modgroupe" class="h40">
<label for = "modgroupe" style = ""> Editer: </label><input name="nouveaunomgroup" id="nouveaunomgroup" class="txt-formulaire" type="text" maxlength="20"...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;
}
.helper, .content {
/* on permet à ces éléments de s'aligner verticalement */
display:inline-block;
vertical-align:middle;
height:100%;
}
.imgcontent70, .imgcontent2, .contentmaintitle, .imgcontent3, .imgcontent50 {
/* on permet à ces éléments de s'aligner verticalement */
display:inline-block;
vertical-align:middle;
}
.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:70%;
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;
}
.wrapper1-w2 {
width:70%!important;
}
/*******/
#groupebox {
z-index: 1000;
width:300px;
display:;
position: absolute!important;
top: 0;
left: 0;
border-radius: 1px;
font-family:'Century gothic', "lucida sans";
font-size: 1rem;
color: #808080;
border: 3px solid #DCDCDC;
background-color: #FFF !important;
padding-left: 0.5%;
padding-right: 0.5%;
padding-bottom: 0.5%;
}
#groupebox...JavaScript
< p id = "p_modgroupe"
style = "" > < label
for = "modgroupe"
style = "" > Editer: < /label><input name="nouveaunomgroup" id="nouveaunomgroup" class="txt-formulaire" type="text" maxlength="20" required style=""/ > < a href = "#"
id = "ModifierNomGroupe"
name = "ModifierNomGroupe"
class = "groupe"
title = "Modifier le groupe"
onClick = "event.preventDefault(); return false;" > < img src = "/Images/Icones/check.png"
style = ""
alt = "" / > < /a>
</p > < p id = "p_nvgroupe"
style = "" > < label
for = "nvgroupe"
style = "" > Nouveau: < /label><input name="nvgroupe" id="nvgroupe" class="txt-formulaire" type="text" maxlength="20" required style=""/ > < a href = ""
id = "AjouterGroupe"
title = "Valider"
onClick = "event.preventDefault(); return false;" > < img src = "/Images/Icones/check.png"
style = ""
alt = "" / > < /a>
</p >