my SEAP

by matmat

HTML

<div id="modifboxSAAP">
    <div class="contenuMODSAAP">
        <div class="ModifierObjet">( modifier mon annonce )<span id="closemodifSAAP">X</span>

        </div>
        <form>
            <div class="FormulaireAjouter" id="FormulaireAjouter">
                <div class="ligneSAGA1AJ">
                    <div class="ligneSAGA1AJ-1">
                        <p>
                            <label>Titre</label>
                            <input type="text" class="formulaire" maxlength="24" id="intituleMODSAAP" />
                        </p>
                    </div>
                    <div class="ligneSAGA1AJ-2">
                        						<p>
							<select id="categorieAJ" data-app="SVAP">
								<option value='00'>-- Catégorie --</option>
								<?php
								
								foreach($tabcat as $cat)
								{	
								?>
								<option value="<?php echo $cat['CAT_ID'];?>"><?php echo $cat['CAT_CATEGORIE'];?></option>
								<?php
								}
								?>
							</select>
						</p>
						<p>
							<select id="souscategorieAJ" disabled="true" data-app="SVAP">
							<option value='00'>-- Sous-Catégorie --</option>
							</select>
						</p>                        </p>
                    </div>
                    <div class="ligneSAGA1AJ-4"> <span> Description</span>

                        <textarea id="descriptionMODSAAP"></textarea>
                        <div class="ligneSAGAAJ1-main-2">Diffuser en mode discret
                            <input type="checkbox" id="modeMODSAAP" /> <span style="color:grey;">( Diffusée avec votre pseudo )</span>

                        </div>
                        <div class="ligneSAGAAJ5">
                            <div class="ligneSAGAAJ5-1" style="width:35%;">
                                <div class="ligneSAGAAJ5-1-1" style="width:45%;">Téléphone :</div>
                                <div class="ligneSAGAAJ5-1-2" style="width:45%;">
                                    <input style=" width:70%; "/>
        ...

CSS

#modifboxSAAP {
    padding:10px;
    width:535px;
    position: absolute;
    top: 10%;
    left: 50%;
    z-index: 11;
}
.ModifierObjet {
    width:533px;
    height:30px;
    line-height:30px;
    text-align:center;
    border:1px solid grey;
    vertical-align:middle;
    margin-left:auto;
    border-bottom:1px solid grey;
    box-shadow:1px 1px 5px grey;
    font-family: palatino;
    font-size: 14px;
    border: 1px solid #DCDCDC;
    letter-spacing: 1.5px;
    font-weight: bold;
    color: #808080;
    background-color: #DCDCDC;
}
.ModifierObjet span {
    float:right;
    margin-right:15px;
    display:inline-block;
    width:20px;
    height:20px;
    cursor:pointer;
    border:1px solid grey;
    line-height:20px;
    vertical-align:middle;
    margin-top:5px;
}
.ModifierObjet span:hover {
    color:white;
    border:1px dashed white;
}
.contenuMODSAAP {
    vertical-align: middle;
    display: inline-block;
    margin-top:10px;
    margin-bottom:20px;
    width:100%;
    margin-right:auto;
    margin-left:-50%;
    overflow:hidden;
    min-height :300px;
    background-color:#F7F7FF;
    border:1px solid #F5E6E6;
    padding-bottom:30px;
    box-shadow: 1px 1px 3px #808080;
}
.FormulaireAjouter {
    width:99%;
    margin-top:10px;
}
.ligneSAGA1AJ p {
    width:100%;
}
.ligneSAGA1AJ-1 input {
    width:220px;
    font-style: italic;
    font-size:16px;
    margin-left:10px;
    line-height:20px;
    margin-bottom:0px;
    padding-left:10px;
    color:#990000;
    font-weight:bold;
    font-family: Constantia, Palatino, serif;
    border: 1px solid gainsboro;
    padding: 4px 4px 4px 4px;
}
.ligneSAGA1AJ-1 input:hover {
    border:solid 1px #AAAAAA;
    color:#FF7000;
}
.ligneSAGA1AJ-1 input:active {
    color:#FF7000;
}
.ligneSAGA1AJ-1 label {
    margin-left:10px;
}
.ligneSAGA1AJ-1 {
    width:59%;
    display:inline-block;
    height:60px;
    font-family: Constantia, Palatino, serif;
    color:#990000;
}
.ligneSAGA1AJ-2 {
    width:40%;
   ...