Centrage

Question

padymen

14 Mar 2010 à 17:05

bonjour à tous
Voila, je me tourne vers vous pour ne pas avoir trouvé de solution ailleurs, en fait je n'arrive pas à centrer un contenu, voir icihttp://www.pascalhome.fr/zik/1.php de plus pas moyen non plus que mon affichage s'adapte à la résolution du visiteur
merci d'une aide éventuelle

Heyoan

14 Mar 2010 à 17:16

Salut,

il existe un article complet sur le centrage mais ce qui est indiqué comme solutions ne fonctionnera qu'avec un doctype en bonne et due forme.

Au passage l'élément TABLE, sauf cas particuliers, est destiné à l'utilisation de données tabulaires et pas à la mise en page. Smiley cligne

padymen

14 Mar 2010 à 17:23

Heyoan a écrit :
Salut,

il existe un article complet sur le centrage mais ce qui est indiqué comme solutions ne fonctionnera qu'avec un doctype en bonne et due forme.

Au passage l'élément TABLE, sauf cas particuliers, est destiné à l'utilisation de données tabulaires et pas à la mise en page.

merci de ton intervention, mais j'ai deja vu cet article sans résoudre mon probleme, pour le doctype, je ne pense pas que ce soit ça qui empeche le centrage, si ?

Raphael

Administrateur

14 Mar 2010 à 17:29

Hello,

padymen a écrit :
pour le doctype, je ne pense pas que ce soit ça qui empeche le centrage, si ?

Impossible de deviner, chaque navigateur faisant un peu ce qu'il veut sans doctype.

L'article sur le centrage fonctionne, si on applique les propriétés sur les bons éléments.
Peux-tu nous dire ce que tu as essayé et à quel endroit de l'article ça ne fonctionne plus ?

PS : je confirme que les tableaux, imbriqués de surcroît, ne vont guère faciliter les choses.
Modifié par Raphael (14 Mar 2010 - 17:30)

padymen

14 Mar 2010 à 17:37

Raphael a écrit :
Hello,

Impossible de deviner, chaque navigateur faisant un peu ce qu'il veut sans doctype.

L'article sur le centrage fonctionne, si on applique les propriétés sur les bons éléments.
Peux-tu nous dire ce que tu as essayé et à quel endroit de l'article ça ne fonctionne plus ?

PS : je confirme que les tableaux, imbriqués de surcroît, ne vont guère faciliter les choses.

salut Raphael et merci également de ton intervention
alors te dire ce que j'ai essayé, j'ai essayé tellement de chose que je ne pourais pas te les énumérer toutes, maintenant c'est vrai que ce doit surement etre au niveau de l'imbrication des tableaux qu'un souci doit se produire, si on regarde la ligne 70, si je met comme maintenant align="left" j'ai bien les différents résultats les uns à cotés des autres comme je souhaite l'obtenir, si je met align="center" ben, j'obtiens mes resultats les uns en dessous des autres, encore plus bizarre, si j'envelloppe tout le code d'une div, si je met align="left" les resultats sont bien les un en dessous des autres et le tout bien dans ma div mais si je met : align="center" comme dis plus haut les resultats sont les uns en dessous des autres mais en plus hors de la div !!!

padymen

14 Mar 2010 à 17:46

au passage, voici ce que j'utilise comme code, de sera peut être un peu plus simple pour trouver l'erreur ...

<?php
require_once('Connections/zik.php');
?>

<html>

  <head>
     <title>accueil : Pascalhome</title>	 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <meta name="keywords" CONTENT="tuto, µTorrent, emule, divers, pascalhome , padymen">
     <meta name="author" CONTENT="padymen">
     <meta name="ROBOTS" CONTENT="ALL">
     <meta name="expires" content="never"> 
     <link rel="stylesheet" type="text/css" href="accueil2.css">
     <link rel="shortcut icon" href="favicon.ico">
	 
  </head>

<body>
	


<br /><br /><br />


<!-- ****************************************************************************************************************************** Menu Haut -->
<!--	<table width="50%"  border="0" cellpadding="0" cellspacing="0" align="center">
		<tr>
			<td>
				<div class="header">
					<table width="100%" border="0">
						<tr>
							<td class="tdg"><img src="covers/2.gif" width="170" height="200" alt="11" align="left"></td>
							<td>
								<hr align="center" width="500" />
									<p align="center"><h1>Bonjour <?php echo $_SESSION['user_name']; ?>,</h1></p> 
									<p align="center"><h2>Bienvenue sur ta page de selection,</h2></p>
									<p align="center"><strong><font color="#FF0000">CETTE PAGE EST A USAGE PRIVE !!</font></strong></p>
									<p align="center"><a href="acces.php"><font size="4">D&eacute;connexion</font></a></p>
								<hr width="500" />
										<p>&nbsp;</p>
							</td>
							<td class="tdd"><img src="covers/2-d.gif" alt="1" width="155" height="170" align="right"></td>
						</tr>						
					</table>
				</div>
			</td>
		</tr>
	</table>-->
<!-- ****************************************************************************************************************************** Fin Menu Haut -->	
<br /><br /><br />
	
<?php
mysql_select_db($database_zik, $zik);
$request= "SELECT * FROM infos_tbl GROUP BY style ORDER BY style ASC";
$raw = mysql_query($request,$zik) or die(mysql_error());
//$Recordset1 = mysql_query($query_Recordset1, $zik) or die(mysql_error());
$count= 0;  // nouveau compteur!
//while($styles = mysql_fetch_assoc($raw)){
?>

<?php 
	$i=0; // nouvelle variable pour savoir quand sauter à la ligne
	while($styles = mysql_fetch_assoc($raw)){
	if($i == 0) echo "<tr>";
?>


<table  class="conteneur" >
	<table  class="table" cellspacing="0" cellpadding="0" align="left">  <!--width="140"  border="0"--> 
		<tr>
			<td class="" align="center"><img src="themes/2/block_01.jpg" alt="" width="188" height="26" ></td>
		</tr>
		<tr>
			<td>
				<table width="100%"  border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td class="block_02"><img src="themes/2/block_02.jpg" alt="" width="28" height="22"></td>
						<td class="block_02_tile myblocktit"><?php echo $styles['style']; ?></td>
						<td class="block_02"><img src="themes/2/block_03.jpg" alt="" width="28" height="22"></td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<table width="100%"  border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td class="block_03"><img src="themes/2/block_04.jpg" alt="" width="50" height="22"></td>
						<td class="block_03_tile"><img src="themes/2/spacer.gif" alt="" width="18" height="1"></td>
						<td class="block_04"><img src="themes/2/block_05.jpg" alt="" width="56" height="22"></td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<table width="100%"  border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td class="block_09"><img src="themes/2/block_061.gif" alt="" width="47" height="36"></td>
						<td class="block_05col block_09_tile"><img src="themes/2/spacer.gif" alt="" width="1" height="1"></td>
						<td class="block_09"><img src="themes/2/block_071.gif" alt="" width="47" height="36"></td>
					</tr>
				</table>
			</td>
		</tr>		
		<tr>
			<td>
				<table width="100%"  border="0" cellspacing="0" cellpadding="0">																
					<tr>

						<td class="block_05_tile"><img src="themes/2/spacer.gif" alt="" width="18" height="1"></td>
						<td class="block_05col">			
							<center>
								<table width="90%" border="1" border-color="#fc00" align="center">
									<tr class="tr">
	
																		<td align="center"><form action="result.php" method="post" border="0"><br /><label></label><br /><br />
																			<select name="style" size="0" id="style" >
																			<?php echo '<option value=' . $styles['style'] . '>' . $styles['style'] . '</option>'; ?>
																			</select>
																			<p> </p>
																			<p><input type="submit" name="envoi" id="envoi" value="Envoyer" /></p>
																		</form></td>

									</tr>
								</table>
							</center>
										<td class="block_06_tile"><span class="block_05_tile"><img src="themes/2/spacer.gif" alt="" width="18" height="1"></span></td>
						</td>	
							
					</tr>
				
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<table width="100%"  border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td class="block_07"><img src="themes/2/block_081.gif" alt="" width="47" height="43"></td>
						<td class="block_05col"><img src="themes/2/spacer.gif" alt="" width="1" height="1"></td>
						<td class="block_07"><img src="themes/2/block_091.gif" alt="" width="47" height="43"></td>
					</tr>
				</table>
			</td>
		
		</tr>
		<tr>
			<td class="block_08"><img src="themes/2/block_10.jpg" alt="" width="188" height="39">
			</td>			
		</tr> 
		</table></table>
<?php
	++$i;
	if($i == 4){
	echo "</tr>";
	$i=0;
				}
			}
	if($i != 5) // ce test est nécessaire pour la dernière ligne : elle peut ne pas être complète > il faut fermer le <tr>!
	echo "</tr>";
	?>	
	

	
<!-- ******************************************************************************************************************************* fin menu selection --->	

</body>
</html>
<?php
mysql_free_result($raw);
?>

et le css :

body {
  font-family:"Myriad","Myriad Pro",Georgia,Helvetica,Sans-serif;
	
  background-color: #000;
  color: #C0C0C0;
  	/*background-image: url(../covers/6.jpg);
    background-repeat: no-repeat;
	BACKGROUND-attachment: fixed;
	BACKGROUND-repeat: repeat ;
	BACKGROUND-color: #000 ;*/
	text-align: center;
padding: 0;
margin: 0; 
	}


/* LES IMAGES DU MENU  HAUT*/
td.subnav{ background-image:url(themes/1/NB-btn-m.jpg); height:32px;}


.padymen{ font-family: Edwardian Script ITC; /*color: red ; */font-size : 27px ; text-align : right ; }

/* COULEUR DE MES LIENS */

A:link{FONT-SIZE: 8pt; COLOR: #ffb400; FONT-FAMILY:  Verdana, Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none}
A:visited{FONT-SIZE: 8pt; COLOR: #ffb400; FONT-FAMILY:  Verdana, Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none}
A:active{FONT-SIZE: 8pt; COLOR: #ffb400; FONT-FAMILY:  Verdana, Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none}
A:hover{FONT-SIZE: 8pt; COLOR: #F17E00; FONT-FAMILY:  Verdana, Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none}


TD {font-size:9pt;  font-family: Verdana; }

TD.extra {color:#FFFF99}

.text{ font-size: 12px ; }


/* images tableaux */
td.block_01{width:188px;height:26px;}
td.block_02{width:28px;height:22px;}
td.block_02_tile{background-image:url(themes/2/block_02_tile.jpg);background-repeat:repeat-x;font-weight:bold;text-align:center;}
td.block_03{width:50px;height:22px;}
td.block_03_tile{background-image:url(themes/2/block_04_tile.jpg);background-repeat:repeat-x;}
td.block_04{width:56px;}
td.block_05_tile{width:21px;background-image:url(themes/2/block_l1.gif);background-repeat:repeat-y;}
/*td.block_05col{background-color:#252525;padding:3px;}*/
td.block_06_tile{width:21px;background-image:url(themes/2/block_r1.gif);background-repeat:repeat-y;}
td.block_07{width:48px;height:33px;}
td.block_08{width:188px;height:39px;}
td.block_09{width:47px;height:36px;}
/*td.block_09_tile{background-image:url(themes/2/block_06_tile.gif);background-repeat:repeat-x;}*/
td.news_01{width:77px;height:31px;}
td.news_01a{width:73px;height:31px;}
td.news_01_tile{background-image:url(themes/2/news_01_tile.gif);background-repeat:repeat-x;padding-top:2px;font-weight:bold;text-align:center;}
td.news_02{width:46px;height:20px;}
td.news_02_tile{background-image:url(themes/2/news_03_tile.gif);background-repeat:repeat-x;}
/*td.news_03col{background-color:#252525;padding:3px;}*/
td.news_04{width:13px;height:26px;}
td.news_04_tile_l{background-image:url(themes/2/news_l1.gif);background-repeat:repeat-y;}
td.news_04_tile_r{background-image:url(themes/2/news_r.gif);background-repeat:repeat-y;}
td.news_05{width:70px;height:49px;}
td.news_05_tile{background-image:url(themes/2/news_071_tile.gif);background-repeat:repeat-x;}


.header {
    text-align: center ;
	width:100%;
	}

h1 {
            text-align:center;
			text-decoration:underline;
			font-family: "Arial Black", Arial, Verdana, serif;
			color:#FFFF66;
	}
	
h2 {
            text-align:center;
			text-decoration:none;
			font-family: "Arial Black", Arial, Verdana, serif;
			color:#969696;
	}
.tr { width:70%;
        display:table-row;        
		padding:0px;
		text-align: center;		
	}

.right{
	margin-right: 150px;
}


/* LES IMAGES COMPOSANT MES TABLEAUX*/
.NB_ftl{
	width: 10px;
	background-image: url(themes/1/menu-header-g.gif);
}

.NB_ftmain{
	width: 150px;
	background-repeat: repeat-x;
	font-size: 11px;
	color: #FFFFFF;
	font-family: verdana, tahoma, arial, sans-serif;
	background-image: url(images/menu_header_note.jpg);
	text-align: center;
	font-weight: bold;
	vertical-align: top;
	padding-top: 15px;
	padding-right: 10px;
	padding-left: 10px;
}

.NB_fbmain{
	width: 100px;
	background-repeat: repeat-x;
	font-size: 11px;
	color: #FFCC00;
	font-family: verdana, tahoma, arial, sans-serif;
	background-image: url(themes/1/menu_header_note.gif);
	text-align: center;
	font-weight: bold;
	vertical-align: top;
	padding-top: 15px;
}

.NB_fbmain2{
	width: 100%;
	background-repeat: repeat-x;
	font-size: 11px;
	color: #FFCC00 ;
	font-family: verdana, tahoma, arial, sans-serif;
	background-image: url(themes/1/menu_header_longcopie.gif);
	text-align: center;
	font-weight: bold;
	vertical-align: top;
	padding-top: 15px;
}

.NB_ftmr{
	width: 31px;
	background-image: url(themes/1/menu_header_3.gif);
}

.NB_ftmrf{
	background-image: url(themes/1/menu_header_4.jpg);
	background-repeat: repeat-x;
}

.NB_ftr{
	width: 10px;
	background-image: url(themes/1/menu_header_d.jpg);
}

.NB_fml{
	width: 6px;
	background-repeat: repeat-y;
	background-image: url(themes/1/cadre-cg.jpg);
}

.NB_fmmain{
	width: 100%;
	padding: 4px;
	font-size: 10px;
	color: #FFFFFF;
	font-family: verdana, tahoma, arial, sans-serif;
	vertical-align:top;
	background-image: /*url(images/NB-fmm.jpg);*/
}
.NB_fmr{
	width: 6px;
	background-repeat: repeat-y;
	background-image: url(themes/1/cadre-cd.jpg);
}
.NB_fbl{
	width: 10px;
	background-image: url(themes/1/cadre-bg.gif);
}
.NB_fbm{
	width: 100%;
	background-repeat: repeat-x;
	background-image: url(themes/1/cadre-b.jpg);
}
.NB_fbr{
	width: 10px;
	background-image: url(themes/1/cadre-bd.gif);
}
.NB_ftla{
	width: 10px;
	background-image: url(themes/1/NB-ftla.gif);
}

.text_titre{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px ;
	text-align: valign ;
	color: #FF3300;
	text-decoration: none ;
}


.table{
  margin-left: 5%; 
  margin-right: 0; 
  text-align: left;
}

.conteneur{
	text-align: center;
margin: 0;
   /*width: 25%; largeur obligatoire pour être centré */ 
  border-style: solid ; border-color: red ; 
}

Raphael

Administrateur

14 Mar 2010 à 18:00

Je suis chez moi donc je n'ai pas forcément tous les outils pour visionner et débugger ta page, mais en voyant ce code, je suis assez surpris : ce que je dis pourrait être vexant et c'est pourquoi je vais tenter de te l'écrire avec autant de tact et d'objectivité possible...

Ta page est un véritable retour aux années 90, avec tout ce que l'on pouvait y trouver à l'époque : éléments mal utilisés, tableaux de mise en page, tableaux imbriqués, mélange des styles dans la page et dans des feuilles de style, etc.

Je ne sais pas par quel moyen tu t'es formé à HTML/CSS mais tout cela ressemble beaucoup à de la "bidouille", à de la "soupe de tags" incompréhensible. Le problème est qu'il y a tellement d'incohérences (à commencer par l'inexistence du doctype) qu'il pourrait y avoir mille explications au fait que tu n'arrives pas à centrer tout ça.

En toute objectivité, il faudrait reprendre l'ensemble proprement, avec des méthodes moins préhistoriques, plus conformes, et surtout plus faciles à appréhender pour toi et tous ceux qui liront tes code-source.

PS : attention à tes mots-clés "µTorrent, emule", car la discussion pourrait vite finir (légitimement) à la poubelle si l'on découvre que ton site est hors la loi ou ne respecte pas la charte du forum.
Modifié par Raphael (14 Mar 2010 - 18:00)

padymen

14 Mar 2010 à 18:08

Raphael a écrit :
Je suis chez moi donc je n'ai pas forcément tous les outils pour visionner et débugger ta page, mais en voyant ce code, je suis assez surpris : ce que je dis pourrait être vexant et c'est pourquoi je vais tenter de te l'écrire avec autant de tact et d'objectivité possible...

Ta page est un véritable retour aux années 90, avec tout ce que l'on pouvait y trouver à l'époque : éléments mal utilisés, tableaux de mise en page, tableaux imbriqués, mélange des styles dans la page et dans des feuilles de style, etc.

Je ne sais pas par quel moyen tu t'es formé à HTML/CSS mais tout cela ressemble beaucoup à de la "bidouille", à de la "soupe de tags" incompréhensible. Le problème est qu'il y a tellement d'incohérences (à commencer par l'inexistence du doctype) qu'il pourrait y avoir mille explications au fait que tu n'arrives pas à centrer tout ça.

En toute objectivité, il faudrait reprendre l'ensemble proprement, avec des méthodes moins préhistoriques, plus conformes, et surtout plus faciles à appréhender pour toi et tous ceux qui liront tes code-source.

PS : attention à tes mots-clés "µTorrent, emule", car la discussion pourrait vite finir (légitimement) à la poubelle si l'on découvre que ton site est hors la loi ou ne respecte pas la charte du forum.

re, non, rassures toi je ne me vexerais pas, d'autant plus que oui, je c'est de la bidouille, pas besoin de le dire mais non je ne suis absolument pas codeur !! mais c'est pour le moment tout ce que j'ai réussi de faire d'un peu "joli", j'ai déjà essayé de refaire le tout plus propre mais aussi bien le temps que les connaissances me manquent. Et ce aussi pour ce qui est du doctype, il y en a tellement que je ne sais plus lequel utiliser.
pour ce qui est de la mule de d'utorrent, ce ne sont que des liens vers des sites traitant de ces deux logiciels, à la base c'est une espèce d'annuaire ers des sites que j'utilise fréquemment que j'ai voulu faire puis me laissant prendre au jeu je rajoute des pages comme cette fameuse page qui me cause souci actuellement

Raphael

Administrateur

14 Mar 2010 à 18:14

padymen a écrit :
Et ce aussi pour ce qui est du doctype, il y en a tellement que je ne sais plus lequel utiliser.

Sur ce point précis, je peux t'aider rapidement Smiley cligne

padymen

14 Mar 2010 à 18:30

Raphael a écrit :

Sur ce point précis, je peux t'aider rapidement

bon, j'ai choisi le Transitional qui semble plus convenir a ce que contient ma page, je vais tenter de refaire cette fameuse page en remplaçant les "table" par des "div" mais c'est pas gagné !!! Smiley ravi

Sujet clos

CSS et mise en forme, CSS3

Centrage