28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Sur mon site http://aquasafaribora.com j'ai dans ma partie principale, mis mes infos dans des tableaux, comme ils me servent à la présentation ce n'est pas conforme Smiley decu
J'ai beau essayer je n'arrive pas a transformer ce tableau en div..
Sous DreamWeaver j'ai essayé de transformer mon tableau en calques (en réalité des div), la page de "données" vue seule est bonne mais dés qu'elle est incluse dans ma page (header, menu à droit, pied de page et données à gauche) tout fout le camps, infos positionnés sur la totalité du conteneur et non dans la frame et plus de scrolling (c'est la page compléte qui scroll)..
Quelqu'un pourrait il transformer le code suivant pour que cela fonctionne en me mettant quelques explication. j'ai bien des bouquins sur shtml et css mais je plane complétement, j'attend le livre de raphael pour peu etre comprendre un peu mieu (c'est pas du cirage Smiley rolleyes ).

merci...


<table width="666" border="0" cellpadding="0" cellspacing="0">
  	<!--DWLayoutTable-->
	<tr>
    	<td colspan="5" align="center" valign="middle"  >			
		<img src="../IMAGES/hd-apropos-de.gif" alt="" width="271" height="65" />		</td>
   	</tr>
	<tr>
	  <td colspan="5" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
	<tr>
    	<td colspan="5" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
    <td colspan="5" align="center">	<span class="titre"> </span>
      <div >
        <h1><span class="h1">AQUA SAFARI ORGANISATION </span></h1>
      </div>	</td>
  </tr>
<tr>
  <td colspan="5" align="center"  valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
    <td align="center" >
		
			<img src="../IMAGES/ab1.jpg" alt=""  width="288" height="190" />	</td>
  	<td colspan="3">
		<div class="bloctexte">
		   &nbsp;&nbsp;&nbsp;&nbsp;
		   Aqua safari est ouvert toute l'ann&eacute;e du lundi au samedi (le dimanche sur r&eacute;servation uniquement).<br />
		      &nbsp;&nbsp;&nbsp;&nbsp;Aqua Safari  vient vous chercher gratuitement quelque soit votre lieu d'h&eacute;bergement (bateau ou voiture.
			(Cf : Carte de Bora). <br />
&nbsp;&nbsp;&nbsp;&nbsp;
	    Anne &amp; Michel Condesse plongent depuis plus 
			de 30 ans et dirigent le centre depuis 1995. 
			<br />
		 &nbsp;&nbsp;&nbsp;&nbsp;Avec leur &eacute;quipe ils se feront un 
		   plaisir de vous faire partager leur passion du monde sous-marin		</div>	</td>
</tr>
<tr>
  	<td colspan="5" align="center" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;  	</td>
</tr>
<tr>
    <td colspan="5" align="center" valign="middle">
		<div >
		  <h1><span class="h1">AQUA SAFARI SITUATION		</span></h1>
		</div>	</td>
</tr>
<tr>
  <td colspan="5" align="center" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
    <td align="center" valign="middle">
		<div class="bloctexte">
			   &nbsp;&nbsp;&nbsp;&nbsp;Le Centre Aqua Safari est situ&eacute; en bord de mer, dans la baie de Povai.
			  
			    Services : Balade sous-marine &agrave; 3-4 m&egrave;tres de profondeur dans d'un v&eacute;ritable aquarium naturel tout en gardant la t&ecirc;te au sec.<br />
			    &nbsp;&nbsp;&nbsp;&nbsp;Venez en couple ou en famille pour d&eacute;couvrir le fabuleux monde sous-marin de Bora Bora, bateau priv&eacute; sur demande. 
					Nul besoin de savoir nager pour vivre cette extraordinaire exp&eacute;rience, pour tout le monde &agrave; partir de 6 ans. 
				   Possibilit&eacute; de 				faire du &#8221;snorkeling&#8221; (palme-masque-tuba), d'acheter des tee-shirts, et appareils photo, des cartes poissons et une cameraman 	professionnelle vous offre un service de vid&eacute;o personnalis&eacute;e.
					
				   <br /> &nbsp;&nbsp;&nbsp;&nbsp;
	      Deux sites sont pr&eacute;vus en fonction des conditions m&eacute;t&eacute;orologiques. Aqua Safari fourni gratuitement tout l'&eacute;quipement, transferts de et vers votre h&ocirc;tel ou pension, boissons fra&icirc;ches et fruits apr&egrave;s la ballade sous-marine.		</div>	</td>
  	<td colspan="3" align="center" valign="middle">	
		
		<img src="../IMAGES/BDC001.jpg" alt="" width="315" height="218" />	</td>
</tr>
<tr>
  	<td colspan="5" align="center" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;	</td>
</tr>
<tr>
    <td colspan="5" align="center" valign="middle">
		<div >
		<span class="h1">
	    EQUIPEMENT D'AQUA SAFARI </span></div>	</td>
</tr>
<tr>
  <td colspan="5" align="center" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
    <td align="center" valign="middle">
		<img src="../IMAGES/tamure.jpg" alt="" width="288" height="190"/>	</td>
    <td colspan="3" align="center" valign="middle">
		<div class="bloctexte"> 
		&nbsp;&nbsp;&nbsp;&nbsp;4 bateaux&nbsp;rapides, avec taud et &eacute;chelles, pour permettre une grande  flexibilit&eacute; dans le service&nbsp;:<br />
		<div class="bloctexte"> 
		  &nbsp;&nbsp;&nbsp;&nbsp;- PARATA : bateau aluminium agr&eacute;&eacute; pour 12 personnes. <br />
			&nbsp;&nbsp;&nbsp;&nbsp;- TAVANA : bateau fibre de verre agr&eacute;&eacute; pour 6 personnes. <br />
			&nbsp;&nbsp;&nbsp;&nbsp;- BANANA : bateau fibre de verre ag&eacute;&eacute; pour 16 personnes. <br />
		  &nbsp;&nbsp;&nbsp;&nbsp;- TAMURE&nbsp; : catamaran fibre  de verre agr&eacute;&eacute; pour 21 personnes.<br /></div>
		11 casques et 2 casques enfants, mat&eacute;riel de snorkeling  pour 18 personnes (combinaisons, masques et tubas),  20 paires chaussures en plastiques.		</div>	</td>
</tr>
<tr>
    <td    colspan="5" class="textecentregras"><!--DWLayoutEmptyCell-->&nbsp;	</td>
</tr>
<tr>
  <td    colspan="5" class="textecentregras"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
    <td    colspan="5" align="center" class="textecentregras">Centre ouvert tous les jours de 8:00 &agrave; 17:00. <br />
        D&eacute;parts tous les 
        jours &agrave; 8:30 et 13:30 sauf le Dimanche. <br />
        Sur r&eacute;servation sp&eacute;ciale possibilit&eacute; d'ouverture le Dimanche <br />
    et d'ajouter des d&eacute;parts &agrave; 10:45 et 18:30.	</td>
</tr>
<tr>
    <td    colspan="5" class="textecentregras"><!--DWLayoutEmptyCell-->&nbsp;	</td>
</tr>
<tr>
  <td    colspan="5" class="textecentregras"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
    <td colspan="5" align="center"  valign="middle"   >
	  <div class="boitemail">
	    <p>Contactez nous :<br />

			
	      Anne et Michel Condesse <br />
	      BP 182 BORA BORA <br />
	      98730 Polyn&eacute;sie Fran&ccedil;aise <br />
	      Mobile : (689) 288 777 &amp; 720 356 <br />
	      Tel/Fax: (689) 677 483 <br />
	      <a href="mailto:Aquasafari@mail.pf">AquaSafari@mail.pf</a><br />	
        </p>
      </div>	</td>
</tr>
</table>
Bonjour onibaba,

Le passage d'une mise en page par tables à une structure conforme n'est malheureusement pas aussi simple : il ne s'agit pas de changer une balise par une autre mais de structurer le contenu de manière cohérente en utilisant les balises html à bon escient et ensuite, modifier éventuellement la mise en page naturelle à l'aide d'une feuille de style css.

Il n'y a donc pas de moulinette "miracle", encore moins de commandes dreamweaver suceptibles de mettre en page un contenu de façon cohérente et accessible.

Transformer ton code reviendrait à refaire ton site complètement, chose impossible à demander aux membres bénévoles du forum !

Je crains que tu ne sois obligé, comme nous tous ici avant toi, d'accepter l'apprentissage des bonnes méthodes.

Pour commencer, je t'invite à consulter les modèles de mise en page proposés et de choisir celle qui correspond à la structure de tes pages.

Ainsi, tu auras une base solide pour partir du bon pied dans la refonte de ton site.

Tu peux également lire cet article

Mais je te conseille ce tutoriel qui t'apprend à faire une page, étape par étape.

Bon courage !



Smiley smile
Modifié par Vero (11 Sep 2006 - 10:51)
Bonjour et merci Vero;

J'ai consulté les lien que tu m'as indiqués, j'ai recherché dans mes livres.. j'arrive a remplacer mes tableaux par des div qui se positionnent bien dans ma partie centrale et n'empéchent pas le scroll de celle ci.
Ou je bloque c'est pour mettre mes images un coup à droite de mon texte et un coup à gauche (deux blocs indépendants alignés horizontalement)
Tout mes essais on été infructueux, les exemples ne donnent pas de situation comme celle là.
j'ai essayé d'utilisé les balises html et de les mettre en page en css mais cela modifie tout mes blocs.
Je vais garder mes tableaux pour le moment en cherchant comment y arriver.
Modifié par onibaba (11 Sep 2006 - 20:04)