Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML5, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance
https://forum.phpfrance.com/

Positionnement interminable et désesperant

https://forum.phpfrance.com/viewtopic.php?f=6&t=264961

Page 1 sur 1

Positionnement interminable et désesperant

Posté : 15 juil. 2012, 18:13
par WikiRage
C'est désesperant le positionnement en CSS :mrgreen: 
<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;
	}
1/ Ce dimanche, je n'arrive pas à mettre la colonne n°3 sur TOUTE la zone orange, même si la colonne 3 est vide
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... :priere:
@+WikiRage
PS: j'ai un meilleur affichage de mes sources avec notepad++. désolé pour le visuel ;)

Re: Positionnement interminable et désesperant

Posté : 15 juil. 2012, 22:04
par sirakawa
Pourquoi mets-tu tantôt <div id ='qqch'> et tantôt <div class = 'autrechose'> ?

Re: Positionnement interminable et désesperant

Posté : 16 juil. 2012, 18:13
par WikiRage
J'ai lu quelque part que les id (# en css) sont pour une utilisation unique et les class (. en css) pour une utilisation récurrente.
J'applique ce que j'ai lu, enfin j'essaie ^^

Si mes soucis viennent de là je zap les id ou les class ?

@+WikiRage

Re: Positionnement interminable et désesperant

Posté : 16 juil. 2012, 19:12
par xTG
T'appliques le bon principe.
Après je ne saurai t'aider sur ton problème, je suis loin d'être un as en CSS. :mrgreen:

Re: Positionnement interminable et désesperant

Posté : 17 juil. 2012, 20:05
par momox
T'appliques le bon principe.
Après je ne saurai t'aider sur ton problème, je suis (loin d'être) un (n)as(e) en CSS. :mrgreen:
:-*

Re: Positionnement interminable et désesperant

Posté : 18 juil. 2012, 18:36
par WikiRage
Ca ne m'aide pas beaucoup tout ça :cry:

J'avoue être désespéré; 5 heures dimanche, 2 heures depuis et malgré tout les réglages possibles....je trouve pas. Même si ca ne bloque pas pour autant mon projet, la mise en page est un cap important et au combien difficile aux vues de nombreux sujets inline/block sur les forum un peu partout.

Enfin, je trouverai bien un jour ce qui cloche : obligatoire au bout d'un moment. :roll:

Un peu d'aide pour me mettre sur la voie quand même ? :priere: :priere: :priere: :priere: :priere: :priere:

@+WikiRage
PS1: toc-toc un pro du CSS ?
PS2: j'apprend les requetes SQL maintenant, hop !
PS3: j'aime pas cette console qui me console pas
Heures au format UTC+02:00
Page 1 sur 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/