<body>
<!------------------------- SCRIPT --------------------------------->
<script type="text/javascript">
function visibilite(thingId) {
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "") { targetElement.style.display = "none" ; }
else { targetElement.style.display = "" ; }
}
function resetForm(){
document.getElementById("userForm").reset();
}
</script>
<!-- TITRE --------------------------------------------------------->
<div id="bandeau">
<div id="connectGauche">
<a href="index.php?erreur=logout" > <input type="button" id="deconnexion" value="Déconnexion"></a>
</div>
<div id="connectDroite">
<span id="titre">- : : : CREATION : : : -</span>
</div>
</div>
<!-- DOSSIERS ------------------------------------------------------->
<form method="post" action="creation.php" >
<div id="contenu">
<div id="formContenuGauche">
<ul class="formDossiers">
<legend class="legend1" >1 : DOSSIERS</legend><br/>
<li><input style="font-weight:bold" type="number" name="numero" id="numero" required value="00000 pour un devis" maxlength="5" /><label for="numero">Numéro</label></li>
<li><input type="date" name="date" id="date" required placeholder="Ex : xx/xx/xxxx" maxlength="10" value="<?php echo $jour . "/" . $mois . "/" . $annee ?>" /><label for="date">Date</label></li>
<li><input style="text-transform:uppercase" type="text" name="commune" id="commune" required="required" maxlength="30" /><label for="commune">Commune</label></li>
<li><input type="vartext" name="adresse" id="adresse" required="required" maxlength="30" /><label for="adresse">Adresse/lieudit</label></li>
<li><input type="text" name="cadastre" id="cadastre" required="required" placeholder="Ex : A n°100" maxlength="30" /><label for="cadastre">Cadastre</label></li>
</br>
<li><input style="font-weight:bold" type="text" name="nomClient" id="nomClient" required="required" maxlength="30" /><label for="nomClient">Nom du client</label></li>
<li><textarea rows="4" name="adresseClient" id="adresseClient" required="required"></textarea><label for="adresseClient" style="vertical-align:top">Adresse du client</label></li>
</br>
<li><select name="tech" id="tech" style="font-size: 12px">
<?php
while ($row_users = mysql_fetch_assoc($users))
{
$lib = $row_users['nom'].' '.$row_users['prenom'].' ('.$row_users['login'].')';
?>
<option value="<?php echo $row_users['id_user']?>"><?php echo $lib ?></option>
<?php
}
?>
</select><label for="tech">Choix du technicien</label></li>
</ul>
<!-- RUBRIQUES ----------------------------------------------------->
<ul class="formRubriques" >
<legend class="legend1" >2 : TYPE(S) DU DOSSIER</legend><br/>
<li><input type="checkbox" name="topo" id="topo" onChange="javascript:visibilite('boxTopo'); return false;" /><label for="topo" id="topoLabel">Topographie</label></li>
<li><input type="checkbox" name="bornage" id="bornage" onChange="javascript:visibilite('boxBornage'); return false;" /><label for="bornage" id="bornageLabel" >Bornage contradictoire</label></li>
<li><input type="checkbox" name="decpre" id="decpre" onChange="javascript:visibilite('boxDecpre'); return false;" /><label for="decpre" id="decpreLabel">Déclaration préalable</label></li>
<li><input type="checkbox" name="perame" id="perame" onChange="javascript:visibilite('boxPerame'); return false;" /><label for="perame" id="perameLabel">Permis d'aménager</label></li>
<li><input type="checkbox" name="copro" id="copro" onChange="javascript:visibilite('boxCopro'); return false;" /><label for="copro" id="coproLabel">Copropriété</label></li>
<li><input type="checkbox" name="volume" id="volume" onChange="javascript:visibilite('boxVol'); return false;" /><label for="volume" id="volumeLabel">Division en volumes</label></li>
</ul>
</div>
<!--- CONTENU ----------------------------------------------------->
<div id="formContenuDroite">
<legend class="legend1" >3 : ELEMENTS DU DOSSIER</legend>
<!-- TOPOGRAPHIE -->
<ul id="boxTopo" name="boxTopo" style="display: none;">
<legend>TOPOGRAPHIE</legend>
<li><input type="checkbox" name="topoRelter" id="topoRelter" /></li>
<label for="topoRelter" id="topoRelter">Relever terrestre</label><br />
</ul>
<!-- BORNAGE -->
<ul id="boxBornage" name="boxBornage" style="display: none;">
<legend>BORNAGE</legend>
<li><input type="checkbox" name="topo" id="topo" /></li>
<label for="topo" id="topoLabel">BORNAGE</label><br />
</ul>
<!-- D.P. -->
<ul id="boxDecpre" name="boxDecpre" style="display: none;">
<legend>Déclaration préalable</legend>
<li><input type="checkbox" name="topo" id="topo" /></li>
<label for="topo" id="topoLabel">Déclaration préalable</label><br />
</ul>
<!-- P.A. -->
<ul id="boxPerame" name="boxPerame" style="display: none;">
<legend>Permis d'aménager</legend>
<li><input type="checkbox" name="topo" id="topo" /></li>
<label for="topo" id="topoLabel">Permis d'aménager</label><br />
</ul>
<!-- Copropriété -->
<ul id="boxCopro" name="boxCopro" style="display: none;">
<legend>Copropriété</legend>
<li><input type="checkbox" name="topo" id="topo" /></li>
<label for="topo" id="topoLabel">Copropriété</label><br />
</ul>
<!-- Division en volumes -->
<ul id="boxVol" name="boxVol" style="display: none;">
<legend>Division en volumes</legend>
<li><input type="checkbox" name="topo" id="topo" /></li>
<label for="topo" id="topoLabel">Division en volumes</label><br />
</ul>
</div>
</div>
<!--- PIED DE PAGE --------------------------------------------------->
<div id="piedpage">
<ul id="navigation" >
<li><input type="button" value="Retour" onclick="javascript:history.back()"></li>
<li><input type="reset" value="Annuler" onClick="document.location.replace( 'creation.php' );"></li>
<li><input style="font-size:16px;font-weight:bold" type="submit" value="VALIDER" /></li>
</ul>
</div>
</form>
<div id="footer">
Copyright 2012----------blablabla
</div>
</body>
</html>
/*
-----------------------------------
-------- COMMUN AUX PAGES ---------
-----------------------------------
*/
body {
min-height : 600px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
padding : 0 10px;
width : 1200px;
}
#bandeau {
width:1200px;
height:40px;
background-color:#00CCFF;
}
#contenu {
display:inline-block;
width:1200px;
max-height:550px;
overflow : auto;
background-color:#FFCC00;
}
#piedpage {
width:1200px;
height:60px;
background-color:#33FF99;
}
#footer {
left: 20px;
border-top:2px solid #000000;
text-align:left;
font-size:80%;
}
a {text-decoration: none}
a:hover {text-decoration: none;}
[required]:hover {
border: 2px solid orange;
}
/*
-----------------------------------
----------- Protection ------------
-----------------------------------
*/
.erreur {
font-size: 10px;
color: #FF0000;
font-weight: bold;
}
.reussite {
font-size: 10px;
font-weight: bold;
color: #669900;
}
.donnee {
font-weight: bold;
color: #FF9900;
font-size: 12px;
}
.tableaux {
font-size: 12px;
border: 1px dotted #000000;
background-color: #eeeeee;
}
/*
----------------------------------
----------- Page HTML ------------
----------------------------------
*/
.title {
font-size: 12px;
color: black;
}
#titre {
font-size: 30px;
font-weight: bold;
color: #FF6600;
}
#connectGauche {
width : 30%;
float: left;
}
#connectDroite {
width : 70%;
float: right;
}
#deconnexion {
float:left;
width : 100px;
color: #00008B;
font-size : 14px;
font-weight: bold;
}
#formContenuGauche {
float:left;
width:400px;
background-color:#FF6699;
}
#formContenuDroite {
float:right;
box-shadow: none ;
padding : 10px ;
padding-bottom:10px;
margin : 10px;
background-color: Linen ;
border: 1px solid black;
}
#formContenuDroite li {
list-style-type: none;
line-height : 100%;
display:inline-block;
}
.formDossiers, .formRubriques {
width:360px;
box-shadow: none ;
padding : 10px ;
margin : 10px;
background-color: Linen ;
border: 1px solid black;
list-style-type: none;
}
.formDossiers input, .formDossiers select, .formDossiers textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
width : 200px;
}
.formDossiers label, .formRubriques label {
margin-left : 5px;
}
.formDossiers:hover, .formRubriques:hover, div#formContenuDroite:hover {
box-shadow: 6px 6px 6px black;
}
.legend1 {
text-decoration:underline;
font-size: 14px;
color: #FF0000;
font-weight: bold;
}
input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
box-shadow:1px 1px 1px #D83F3D inset;
}
input[type=submit], input[type=reset], input[type=button] {
margin-left:5px;
box-shadow:1px 1px 1px #D83F3D;
cursor:pointer;
padding:3px;
border:1px solid #F5C5C5;
border-radius:5px;
width:200px;
height : 35px;
}
#navigation{
padding : 10px;
text-decoration: none;
list-style-type: none;
}
#navigation li{
display : inline-block;
}
2/ impossible de virer la séparation blanche au-dessus de la zone verte
3/ je n'arrive pas à centrer les 3 boutons du bas
Pourtant cela parait simple : 4 blocs superposés - 2 blocs en ligne dans le 2eme bloc initial - 2 blocs en colonne dans le 1er bloc du 2eme bloc initial !
Je dois me perdre dans les inline, block, inline-block et float ^^
Sioupléééééé, aidez moi, même en partie...
@+WikiRage
PS: j'ai un meilleur affichage de mes sources avec notepad++. désolé pour le visuel
