28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Voici l'adresse de la page sur laquelle vous pourrez constater le problème que je rencontre :

http://reseauconseillers.free.fr/angoumois-infos/references_c.php#c

et voici le code html de la partie concernée :

<div id="colTwo">
		<h1 align="left">Références utiles</h1>
		<div class="box_ref">
		 	<p align="left" class="indent style14"><font face="Arial, Helvetica, sans-serif" size="2">Vous avez besoin d'une adresse, d'un professionnel ou d'un 
        	service ? Repérez dans la liste alphabétique ci-dessous l'objet de votre recherche, puis cliquez sur la rubrique correspondante 
			et vous accèderez alors aux coordonnées demandées. <br>
	    	Au sein de chaque catégorie, vous pourrez également repérer des références surlignées, nous vous invitons donc à 
	    	cliquer dessus et vous découvrirez un ensemble d'informations complémentaires, indispensable à la qualité de renseignement 
      		de notre annuaire.<br>
			<br>
			Bonne recherche...  !</font></p>
		 	<h2 align="center"><a name="haut"></a>LISTE ALPHABETIQUE DES CORPS DE METIERS :<br>
         	<a href="references_a.php#a">A</a> <a href="references_b.php#b">B</a> C <a href="references_d.php#d">D</a> <a href="references_e.php#e">E</a> <a href="references_f.php#f">F</a> <a href="references_g.php#g">G</a> <a href="references_h.php#h">H</a> <a href="references_i.php#i">I</a> <a href="references_j.php#j">J</a> <a href="references_k.php#k">K</a> <a href="references_l.php#l">L</a> <a href="references_m.php#m">M</a> <a href="references_n.php#n">N</a> <a href="references_o.php#o">O</a> <a href="references_p.php#p">P</a> <a href="references_q.php#q">Q</a> <a href="references_r.php#r">R</a> <a href="references_s.php#s">S</a> <a href="references_t.php#t">T</a> <span class="Style4">U</span> <a href="references_v.php#v">V</a> <span class="Style4">W X Y Z</span></h2>
		</div>
		<div class=box>
			<div class="box_liste">
		  		<h3 align="center"><a name="liste" id="liste"></a>Liste des métiers pour la lettre C</h3>
			</div>
			<div id="colThree">
		    	<p><br><a href="#1" class="style9">Cadeaux (d&eacute;tails)</a></p>
		    	<p><a href="#2" class="style8">Cadres, encadrement<br></a></p>
		    	<p><a href="#3" class="style9">Caf&eacute; (torr&eacute;faction)<br></a></p>
		    	<p><a href="#4" class="style8">Caf&eacute;s, brasseries<br></a></p>
		    	<p><a href="#5" class="style9">Caf&eacute;s, brasseries, bars<br>
		    	(mat&eacute;riel et fournitures)</a></p>
				<p><a href="#6" class="style8">Caisses enregistreuses<br></a></p>
				<p><a href="#7" class="style9">Caisses de retraite et de<br>
				pr&eacute;voyance</a></p>
				<p><a href="#8" class="style8">Camping : articles et<br>
				accessoires</a></p>
				<p><a href="#9" class="style9">Campings-cars, caravanes<br>
  				et mobile homes (vente)</a></p>
				<p><a href="#10" class="style8">Canalisations (pose,<br>
				entretien)</a></p>
				<p><a href="#11" class="style9">Cannage, rempaillage</a></p>
				<p><a href="#12" class="style8">Caoutchouc</a></p>
				<p><a href="#13" class="style9">Carrelages, dallages<br>
		    	(n&eacute;goce)</a></p>
				<p><a href="#14" class="style8">Carrelages, dallages<br>
		    	(vente, pose, traitement)</a></p>
				<p><a href="#15" class="style9">Carrosserie industrielle</a></p>
				<p><a href="#16" class="style8">Carrosserie et<br>
		    	peinture auto</a></p>
				<p><a href="#17" class="style9">Carrosseries : <br>
				fournitures pour</a></p>
				<p><a href="#18" class="style8">Cartonnages (fabrication)</a></p>
				<p><a href="#19" class="style9">Casses automobiles</a></p>
				<p><a href="#20" class="style8">Caution (soci&eacute;t&eacute;s)</a></p>
				<p><a href="#21" class="style9">Centres et associations<br>
				de gestion agr&eacute;&eacute;s</a></p>
	    	</div>
		
			<div id="colFour">
				<p><br><a href="#22" class="style8">Centres auto</a></p>
				<p><a href="#23" class="style9">Centres commerciaux<br>
			  	et grands magasins</a></p>
				<p><a href="#24" class="style8">Centres de dialyse<br> 
		    	r&eacute;nale</a></p>
		    	<p><a href="#25" class="style9">Centres &eacute;questres,<br>
		      	&eacute;quitation</a></p>
	      		<p><a href="#26" class="style8">Centres m&eacute;dicaux et<br>
		      	sociaux</a></p>
				<p><a href="#27" class="style9">Centres de vacances et de<br>
				loisirs pour enfants</a></p>
		    	<p><a href="#28" class="style8">Chalets et constructions<br>
	        	en bois (fabrication, vente) </a></p>
				<p><a href="#29" class="style9">Chambres d'h&ocirc;tes</a></p>
				<p><a href="#30" class="style8">Champs de courses et<br>
				hippodromes</a></p>
				<p><a href="#31" class="style9">Chapellerie (d&eacute;tail)</a></p>
				<p><a href="#32" class="style8">Charcuteries (d&eacute;tail)</a></p>
				<p><a href="#33" class="style9">Charcuteries (gros)</a></p>
				<p><a href="#34" class="style8">Chariots &eacute;l&eacute;vateurs</a></p>
				<p><a href="#35" class="style9">Charpentes en bois</a></p>
				<p><a href="#36" class="style8">Chaudronnerie<br>
				industrielle</a></p>
				<p><a href="#37" class="style9">Chauffage (d&eacute;pannage,<br>
				entretien)</a></p>
				<p><a href="#38" class="style8">Chauffage (exploitation de)</a></p>
				<p><a href="#39" class="style9">Chauffage (vente, installation)</a></p>
				<p><a href="#40" class="style8">Chauffage : appareils et<br>
				fournitures (d&eacute;tail)</a></p>
				<p><a href="#41" class="style9">Chauffage central : <br>
		    	mat&eacute;riel (fabrication, gros)</a></p>
				<p><a href="#42" class="style8">Chauffage &eacute;lectrique<br>
			  	(installation, d&eacute;pannage)</a></p>
			</div>
			
			<div id="colFive">
				<p><br><a href="#43" class="style9">Chaussures (d&eacute;tail)</a></p>
		  		<p><a href="#44" class="style8">Chemin&eacute;es d'int&eacute;rieur et<br>
		    	accessoires</a></p>
    			<p><a href="#45" class="style9">Chemiserie et sous<br>
		    	v&ecirc;tements masculins</a></p>
		  		<p><a href="#46" class="style8">Chiropractie (hors cadre<br>
		    	r&eacute;glement&eacute;)</a></p>
		  		<p><a href="#47" class="style9">Chocolateries, confiseries<br>
		    	(d&eacute;tail)</a></p>
		  		<p><a href="#48" class="style8">Chocolateries, confiseries<br>
		    	(fabrication)</a></p>
		  		<p><a href="#49" class="style9">Cimeti&egrave;res</a></p>
		  		<p><a href="#50" class="style8">Cin&eacute;ma (cascades)</a></p>
		  		<p><a href="#51" class="style9">Cin&eacute;ma (distribution)</a></p>
		  		<p><a href="#52" class="style8">Cin&eacute;ma (&eacute;clairage)</a></p>
      			<p><a href="#53" class="style9">Cin&eacute;ma (production, <br>
		    	r&eacute;alisation)</a></p>
		  		<p><a href="#54" class="style8">Cin&eacute;ma (salles) </a></p>
		  		<p><a href="#55" class="style9">Cin&eacute;ma: films &eacute;ducatifs,<br>
				industriels et publicitaires</a></p>
	    		<p><a href="#56" class="style8">Cirques, attractions<br>
		    	foraines</a></p>
		  		<p><a href="#57" class="style9">Cl&eacute;s (reproduction)</a></p>
		  		<p><a href="#58" class="style8">Climatisation <br>
	      		(&eacute;tudes, installation)</a></p>
		  		<p><a href="#59" class="style9">Cliniques chirurgicales </a></p>
		  		<p><a href="#60" class="style8">Cliniques m&eacute;dicales</a></p>
		  		<p><a href="#61" class="style8">Cliniques m&eacute;dicales</a></p>
		  		<p><a href="#62" class="style8">Cliniques m&eacute;dicales</a></p>
		  		<p><a href="#63" class="style8">Cliniques m&eacute;dicales</a></p>
		  		<p><a href="#64" class="style8">Cliniques m&eacute;dicales</a></p>
		  		<p><a href="#65" class="style8">Cliniques m&eacute;dicales</a></p>
		  		<p><a href="#66" class="style8">Cliniques m&eacute;dicales</a></p>
		  		<p><a href="#67" class="style8">Cliniques m&eacute;dicales</a></p>
			</div>
		</div>
			
		    <div class="box">
				<div class="box_titre">
				<h3><a name="1" id="1"></a>Cadeaux (d&eacute;tails)</h3>
				</div>
				<p> <span class="style5">Aux Iles Britaniques</span> <br>
		  		<span class="style6">1 rue d'Arcole <br>
		  		Tel.&nbsp;: 05-45-37-58-70</span></p>
				<p> <span class="style5">Cap Mekong</span> <br>
		  		<span class="style6">75 rue de Périgueux <br>
		  		Tel.&nbsp;: 05-45-38-41-80</span></p>
				<p> <span class="style5">Casa France (cadeaux détail)</span> <br>
		  		<span class="style6">15 rue de Périgueux <br>
		  		Tel.&nbsp;: 05-45-38-85-20 ou 05-45-94-32-89 (services administratifs)<br>
		  		Fax.&nbsp;: 05-45-94-30-91</span> </p>
				<p><span class="style5">Côté Maison Côté Jardin</span> <br>
		  		<span class="style6">5 rue Camille Pelletan – 16600 Ruelle-sur-Touvre <br>
		  		Tel.&nbsp;: 05-45-65-43-58</span> </p>
				<p><span class="style5">Eurêka</span> <br>
		  		<span class="style6">3 rue de la Tourgarnier <br>
		  		Tel.&nbsp;: 05-45-92-71-58 <br>
		  		Fax.&nbsp;: 05-45-94-25-19</span> </p>
				<p><span class="style5">Geneviève Lethu</span> <br>
		  		<span class="style6">27 rue Hergé <br>
		  		Tel.&nbsp;: 05-45-38-07-63 <br>
		  		Fax.&nbsp;: 05-45-95-46-57</span> </p>
				<p><span class="style5">Isis</span> <br>
		  		<span class="style6">46 rue de Périgueux <br>
		  		Tel.&nbsp;: 05-45-94-70-70</span> </p>
				<p><span class="style5">La Cigalière</span> <br>
		  		<span class="style6">73 rue de Périgueux <br>
		  		Tel.&nbsp;: 05-45-95-48-60</span> </p>
				<p><span class="style5">L’Hippogriffe</span> <br>
		  		<span class="style6">30 rue de Périgueux <br>
		  		Tel.&nbsp;: 05-45-95-11-14</span> </p>
				<p><span class="style5">Maisons du Monde</span> <br>
		  		<span class="style6">45 rue de Périgueux <br>
		  		Tel.&nbsp;: 05-45-38-74-75 <br>
		  		Fax.&nbsp;: 05-45-38-74-77</span> </p>
				<p><span class="style5">Nature et Découvertes</span> <br>
		  		<span class="style6">Place du Champ de Mars <br>
		  		Tel.&nbsp;: 05-45-66-62-60</span> </p>
				<p><span class="style5">Terre Douce - Textiles Exotiques</span> <br>
		  		<span class="style6">5 rue Fanfrelin<br>
		  		Tel.&nbsp;: 05-45-93-91-65</span> </p>
			</div>
  		  	<div class="box_liste">
				<div align="center"><a href="#liste">Retour à la liste des métiers</a></div>
			</div>


ainsi qu'un extrait de la feuille de style :

.box {
	margin-bottom: 0;
	padding-bottom: 0;
	background: url(images/img07.gif) repeat-x left bottom;
}


.box_titre {
	margin-bottom: 0;
	padding-bottom: 0;
	background: #336633
}


La box_titre devrait ne concerner que le nom de la première catégorie or son background vert remonte dans la liste des liens vers les différentes catégories et je ne comprends pas pourquoi.
Vous voulez bien jeter un œil là dessus svp? Ca m'aiderait vraiment beaucoup! C'est sans doute un problème tout bête mais je me creuse la tête depuis une semaine là dessus et je sèche.

Cordialement,

Paul
Modifié par massivatt (26 Aug 2008 - 12:22)
Salut,

Un petit tour vers le validateur ...
3011 Errors, 15 warning(s) Smiley biggol
Et plus clair tu y verras surement
Merci beaucoup d'avoir pris un moment pour me répondre! Je ne suis plus vraiment à la page et euh...qu'est ce que le validateur stp? Et puis où est ce que je peux le trouver ?
Bonjour massivat,

Pour une meilleure lisibilité, il t'a été demandé lors de ton inscription de te conformer à certaines règles de base sur ce forum, la mise en forme du code fait partie de celles-ci.( Ici la règle 13 pour la nommer qui consiste à afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace)
Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

upload/12813-1-code.gif

Concernant "le" validateur (il en existe plusieurs), il s'agit d'un outil qui te permet de vérifier que ton code est conforme (ou non...) aux recommandations du W3C :

Pour le html : http://validator.w3.org/
Pour les feuilles de styles : http://jigsaw.w3.org/css-validator/

La correction des erreurs éventuellement constatées peut résoudre bon nombre de soucis Smiley cligne

Cdt,
Sylvain
Modifié par 6l20 (26 Aug 2008 - 13:23)
Bonjour Sylvain,

Je te remercie pour ces réponses .Je suis désolé je n'avais pas compris le principe de mise en forme via le bouton code je file arranger ça! Smiley confuse

Concernant le validateur la plupart des erreurs sont en fait que je n'ai apparemment pas fermé mes retours à la ligne correctement (<br> au lieu de <br/>. Idem pour mes paragraphes apparemment. Peut être ma version de Dreamweaver est-elle obsolète je les ai insérés en mode wysiwyg...

Bien cordialement,

Paul Smiley confuse
Modifié par massivatt (26 Aug 2008 - 12:20)
C'est beaucoup mieux comme cela en effet. Encore une fois désolé. C'est dommage que la largeur de la mise en page soit si faible mais ça reste beaucoup plus lisible que précédemment! Smiley smile
Me revoilà toujours dans le pétrin...En effet après être passé par le validateur j'ai relevé de nombreuses erreurs mais toujours les mêmes : <br> au lieu de <br/>, manque l'attribut alt pour les images et utilisation de chiffres dans mes pointeurs (id=1 par ex. : je ne savais pas que l'on ne pouvait pas utiliser de chiffres..). Je corrige ces erreurs au fur et à mesure mais tout ceci ne résout pas mon problème d'affichage...ma page s'affiche d'ailleurs correctement sur IE désormais mais toujours ce background vert de ma box_titre qui déborde vers le haut. Please help me! Smiley bawling
bon j'ai trouvé une solution approximative à mon problème de débordement : j'ai remplacé mes box_titre :

.box_titre {

	margin-bottom: 0;

	padding-bottom: 0;

	background: #336633

}


par des mini tableaux :

<table width="700" bgcolor="#336633">
				<tr>
					<td class="style12"><a name="c30" id="c30"></a></span></u></b>Champs de courses et hippodromes </td>
				</tr>
			</table>


De cette manière je n'ai plus de débordement vers le haut sous firefox mais j'aurais préféré éviter l utilisation de tableaux...
La question reste donc en suspens si quelqu'un a un moment et l'envie d'y jeter un oeil...merci d avance.

Ps : dans une ultime tentative j'avais tenté d'utiliser le spacer :

<div class="box">
			<div class="box_liste">
		  		<h3 align="center"><a name="liste" id="liste"></a>Liste des m&eacute;tiers pour la lettre C</h3>
			</div>
			<div id="colThree">
<p><br/><a href="#c1" class="style9">Cadeaux (d&eacute;tails)</a></p>
		    	<p><a href="#c2" class="style8">Cadres, encadrement<br/></a></p>
...
</div>
<div id="colFour">
				<p><br/><a href="#c22" class="style8">Centres auto</a></p>
				<p><a href="#c23" class="style9">Centres commerciaux<br/>
....
</div>
<div id="colFive">
				<p><br/><a href="#c43" class="style9">Chaussures (d&eacute;tail)</a></p>
		  		<p><a href="#c44" class="style8">Chemin&eacute;es d'int&eacute;rieur et<br/>
...
</div>
<div class="spacer"> </div>

		</div>
		<div class="spacer"> </div>
		<br/>
<div class="box">
			<div class="box_titre">
				<h3><a name="c1" id="c1"></a>Cadeaux (d&eacute;tails)</h3>
			</div>


mais sans résultat malheureusement : mes box sont pourtant bien distinctes les unes des autres mais toujours ce débordement en vert sous firefox avec cette méthode là. J'imagine que c'est une question de parenté entre mes boîtes mais je n'arrive pas à comprendre d'autant plus que sur IE tout va bien.
Modifié par massivatt (30 Aug 2008 - 15:19)
J'ai l'impression que t'as un </div> en trop.
C'est celui en dessous ce code là :


<p><a href="#66" class="style8">Cliniques médicales</a></p>
<p><a href="#67" class="style8">Cliniques médicales</a></p>
</div>
Je te remercie d'y avoir regardé Osbern. En fait le premier </div> ferme <div id="colFive"> et le second </div> ferme <div class="box">. Donc je ne pense pas que le problème vienne de là. D'autres avis svp ?