[resolu]Que pensez vous du code de ma page?

Question

nath-0-0

1 Nov 2005 à 16:36

bonjour,

Je voulais savoir ce que vous pensiez du code de ma page.
Je vous fourni ci-joint ma feuille de style et la page html.
Voila, je me suis mise il y'a peu de temps à tenter de rendre mon code conforme aux standard et je voulais savoir si j'etais sur la bonne voie Smiley biggrin

!!
J'ai abandonné les tableaux depuis peu et voilà ke résultat....hem, hem!


/*--------------------------------------------------------------------------------------------- */
/*--------------------------------------C O M M O N------------------------------------ */
/*--------------------------------------------------------------------------------------------- */
body 
{
  	background-color:#FFFFFF ; /* couleur de fond */
  	margin:0px 0px; /* suppression de toutes les marges */ 
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px; 
  	padding: 0px;
	color:#000000;
}
a
{
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	text-decoration:none; 
	color: #FF6600;
	font-stretch:semi-expanded;
	font-variant:small-caps;
}
a:hover 
{
	color: #0033FF;
}
a:focus  
{
	color: #0033FF;
}
div#conteneur
{
	width: 770px;
	margin: 0px auto;
	text-align: left;
	padding: 5px 0px;
}
h1#header
{
	height: 50px;
	background-color:#000066;
	margin: 0px; 
	padding: 0px;	
}
ul#menu
{
	height: 2em;
	margin: 0px;
	padding: 0px;
	background-color:#0033FF;
	list-style-type: none ;
	position: relative;
}
				
		ul#menu li
		{
			float: left ;
			margin: 0px;
			padding: 0px;
			text-align: center ;
		}
		
		ul#menu li a
		{
			width: 180px;
			line-height: 2em;
			font-size: 1em ;
			font-weight:bolder;
			letter-spacing: 2px ;
			color: #FF9933;
			display: block;
			text-decoration: none ;
			font-variant:small-caps;
		}
		ul#menu li a:hover
		{
			color:#0033FF;	
			background-color:#FF9933;
		}
#StandardButton 
{
	 width:auto;
	 font-family: Verdana, Arial, Helvetica, sans-serif; 
	 font-size: 1.3em;
	 border: 1px solid #FF9933;
	 color:#FF9933;	
	 font-weight:bold;
	 background-color:#0033FF;

 }
div#contenu
{
	padding-bottom: 10px;
	margin:0px 0px;
	width: 770px ;
	text-align: left;
	color: #FF9933 ;
	border: 1px solid #0033FF;
	margin-bottom:10px
}
	div#contenu h2
	{	height:1.5em;
		padding-left: 5px ;
		font-size: 1.2em;
		color: #FF9933;
		background-color:#0033FF;
		margin: 0px 
	}

	div#contenu p
	{
		margin: 10px;
		text-align: justify ;
		text-indent: 2em ;
		line-height: 1.7em ;
	}
/*--------------------------------------------------------------------------------------------- */
/*-----------------------------R E C H E R C H E--------------------------------- */
/*--------------------------------------------------------------------------------------------- */
.rechck /*---- pour check box 4 elements-- */
{
	height: 2em;
	margin: 0px;
	padding: 0px;
	list-style-type: none;

}

		.rechck li
		{	float: left;
			margin: 0px;
			padding: 0px;
			text-align: left;
			width : 130px
		}

.rech /*---- pour autres 3 elements-- */
{
	height:  2em;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
				
		.rech li
		{	float: left;
			margin: 0px;
			padding: 0px;
			text-align: left;
			width : 165px;
			white-space:nowrap
		}

.contenurech 
	{
		padding: 0px;
		margin: 5px;
		text-align: justify ;
		line-height: 1.5em ;
		text-indent: 0em;
		color:#000000;
		
	}
		
.rechtxt
{
	height: 1.5em;
	width :30%;
	margin: 0px;
	padding: 0px;
	float: left ;
	position: relative;
}
span#rechtxtr
{
	height: 1.5em;
	width : 210px;
	margin: 0px;
	padding: 0px;
	left:325px;
	position: relative;
}

/*--------------------------------------------------------------------------------------------- */
/*-----------------------------L I S T E  D E S  B I E N S---------------------------------- */
/*--------------------------------------------------------------------------------------------- */

div#contenusc
{
  	padding-top: 10px ;
	padding-bottom: 10px;
	margin:0px 0px;
	width: 770px ;
	text-align: left;
	color: #FF9933 ;
	margin-bottom:10px
}
div#main{
  border: 1px solid #0033FF;
  position:absolute;	
  left: 435px;
  width: 460px;
 
}
	div#main h2
	{	  

		height:1.5em;
		padding-left: 5px ;
		font-size: 1.2em;
		color: #FF9933;
		background-color:#0033FF;
		margin:0px;
		text-align: left ;
	}
			
div#recherche{
  border: 1px solid #0033FF;
  margin-top: 0px ;
  margin-right:10px ;
  width:300px;
  float: left;
  }
div#recherche h2
	{	height:1.5em;
		padding-left: 5px ;
		font-size: 1.2em;
		color: #FF9933;
		background-color:#0033FF;
		margin: 0px 
	}
	div#recherche h3
	{	height:40px;
		font-size: 1.2em;
		color: #FF9933;
		display:block;
		background-color:#0033FF;
		margin: 0px 
	}
		h3#am a
		{	margin: 5px;
			line-height: 20px ;
			font-size: 1em ;
			font-weight:bolder;
			color: #FF9933;
			display: block;
			text-decoration:blink; 
			font-variant:small-caps;
			background-color:#0033FF;

		}
		h3#am a:hover
		{
			color: #0033FF;
			background-color:#FF9933;

		}
.contenurechlb 
	{
		padding: 0px; 
		margin: 5px;
		text-align: left ;
		line-height: 1.1em ;
		text-indent: 0em;
		color:#000000;
  		font-family: Verdana, Arial, Helvetica, sans-serif; 
  		font-size: 0.9em ;
  		font-weight: normal ;
  		font-stretch:semi-condensed
	}
.trier
	{
		padding: 0px;
		margin: 5px;
		margin-top: 10px;
		text-align: left ;
		line-height: 1.1em ;
		color:#000000;
	}
div#navig
	{
		margin-top: 10px;
		text-align: center ;
		line-height: 1.1em ;
		color:#000000;
	}
span#navig
	{
		padding: 0px;
		text-align:center;
		line-height: 1.1em ;
		color:#FF9933;
	}
span#trier
	{
		padding: 0px;
		margin: 5px;
		margin-top: 10px;
		text-align:right;
		line-height: 1.1em ;
		color:#000000;
		width:300px;
	}
div#bien{
  border: 1px solid #0033FF;
  margin: 5px ;
  width:445px;
  float: left;
  }
 
div#bien p{
 	margin: 5px ;
	text-indent: 0em;
}
div#bien h2
	{	
		height:1.5em;
		font-size: 1.2em;
		color: #FF9933;
		background-color:#0033FF;
		margin: 0px ;
		width:445px;
	}
div#bien h3
	{	
		height:1.3em;
		font-size: 1.2em;
		color: #FF9933;
		background-color:#0033FF;
		margin: 0px ;
		width:445px;
		text-align:right;
	}
div#photo{
  margin: 10px ;
  width:80px;
  float: left;
  }
div#photodet{
  padding: 10px ;
  width:400px;
  }
div#descbien{
  margin: 10px ;
  width: 200px;
  float: left;
  }
.efRecherche {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	background-color: #FFFFFF ;  
	width:130px; 
	font-size: 1.1em;
	color:#FF6600;
	height:auto;
}
#efRecherche2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	 background-color: #FFFFFF ;  
	 width:80px; 
	 font-size: 1.1em;
	 height:auto;
	 color: #FF6600
}
.efRecherche3 {
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 background-color: #FFFFFF ;  
	 width:50px; 
	 font-size: 1.1em;
	 height:auto;
	 color: #FF6600
}
span#rechtxtlb
{
	height: 15px;
	margin: 0px;
	padding: 0px;
	float: left ;
	position: relative;
}
span#rechtxtrlb
{
	height: 15px;
	width : 210px;
	margin: 0px;
	padding: 0px;
	left:100px;
	position: relative;
}
/*--------------------------------------------------------------------------------------------- */
/*-----------------------------L I S T E  D E S  A G E N C E S---------------------------------- */
/*--------------------------------------------------------------------------------------------- */
ul#agence
		{
			margin-bottom:10px;
			list-style-type:none;

		}
				
		ul#agence li
		{
			float: left;
			text-align: center ;
			width:50%;
		}
p#agence
{
	margin: 10px;
	text-align: justify ;
	text-indent: 2em;

}
/*--------------------------------------------------------------------------------------------- */
/*-----------------------------M A I l i n g ---------------------------------- */
/*--------------------------------------------------------------------------------------------- */
#ml {
	padding:10px ;

}
div#btml {
	width: 460px;
	text-align:center;
	padding:10px ;
	margin:10px ;
}
/*--------------------------------------------------------------------------------------------- */
/*--------------------------------------hhhhhhhhhhhhhhhhhhh------------------------------------ */
/*--------------------------------------------------------------------------------------------- */
p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #8a0 ;
}
* html pre
{
	width: 636px ;
}
/* On dois donner une largeur au pre à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant un "hack", la combinaison " * html " permet de n'appliquer ce qui suis qu'à Internet Explorer */

pre span
{
	color: #560 ;
}
/* Couleur de texte des éléments compris dans des span eux mêmes compris dans un pre */

et


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<title>Paris-Appartements</title>
<link rel="stylesheet" href="../Nikita_style.css" type="text/css">
</head>

<body>

<div id="conteneur">	
	<h1 id="header">&nbsp;</h1>
	<ul id="menu">
		<li>
			<a Href="../pres/a_pres.html">Pr&eacute;sentation</a>
		</li>
		<li>
			<a Href="../annonce/r_simple.html" >Nos annonces</a>
		</li>
		<li>
			<a  Href="../agence/a_agence.html" >Nos agences</a>		
		</li>
		<li>
			<a  Href="../ml/a_ml.html" >Mailing List</a>			
		</li>	
	</ul>
<!-- """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""-->
<br />


<form  method="post" action="a_lbienmain.html">
<div id="contenu">	
	<h2> Votre recherche - Recherche avanc&eacute;e</h2>
	<div class="contenurech" >
		<span class="rechtxt">Type de bien</span>
		<ul class="rechck">
			<li ><input type="checkbox" name="Tbien" value="Appart" >Appartement</li>
			<li ><input type="checkbox" name="Tbien" value="Loft" >Loft</li>
			<li><input type="checkbox" name="Tbien" value="Duplex" > Duplex</li>
			<li><input type="checkbox" name="Tbien" value="Maison" > Maison</li>
		</ul>
	</div>
	<div class="contenurech" >
		<span class="rechtxt">Nombre de pi&egrave;ces minimum</span>
		<ul class="rech">
			<li>
				<select name="Nb_piecemin">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5 et +</option>
				</select>
			</li>
			<li>Surface minimum</li>
			<li><input type="text" name="Ef_surfacemin" value="" />m2</li>
		</ul>
	</div>
	<div class="contenurech" >
		<span class="rechtxt">Ascenseur indispensable à partir du</span>
		<ul class="rech">
			<li>
				<select name="Nb_Asc" value>
					<option value="1">1er</option>
					<option value="2">2&egrave;me</option>
					<option value="3">3&egrave;me</option>
					<option value="4">4&egrave;me</option>
					<option value="5">5&egrave;me</option>
					<option value="F" selected>Facultatif</option>
				</select>&eacute;tage
			</li>
		</ul>
	</div>
	<div class="contenurech" >
		<span class="rechtxt">Ville, d&eacute;partement ou code postal</span>
		<ul class="rech">
			<li><input type="text" name="Ef_ville1" value="" /></li>
			<li><input type="text" name="Ef_ville2" value="" /></li>
			<li><input type="text" name="Ef_ville3" value="" /></li>
		</ul>
	</div>
	<div class="contenurech" >
		<span class="rechtxt">&nbsp;</span>
		<ul class="rech">
			<li><input type="text" name="Ef_ville4" value="" /></li>
			<li><input type="text" name="Ef_ville5" value="" /></li>
			<li><input type="text" name="Ef_ville6" value="" /></li>
		</ul>
	</div>
	<div  class="contenurech">
		<span class="rechtxt">Type d'immeuble</span>
		<ul class="rechck">
			<li ><input type="checkbox" name="ck_timmeuble" value="pdt" >Pierre de taille</li>
			<li ><input type="checkbox" name="ck_timmeuble" value="recent" >R&eacute;cent</li>
			<li><input type="checkbox" name="ck_timmeuble" value="moderne" > Moderne</li>
			<li><input type="checkbox" name="ck_timmeuble" value="neuf" > Neuf</li>
		</ul>
	</div>
	<div class="contenurech" >
		<span class="rechtxt">Nombre de chambres minimum</span>
		<ul class="rech">
			<li>
				<select name="cb_nbChambre">
				  <option value="1">0</option>
				  <option value="2">1</option>
				  <option value="3">2</option>
				  <option value="4">3</option>
				  <option value="5">4 et +</option>
				</select>
			</li>
			<li>Surface minimum s&eacute;jour</li>
			<li><input type="text" name="Ef_ssmin" size="10" value="" />m2</li>
		</ul>
	</div>
	<div class="contenurech" >
		<span class="rechtxt">Type de bien</span>
		<ul class="rech">
			<li><input type="checkbox" name="ck_b" value="b">Balcon</li>
			<li><input type="checkbox" name="ck_jt" value="jt">Jardin ou terrasse</li>
			<li><input type="checkbox" name="ck_rdc" value="rdc">Pas de rdc</li>
		</ul>
	</div>	
	<div class="contenurech" >
		<span class="rechtxt">
			<a href="r_simple.html" >&nbsp;Recherche simple</a>
		</span>
		<span id="rechtxtr">
			<input type="submit" id="StandardButton" name="Lancer" value="Lancer la recherche" />		
		</span>
	</div>
			
</div>
</div>
</form>
</body>
</html>

merci, merci..... Smiley smile

Modifié par nath-0-0 (08 Dec 2005 - 11:08)

Tony Monast

Modérateur

1 Nov 2005 à 16:42

Bonjour nath-0-0,

Ce serait peut-être plus intéressant pour nous si tu pouvais créer une page web avec ce code et nous donner directement l'url. Nous pourrions voir le résultat, et le code en même temps.

Ce serait plus agréable. Smiley smile

Sinon on se sent comme dans La Matrice. Smiley eek

Follow the white Brocoli.

nath-0-0

1 Nov 2005 à 16:53

le probleme c'est que le site n'est pas encore en ligne...
comment faire?

Stephan

1 Nov 2005 à 19:32

Bonjour nath-0-0.

Qui me saute au nez,

Le balisage en XHTML doit se faire en minuscule :


[b][#red]<a Href="[/#][/b]

Il ne doit pas y avoir d'espace à l'intérieure d'un balise :


[b][#red]<li >[/#][/b]

<edit />
En fait, comme le fait remarquer ___seb plus bas, cette espace n'a pas de conséquences. Mais comme le sujet est « Que pensez vous du code de ma page? », mieux vaut éviter les espaces inutiles.
Modifié par Stephan (04 Nov 2005 - 05:25)

Stephan

2 Nov 2005 à 22:50

Bonjour. Ça va ? Smiley murf

___seb

2 Nov 2005 à 23:23

bonjour,

Etant donné que tout les cases à cocher on le même nom, je suppose que tu souhaite laisser choisir loft OU appartement OU ... hors les checkbox permettent classiquement de faire des choix multiples (fromage, olives, anchois ...). Je te conseille donc d'utiliser des boutons radio, spécialement fait pour cela.
-------
je profite du silence :

Stephan a écrit :
Il ne doit pas y avoir d'espace à l'intérieure d'un balise

Ce n'est pas très grave, me semble-il, dans le sens ou ça ne provequera pas de probleme (non ?). Pour les balises uniques <img src=".." />, il est par contre recommandé d'avoir un espace avant le slash ... je crois (non plus ?)

nath-0-0

3 Nov 2005 à 11:45

merci pour vos remarques... Smiley smile

mais si si il me faut des check box pour les appart,loft,maison car classiquement on peut avoir envie d'acheter un loft ou une maison mais pas d'appart...

Bon alors sinon mon code est beau??? Smiley confused

parce que je me demandais si je n'utilisais pas trop de div.
Enfin moi j'ai pas trouvé autre chose pour que mes éléments soient alligné verticalement les uns aux autres....

Sujet clos