[RESOLU]Problème de DIV agassant ! [/RESOLU]

Question

rod702

7 Oct 2008 à 23:03

Bonjour à tous ! voila je fait une page pour mon portfolio !

j'ai une div body qui posse une image de fond et dans cette meme div
j'ai une autre div qui contient un tableau (ce tableau contient les thumbs presentant mes creas)

Smiley bawling

la ou le bas blesse c'est que cette div contenant un tableau qui ne ce centre pas convenablement!

j'ai testé sur Firfox 3 ca marche ! sur ie 7 et Opéra ca ne marche pas !

Je veux grosso modo que le tableau ce centre correctement dans le fond gris sans qu il bouge d'un poil sur chaque navigateur !

voila a quoi ressemble ma page upload/17436-mapage.jpg

voila la source



<!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=utf-8" />
<title>Document sans titre</title>
<link href="inc/css/mon_style.css" rel="stylesheet" type="text/css" />
<link href="inc/css/hs.css" rel="stylesheet" type="text/css" />

<script language="JavaScript" src="inc/js/highslide-full.js" type="text/javascript"></script>
<script type="text/javascript"> hs.graphicsDir = 'img/graphics/';</script>


</head>

<body>

<div class="cellule_header" id="header"><?php include('header.php'); ?></div>

  <div id="body_portfolio"><img src="img/web.png" alt="" class="web" /><img src="img/logo.png" alt="" class=	"espaces_liens_sub_menu" /><img src="img/divers.png" alt="" class="espaces_liens_sub_menu" />
  
  

    
    
<!--TABLEAU CREATIONS -->
<div id="tableau">
    <table width="737" cellpadding="0" cellspacing="0">
    
<!--rang 1 -->
  <tr>
    <th width="735">
    <table width="735" cellpadding="0" cellspacing="0">
      <tr>
        <th width="139"><table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=				"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div></th>
            </tr>
        </table>
        
        </th>
        <td width="9"></td>
        <td width="139">
        
        
        <table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=		"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div> </th>
            </tr>
        </table>
        
        </td>
        <td width="9"></td>
        <td width="139">
        
        
        <table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=		"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div> </th>
            </tr>
        </table>
        </td>
        <td width="9"></td>
        <td width="139">
        
        
        <table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=		"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div> </th>
            </tr>
        </table>
        
        </td>
        <td width="9"></td>
        <td width="141">
        
        
        <table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=		"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div> </th>
            </tr>
        </table>
        
        </td>
      </tr>
    </table></th>
  </tr>
<!--fin rang 1 -->
  <tr>
    <th></th>
  </tr>
  <tr>
    <th height="9"></th>
  </tr>
  <tr>
    <th></th>
  </tr>
  
  <!--rang 2-->
  <tr>
    <th>
    
    <table width="735" cellpadding="0" cellspacing="0">
      <tr>
        <th width="139"><table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=				"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div>              </th>
            </tr>
        </table>
        </th>
        <td width="9"></td>
        <td width="139">
        
        <table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=		"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div> </th>
            </tr>
        </table>
        
        </td>
        <td width="9"></td>
        <td width="139">
        
        
        <table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=		"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div> </th>
            </tr>
        </table>
        
        </td>
        <td width="9"></td>
        <td width="139">
        
        
        <table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=		"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div> </th>
            </tr>
        </table>
        
        </td>
        <td width="9"></td>
        <td width="141">
        
        <table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=		"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div> </th>
            </tr>
        </table>
        
        </td>
      </tr>
    </table>
    </th>
  </tr>
  <!-- fing Rang 2-->
  
  <tr>
    <th height="9"></th>
  </tr>
  <tr>
    <th>
  <!-- Rang 3-->    
    <table width="735" cellpadding="0" cellspacing="0">
      <tr>
        <th width="139"><table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=				"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div>              </th>
            </tr>
        </table>
        
        </th>
        <td width="9"></td>
        <td width="139">
        
        
        <table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=		"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div> </th>
            </tr>
        </table>
        
        </td>
        <td width="9"></td>
        <td width="139">
        
        
        <table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=		"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div> </th>
            </tr>
        </table></td>
        <td width="9"></td>
        <td width="139">
        
        
        <table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=		"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div> </th>
            </tr>
        </table>
        </td>
        <td width="9"></td>
        <td width="141">
        
        
       <table cellspacing="0" cellpadding="0">
            <tr>
              <th>
              <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src=		"img/template_web/thumbs/thumbs.jpg" alt="chargement" title="Cliquez pour agrandir"/>              </a>
              <div class="highslide-caption">olaaaaaaaaa</div> </th>
            </tr>
        </table>
        
        </td>
      </tr>
    </table>
    <!--Fin rang 3-->
    </th>
  </tr>
</table>    
</div>
<!--FIN TABLEAU CREATIONS -->

</div>

<!-- FOOTER -->  
<div id="footer">
    <div align="center" class="footer_position">
      <?php include('footer.php'); ?>
  </div>
</div>
<!-- FIN FOOTER --> 
</body>
</html>

voila les css




@charset "utf-8";

/* CSS header DEBUT-- permet de positionner le site tout en haut*/
body{
margin:0px;
background-image:url(../../img/bg.jpg);
background-repeat:repeat-x;
}


/* ici cette cellule recoit le header en flash avec l'include*/
.cellule_header{
width:763px;
margin:0 auto;
}


/* ######################################################################### */
/* ######################################################################### */
/* ######################################################################### */
/* ################## CSS DES FONDS DES PAGES DE MON SITE ################## */
/* accueil */
#body{
	width:763px;
	height:561px;
	background-image:url(../../img/top_body.jpg);
	background-repeat:no-repeat;
	margin:0 auto;
}


/* portfolio */
#body_portfolio{
	width:763px;
	height:561px;
	background-image:url(../../img/top_body_2.jpg);
	background-repeat:no-repeat;
	margin:0 auto;
}


/* contact */
#body_contact{
	width:763px;
	height:561px;
	background-image:url(../../img/top_body_3.jpg);
	background-repeat:no-repeat;
	margin:0 auto;
}
/* ################## CSS DES FONDS DES PAGES DE MON SITE ################## */
/* ######################################################################### */
/* ######################################################################### */
/* ######################################################################### */



/* Ici mon texte de la page d'accueil */
#txt_accueil{
	width:463px;
	height:279px;
	padding-top:125px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#a4bec3;
	text-align:justify;
	margin-right:11px;
	padding-right:5px;
	float:right;
}



/* Ma photo */
#pix{
	width:239px;
	height:262px;
	float:left;
	margin-top:130px;
	padding-left:20px;
}


/* Ici positionnement des icone cv et pdf */
#groupe_ico{
	width:200px;
	height:90px;
	float:left;
	margin-left:52px;
	margin-top:55px;
}

.ico_pdf{
	padding-left:10px;
}

.ico_word{
	padding-left:48px;
	margin-top:65px;
}



/* ici CSS pour le block news*/
#news{
	width:478px;
	height:145px;
	float:right;
}

.txt_news{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#877c6c;
	font-weight:normal;
	text-align:left;
}

.txt_news_big{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#46e6e6;
	text-align:left;
	font-weight:bold;
}

.tableau_news{
	margin-left:2px;
	margin-top:10px;
}



/* sous menu portfolio*/
.espaces_liens_sub_menu{
	padding-left:22px;
}

.web{
	margin-top:77px;
	padding-left:326px;
}



/* Tableau presentant mes creas*/
#tableau{
	width:737px;
	height:425px;
	margin-top:31px;
	margin-left:15px;
	margin-right:15px;
}

/* formulaire */

#mon_formulaire{
width:660px;
padding-top:138px;
margin-left:auto;
margin-right:auto;
}

.champs{
	width:195px;
	height:23px;
	font-family:Arial, Helvetica, sans-serif;
	color:#000000;
	font-size:12px;
	font-weight:bold;
}


.champs_message{
	width:195px;
	height:103px;
	font-family:Arial, Helvetica, sans-serif;
	color:#000000;
	font-size:12px;
}


.txt_forms{
	font-family:Arial, Helvetica, sans-serif;
	color:#000000;
	font-size:12px;
	font-weight:bold;
}

.id_champs_formulaire{
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:12px;
}

.btn_envoyer{
	padding-left:135px;
}

.fnd_form{
	background-image:url(../../img/cartouche.gif);
	background-repeat:no-repeat;
}
/* Fin formulaire */




/* txt de cette parge */
.txt{
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:12px;
	text-align:justify;
	font-weight:normal;
}

.moi{
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-weight:normal;
}

.txt_vert{
	color:#4fff00;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}

.txt_gris{
	font-family:Arial, Helvetica, sans-serif;
	color:#848282;
	font-weight:normal;
}

.mon_email{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFFFFF;
	text-decoration:none;
}

/* txt message envoyé */
.txt_email_ok{
	color:#4fff00;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:normal;
}

.txt_email{
	color:#4fff00;
	font-family:Arial, Helvetica, sans-serif;
}
/* txt message envoyé */

/* Block footer */
#footer{
	width:763px;
	color:#485f64;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	margin-left:auto;
	margin-right:auto;
}

.footer_position{
	padding-top:4px;
}
/* Fin Block footer */

Help les gars ou les filles LOL ca me stress ! Smiley bawling

Modifié par rod702 (09 Oct 2008 - 23:36)

fvsch

8 Oct 2008 à 01:24

Mise en page avec des tableaux partout: au secours.

D'ailleurs, toi même tu t'y perds car ton code HTML est faux: tu as un TD dans un TR dans un... TH dans un TR dans un TABLE (lui-même déjà imbriqué dans un tableau). Arf. Un petit coup de validateur, puis une balle dans la tête de ce cheval à l'agonie? (Et pis après on recommence en plus propre.)

chooky

8 Oct 2008 à 14:44

C'est clair ! pourquoi utliser un tableau dans ce cas là? Smiley ohwell

Tu peux par exemple créer un bloc avec un class qui glisse à gauche ( float:left; ) qui comprend tes aperçus ? tu vas diviser ton code par 100 Smiley biggrin

J'utilise ce procédé là dans pein de cas différends et en positionnant ces blocs glissants en relatif, tu peux même t'amuser à faire des trucs sympas avec.

Je me suis amusé à réaliser une baque d'images comme ça, ça permet même de faire des aperçus au survol Smiley cligne

comme là
http://www.sxmsaintmartin.com/photos/plages.php où ici -> http://nightlife.sxmsaintmartin.com/ par contre là ce n'est volontairement pas centré.

En tout cas, pour la présentation que tu veux faire c'est sûr que la mise en page tableau, ben je ne trouve pas ça vraiment adapté Smiley ohwell

bonne chance Smiley cligne

Modifié par chooky (08 Oct 2008 - 14:45)

rod702

8 Oct 2008 à 18:22

Florent V. a écrit :
Mise en page avec des tableaux partout: au secours.

D'ailleurs, toi même tu t'y perds car ton code HTML est faux: tu as un TD dans un TR dans un... TH dans un TR dans un TABLE (lui-même déjà imbriqué dans un tableau). Arf. Un petit coup de validateur, puis une balle dans la tête de ce cheval à l'agonie? (Et pis après on recommence en plus propre.)

Merci

pour ton conseil !
Le truc marrant c'est que le validateur Html et le W3c o valider la page Smiley langue

Mais je vai refaire ca au propre en diV je vous tiens au courant

rod702

8 Oct 2008 à 18:23

chooky a écrit :
C'est clair ! pourquoi utliser un tableau dans ce cas là?

Tu peux par exemple créer un bloc avec un class qui glisse à gauche ( float:left; ) qui comprend tes aperçus ? tu vas diviser ton code par 100

J'utilise ce procédé là dans pein de cas différends et en positionnant ces blocs glissants en relatif, tu peux même t'amuser à faire des trucs sympas avec.

Je me suis amusé à réaliser une baque d'images comme ça, ça permet même de faire des aperçus au survol comme là
http://www.sxmsaintmartin.com/photos/plages.php où ici -> http://nightlife.sxmsaintmartin.com/ par contre là ce n'est volontairement pas centré.

En tout cas, pour la présentation que tu veux faire c'est sûr que la mise en page tableau, ben je ne trouve pas ça vraiment adapté

bonne chance

Merci ba je vais essayer cette version en div! j'ai un testé rapidement des que j'ai eu ton poste et c'est vrai qu en div ca a l'air de marcher !
mais je vai vraiment le faire mieux ce soir et je te tiens au courant LOL
Modifié par rod702 (08 Oct 2008 - 18:24)

rod702

9 Oct 2008 à 01:56

bonsoir a tous g un peu pres resolu le probeme mais il rest toujour des ecarts sur FF Opéra et IE ...
en effet le block contenant les photos n'est toujours pas tres bien centre, bon ca reste correcte mais quelqu'un de pointilleux dira "que ce block l'est legerement elevé Smiley lol

voici mon block fait avec des div et voir apres les css ( :


<!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=utf-8" />
<title>Document sans titre</title>

<link href="inc/css/hs.css" rel="stylesheet" type="text/css" />

<script language="JavaScript" src="inc/js/highslide-full.js" type="text/javascript"></script>
<script type="text/javascript"> hs.graphicsDir = 'img/graphics/';</script>
<link href="inc/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div class="cellule_header" id="header"><div id="mon_flash"><img src="img/anim.png" width="763" height="227" alt="" /></div>

</div>

  <div id="body_portfolio"><img src="img/web.png" alt="" class="web" /><img src="img/logo.png" alt="" class=	"espaces_liens_sub_menu" /><img src="img/divers.png" alt="" class="espaces_liens_sub_menu" />
  
  

<div id="separation"></div>    
    
<!--TABLEAU CREATIONS -->



<div id="block_photo">
  <!-- rang 1-->

<div class="cellule-photo marge">
<a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
<div class="highslide-caption">olaaaaaaaaa</div></div> 
  
  
  
<div class="cellule-photo marge">
<a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
<div class="highslide-caption">olaaaaaaaaa</div>
</div>
 
 
 
<div class="cellule-photo marge"><a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
<div class="highslide-caption">olaaaaaaaaa</div>
</div>



<div class="cellule-photo marge"><a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
<div class="highslide-caption">olaaaaaaaaa</div>
</div>


<div class="cellule-photo marge"><a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
<div class="highslide-caption">olaaaaaaaaa</div>
</div>
  <!-- Fin rang 1-->
  
  
  <!-- rang 2-->
<div class="cellule-photo position_cellule_2"><a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
<div class="highslide-caption">olaaaaaaaaa</div>

</div>



<div class="cellule-photo position_cellule_2"><a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
<div class="highslide-caption">olaaaaaaaaa</div>
</div>




  <div class="cellule-photo position_cellule_2"><a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
  <div class="highslide-caption">olaaaaaaaaa</div>

</div>



  <div class="cellule-photo position_cellule_2"><a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
  <div class="highslide-caption">olaaaaaaaaa</div>
</div>




<div class="cellule-photo position_cellule_2"><a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
<div class="highslide-caption">olaaaaaaaaa</div>

</div>
  <!-- Fin rang 2-->

<div class="cellule-photo position_cellule_2"><a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
<div class="highslide-caption">olaaaaaaaaa</div>
</div>

<div class="cellule-photo position_cellule_2"><a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
<div class="highslide-caption">olaaaaaaaaa</div>
</div>


<div class="cellule-photo position_cellule_2"><a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
<div class="highslide-caption">olaaaaaaaaa</div>

</div>


<div class="cellule-photo position_cellule_2"><a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
<div class="highslide-caption">olaaaaaaaaa</div>
</div>

<div class="cellule-photo position_cellule_2"><a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a>
<div class="highslide-caption">olaaaaaaaaa</div>
</div>
</div>

<!--FIN TABLEAU CREATIONS -->

</div>

<!-- FOOTER -->  
<div id="footer">
    <div align="center" class="footer_position">
      <table cellspacing="0" cellpadding="0">
  <tr>
    <th width="68">
  <!-- xhtml w3c -->      
<a href="http://validator.w3.org/check?uri=referer">
	  <img
        src="http://www.w3.org/Icons/valid-xhtml10-blue"
        alt="Valid XHTML 1.0 Transitional" width="68" height="24" border="0" /></a>
    </th>

 <!-- Fin xhtml w3c -->      
    
 <!-- css w3c -->    
    <td width="68">    
<a href="http://jigsaw.w3.org/css-validator/">
   	  <img style="border:0;width:68px;height:24px"
        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
        alt="CSS Valide !" /></a>
    </td>
<!-- Fin css w3c -->    
    <td>-  www.rod702.com  © - tous droits reservés - 2008 -</td>
  </tr>
</table>
  </div>

</div>
<!-- FIN FOOTER --> 
</body>
</html>

pour les css j'ai du triché en creeant une div avec une auteur jouant un rol de marge de separation


/* Tableau presentant mes creas*/

.cellule-photo 
{ 	width:135px; 
	height:129px; 
	margin:0px;
	float:left;
}

.position_cellule_2{
	margin-left:12px;
	margin-top:10px;
}


#separation{
	height:34px;
	display:block;
}

#block_photo{
	width:750px;
	height:416px;
	margin-left:7px;
	clear:left;
	position:relative;
	display:block;
}

.marge{
	margin-left:12px;
}

si quelqu un trouve le probleme ca sera genial pour moi Smiley sweatdrop

rod702

9 Oct 2008 à 23:34

chooky a écrit :
C'est clair ! pourquoi utliser un tableau dans ce cas là?

Tu peux par exemple créer un bloc avec un class qui glisse à gauche ( float:left; ) qui comprend tes aperçus ? tu vas diviser ton code par 100

J'utilise ce procédé là dans pein de cas différends et en positionnant ces blocs glissants en relatif, tu peux même t'amuser à faire des trucs sympas avec.

Je me suis amusé à réaliser une baque d'images comme ça, ça permet même de faire des aperçus au survol comme là
http://www.sxmsaintmartin.com/photos/plages.php où ici -> http://nightlife.sxmsaintmartin.com/ par contre là ce n'est volontairement pas centré.

En tout cas, pour la présentation que tu veux faire c'est sûr que la mise en page tableau, ben je ne trouve pas ça vraiment adapté

bonne chance

yep merci pour ton conseil g analyser la construction de site et les css ! ca ma permis de bien conprendre les different comportement !

J'ai recrer les block photos en div et g corriger un truic que j'ai pas vu du coup c bon ! Smiley langue

rod702

9 Oct 2008 à 23:35

Florent V. a écrit :
Mise en page avec des tableaux partout: au secours.

D'ailleurs, toi même tu t'y perds car ton code HTML est faux: tu as un TD dans un TR dans un... TH dans un TR dans un TABLE (lui-même déjà imbriqué dans un tableau). Arf. Un petit coup de validateur, puis une balle dans la tête de ce cheval à l'agonie? (Et pis après on recommence en plus propre.)

C bon ca marche j'ai tout fait en div pour le block photo et ca marche ! j'ai habatu ce vieux canasson de table ! Smiley ravi

chooky

10 Oct 2008 à 14:49

C cool !!! Smiley cligne

[edité]Au fait, tu ne veux me donner l'adresse de ton, site, j'aimerais bien voir ce que ça donne autrement que sur un aperçu d'écran Smiley ohwell

[/édité]
Modifié par chooky (10 Oct 2008 - 14:53)

rod702

11 Oct 2008 à 18:17

chooky a écrit :
C cool !!!

[edité]Au fait, tu ne veux me donner l'adresse de ton, site, j'aimerais bien voir ce que ça donne autrement que sur un aperçu d'écran [/édité]

salut ! pour l'instant c en construction ! mais j manquerai pas Smiley biggrin

Sujet clos

Questions générales et questions de débutants

[RESOLU]Problème de DIV agassant ! [/RESOLU]