28220 sujets

CSS et mise en forme, CSS3

Salut...

Mon problème est simple :
Dans l'idée de faire une mise en page sans tableau, voici ce que j'ai fait :
http://www.tours.inra.fr/urbase/internet/documentation/texto/tap/tap.php?id=1

http://www.tours.inra.fr/urbase/internet/documentation/texto/test/tableless.gif

1- Ce que ça affiche normalement
2- Si on réduit (problème au niveau du retour à la ligne)
3- Ce que j'aimerais obtenir
4- L'idéal ("Mot-clés" centré) mais pas indispensable

voici le code que j'ai utilisé :

<p>
  <span class="sNomChamp">MOTS-CLES</span>
  <span class="sContenuChamp"><?php echo $mots;?></span>
</p>
<p>
  <span class="sNomChamp">C&Ocirc;TE</span>
  <span class="sContenuChamp"><?php echo $cote;?></span>
</p>


.sNomChamp
{
  width:17%;
  float:left;
  text-align:right;
  font-weight:bolder;
}

.sContenuChamp
{
  margin-left:3%;
  width:80%;
  padding:0;
}


Si vous avez des idées... ça m'intéresse beaucoup !

Merci Smiley smile
Modifié par 84mickael (26 Apr 2005 - 15:49)
Bonjour ;
si tu utilisais des listes ou listes de définitions ? Tu pourrais ainsi appliquer les indentations que tu souhaiterais ?
(et tu obtiendais <li class=".."></li><li class=".."></li>)
Modifié par Macpom (26 Apr 2005 - 15:26)
J'avais lu ce tuto et tenté de faire pareil, sans trop comprendre, et sans utiliser de définition puisque je ne trouvais pas ça parfaitement adapté à l'utilisation que j'allais en faire... mais finalement j'me suis laissé tenter et ça marche très bien.

merci beaucoup.