28173 sujets

CSS et mise en forme, CSS3

http://diwatt.free.fr/web%20obs/
Sur cette page le graphisme a fait une presentation tabulaire.
Tout est fait en dessin a l'origine. J'ai du tout transferer en html-xhtml
Sachant que la zone de contenu de la partie résultat grandit en fonction des resultats de recherche.
Je n'ai pas reussis a respecter cette presentation sans utilisé de tableau.
Mais en xhtml strict impossible de mettre cellpadding et cellspacing dans ma page.
donc voila pour resumé quel DTD dois je utilisé pour avoir le droit de placer cellpadding et cellspacing dans ma page?
Ou sinon peut etre avez vous une solution pour ça ?

Pour l'instant cela ce presente comme ceci
Internet Explorer
FireFox
HTML

<table id="resultbgetcont">
	<tr>
		<td class="deb"><a href="#"><img src="loupe.gif" alt="loupe" /></a></td>
		<td class="mid">b</td>
		<td class="mid">c</td>
		<td class="mid">d</td>
		<td class="fin">ASNIERES SUR SEINE</td>
	</tr>
	<tr>
		<td class="deb"><a href="#"><img src="loupe.gif" alt="loupe" /></a></td>
		<td class="mid">g</td>
		<td class="mid">h</td>
		<td class="mid">i</td>
		<td class="fin">PARIS</td>
	</tr>
	<tr>
		<td class="deb"><a href="#"><img src="loupe.gif" alt="loupe" /></a></td>
		<td class="mid">l</td>
		<td class="mid">m</td>
		<td class="mid">n</td>
		<td class="fin">MARSEILLES</td>
	</tr>
	<tr>
		<td class="deb"></td>
		<td class="mid"></td>
		<td class="mid"></td>
		<td class="mid"></td>
		<td class="fin">MORSANG SUR ORGE</td>
	</tr>
	<tr>
		<td class="deb"></td>
		<td class="mid"></td>
		<td class="mid"></td>
		<td class="mid"></td>
		<td class="fin"></td>
	</tr>
	</table>	

CSS

#resultbgetcont {
	border-collapse: collapse;
	margin-left:12px;
	width: 514px;
	font-size:9px;
	text-align:center;
	}
#resultbgetcont tr {height: 18px;}
.mid {background: url(resultbg.gif) no-repeat 50% 0; border:}
.deb {background: url(resultbg.gif) no-repeat 0 0; width: 26px;}
.fin {background: url(resultbg.gif) no-repeat 100% 0; width: 175px; text-align:left;}

Modifié par Diwatt (21 Mar 2006 - 17:01)
Bonjour Diwatt,

Si ça peut te rassurer, l'utilisation de la balise <table> convient parfaitement à ce que tu souhaites afficher. A savoir, des données extraites d'une base de données. Pour tes problèmes de mise en forme du tableau, tu peux utiliser le doctype XHTML 1.0 Transitional qui t'autorisera à rentrer les attributs "cellpadding" et consorts (interdit en "Strict") ou piloter la présentation avec CSS, puisque CSS est là pour ça.

Sur cette page tu as un exemple de tableau que j'ai mis en forme avec CSS.
Ne te focalises pas sur la non validation de cette page avec le doctype XHTML 1.0 Strict. Je vais le basculer en Transitional.

Je t'invite aussi à lire ce très bon article d'Openweb sur le thème.

A+ Smiley cligne