Supprimer ces horreurs

**michel71** · 15/07/2015, 14h13

Bonjour,

Je suis en train de moderniser un vieux site (+ de 10 ans) pour le passer en HTML5 et CSS

J'ai déjà trouver pas mal de solutions mais là je coince sur les tableaux

A ce jour j'ai ceci http://www.timbres-de-france.com/tes..._recherche.php

et je souhaiterai adapter tout ça en CSS. j'ai essayé ça mais le résultat est dégeu....

Code php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
//-------------- Affichge des données pour la table France -----------------------------------------------
if($_SESSION['categ']=='france')
{
if (@$_SESSION['cpt']==0)echo '<font color="FF0000"> <div align="center">Aucune donnée ne répond à vos critères de recherche</font></div>';
require_once('../connex_mysqli/connex_base_gene.php');
 
		for($b=0;$b<$_SESSION['cpt'];$b++)
		  {
$query = 'SELECT * FROM collec_0 Where id='.$_SESSION["recherche_lig"][$b];
$result = mysqli_query($base_gene, $query);
while ($data = mysqli_fetch_assoc($result))
{ 
 
 
$test_image=explode('.',$data['photo']);
if(@$test_image[1]=='gif')
{
$photo_1=trim($test_image[0].'.jpg');	
if(file_exists("../image/classique/".$photo_1))
	{
 		$photo=$photo_1;
		$_SESSION['image']='classique/';
	}
 
$photo_1=trim($test_image[0].'.JPG');	
if(file_exists("../image/classique/".$photo_1))
	{
 		$photo=$photo_1;
		$_SESSION['image']='classique/';
	}	
}
 
if(@$test_image[1]=='jpg' or @$test_image[1]=='JPG')
{
$photo_1=trim($test_image[0].'.jpg');	
if(file_exists("../image/classique/".$photo_1))
	{
 		$photo=$photo_1;
		$_SESSION['image']='classique/';
	}
 
$photo_1=trim($test_image[0].'.JPG');	
if(file_exists("../image/classique/".$photo_1))
	{
 		$photo=$photo_1;
		$_SESSION['image']='classique/';
	}	
 
}
$num=$data['num'];
$desi=$data['desi'];
$chemin='../image/'.$_SESSION['image'].$photo;
 
// recherche de l'image
//if(@getimagesize($chemin)==true)
if(@getimagesize($chemin)==true) 
 {
	list($width,$height)=getimagesize($chemin);
 
				if($width<$height) {$height=75;$width=65;}
				if($width>$height) {$height=60;$width=100;}
				if($width==$height) {$height=85;$width=85;}
 
$imag=$chemin;
//echo $imag;	echo'<br>';			
 }			
else
$imag="../images/0000.bmp width='75' height='95";	
 
// on affiche le numéro
echo'
<div class="table">
 
<h3> Num </h3>
<div class="lig1">
<P> ';echo $data["Num_yvert"];' </p>
<div>
<P> ';echo $data["Num_yvert"];' </p>
<P> ';echo $data["desi"];' </p>
<P> ';echo $data["annee"];' </p>
</div> <!-- fin de div -->
</div> <!-- fin de div class=lig1 -->
 
</div> <!-- fin de class="table" -->
<br>
';
 
 
    } // fin de  while ($data = mysql_fetch_array($req))
 } //fin de if($categ=='france')
} // fin de for($b=$debut;$b<$fin;$b++)
else 
$_SESSION['select_test_mot']="x";
$_SESSION['select_test_an']= "x";
$_SESSION['select_test_num']= "x";
 
//----------------------------------Fin d'affichage des données France---------------------------------------------						
?>

Code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.table
{
	display:table;
	border-collapse:collapse;
	background:#fff;
 
}
h3
{
	display:table-caption;
	caption-side:bottom;
	font-size:1em;
}
.lig1
{
	display:table-row;
}
.lig1 p
{
	display:table-cell;
	padding: 1em;
	border:solid 5px #000;
	vertical-align:top;
	color:#000;
	background: #fff;
}

Merci de me donner des idées (simple parce que ma maîtrise du CSS est très basique ) ou si vous pensez que la solution reste avec un tableau ?
Bonne journée

**michel71** · 15/07/2015, 14h20

J'ai oublié de préciser:

essayer : collection france
mot dans le titre : paris

les autres sélections ne fonctionnent pas encore

Invité · 15/07/2015, 16h41

Bonjour,
avant de penser au CSS, il faut :

nettoyer le code HTML + le structurer très proprement (ça aide !)
ne plus utiliser de <table> pour afficher un formulaire !
<table> ne sert qu'à afficher des données tubulaires (un tableau, un listing de produits,...)
éviter de placer des blocs en position:absolute; (sauf en connaissance de cause, quand on ne peut pas faire autrement) => voir
surtout NE BLOQUE PAS LA HAUTEUR de tes blocs principaux (#droite, #centre, #gauche) !

Et aussi penser à faire une recherche AVANT de poster

avec les bons mots-clés :
"formulaire CSS" (par exemple)

MAIS SURTOUT :

Div et CSS : une mise en page rapide et facile
Balises HTML5
Les fondamentaux du Responsive Web Design
notamment : utiliser de préférence des % plutôt que des valeurs fixes (width, height)

et évidemment : consulter les FAQs !
Ce ne sont pas les tutos qui manquent

UN CONSEIL :
prends le temps de construire ton site sur des BASES SOLIDES !

un code HTML(5) très bien structuré
le code juste nécessaire et suffisant (pas d'emplâtre sur une jambe de bois)

Autre BON CONSEIL :

pratique une APPROCHE GLOBALE de ton site.
Vois-le dans son ensemble (au lieu de modifier page après page, comme tu sembles le faire...)
Crée un "patron"/modèle (template) ré-utilisable sur toutes les pages, et ce afin d'utiliser le moins de css possible.

**michel71** · 17/07/2015, 15h47

Bonjour,

c'est vrai que j'ai tendance à partir "bille en tête".
Donc j'ai pris le temps de lire les tutos et de réfléchir un peu à ce que je veux faire.

j'ai donc créé une page "test" qui devrait me servir de squelette (une fois tous les problèmes résolus) pour l'ensemble du site
j'espère que vous la trouverez plus propre !

j'ai utiliser des pourcentages pour préparer l'adaptation aux autres supports (du moins je l'espère c'est peut être une conn....)

Pourquoi ne pas utiliser une hauteur définie ? sachant que je ne souhaite pas avoir des pages à rallonge (mes visiteurs sont plutôt âgés et la roulette n'est pas leur fort)

Ce que je n'arrive pas à faire :

placer le "footer" sous le bloc "id=bloc_centre" et faire en sorte qu'il utilise 100% ou 980px
Laisser un espace entre les blocs (évidemment il faudra que je modifie les largeurs)
rendre l'ensemble plus harmonieux (dans les blocs du centre égaliser les hauteurs)

La page test est visible à cette adresse http://www.timbres-de-france.com/tes...ssais/test.php

Code HTML/PHP

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?php
session_start();
require_once('../connex_mysqli/connex_base_gene.php');
$_SESSION['lien']=$_SESSION["adresse_site"]."index.php";
$_SESSION['page']=$_SESSION['lien'];
if(!isset($_SESSION['pseudo'])) $_SESSION['pseudo']="";
include('../connex_mysqli/lecture_stat.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
    	<link rel="stylesheet" href="test_css.css" media="all" type="text/css"/>
    	<link rel="stylesheet" href="../css/style_menu.css" media="all" type="text/css"/>
</head>
 
<body>
 
<!------------------------------------------------------------------------------------------>
<!--  ça je n'y touche plus !!!! -->
<div id="header">
        <div class="pub" align="center"><?php include("../pub/bandeau_pub_970.html");?></div>
        <div class="titre"> TIMBRES DE FRANCE </div>
        <div class="connex"> <?php if($_SESSION['pseudo']<>"") echo 'Bonjour : '.$_SESSION['pseudo'];?>
		<?php if($_SESSION['pseudo']=="")
		echo('<a href='.$_SESSION['adresse_site'].'../espace-perso/accueil-perso.php>Connexion</a>') ?>
		 </div>
 
</div> <!-- fin de header -->
 
<!------------------------------------------------------------------------------------------>
<div id="bloc_centre">
 
        <div class="menu">
                <div ><?php include('../menu/menu.php') ?> </div>
                <div ><?php include('../pub/bandeau_pub_droit.html'); ?> </div>
        </div> <!-- fin de menu -->
 
        <div class="centre">
                 <div><h1><img src="../image_site/0003.jpg" height="80" width="65" alt="Premier timbre français"/>  Le Cérès </h1> </div>
                 <div><p>La philatélie est l'art de collectionner les timbres postaux et timbres fiscaux, et de les étudier. Les collectionneurs et les amateurs de timbres sont des philatélistes.La philatélie est née avec l'apparition des premiers timbres.</p>
 
                        <p>Pour la France, c'est le 30 août 1848 que paraît le décret instaurant le timbre-poste en France. La réalisation en est confiée au graveur général des Monnaies, Jacques-Jean Barre, il propose une représentation de la République sous les traits de Cérès, la déesse latine des moissons et symbole de fertilité. Ce timbre sera mis en vente à partir du 1er janvier 1849, à partir de cette date des personnes ont commencés à garder ces petites vignettes. La philatélie était née </p></div>
        </div> <!-- fin de centre -->
 
        <div class="bord_droit">
                <div >bord droit </div>
                <div >bord droit bas </div>
        </div> <!-- fin de bord_droit -->
 
 
</div> <!-- fin de bloc_centre -->
<!------------------------------------------------------------------------------------------>
<div id="footer">
		<div><?php include('../bandeau/bandeau_bas_css.php'); ?></div>        
</div><!-- fin de footer -->
<!----------------------------------------------------------------------------------------->
 
</body>
</html>

Code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
@charset "utf-8";
/* CSS Document */
/* ------------Bandeau haut ------------*/
#header {
	margin:auto;
	background:#3C3;
	max-height:20%;
	width:100%;
	max-width:980px;
	box-shadow: 0px 2px 5px #12A034;
	border-radius: 10px;	
 
}
.pub {
	padding-top:0.1%;
 
}
.connex  {
	padding-left:80%;
	padding-bottom:1%;
	color:#fff;
}
.connex a {
	color:#fff;
	text-decoration:none; 
}
.titre {
	font-size:2em;
	color:#FEDC52;
	font-weight:bold;
	font-family:Dayrom,BallparkWeiner,Verdana, Arial, Helvetica, sans-serif;
	padding-left:30px;
}
/*----------- bloc centre -------------------------------*/
#bloc_centre {
	margin:auto;
	width:100%;
	max-width:980px;
 
}
.menu {
	float:left;
	background:#3C3;
	width:18%;
	text-align:center;
	box-shadow: 0px 2px 5px #12A034;
	border-radius: 10px;	
 
 
}
.centre {
	float:left;
	padding:3px;
	background:#3C3;
	width:66%;
	box-shadow: 0px 2px 5px #12A034;
	border-radius: 10px;	
 
 
}
.bord_droit {
	float:left;
	background:#3C3;
	width:15%;
	box-shadow: 0px 2px 5px #12A034;
	border-radius: 10px;	
 
}
/*----------- bloc footer -------------------------------*/
 
#footer 
	{	
	background:#3C3;
	margin:auto;
	width:100%;
	max-width:980px;
	height:5%;
	box-shadow: 0px 2px 5px #12A034;
	border-radius: 10px;	
	}
#footer .box_1 div, #footer .box_2 div, #footer .box_3 div, #footer .box_4 div, #footer .box_5 div
{
	float:left;
	text-align:center;
	background:#3C3;
 
 
 
}

Invité · 17/07/2015, 18h45

Pour être sûr de partir sur des bonnes bases :

=> voici ce que ça donne : http://codepen.io/jreaux62/pen/pJZrQd

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<?php session_start();
// encodage UTF-8
header('Content-type:text/html; charset=UTF-8');
// connexion Base de Données
require_once('../connex_mysqli/connex_base_gene.php');
// 
$_SESSION['lien'] = $_SESSION['adresse_site'].'index.php';
$_SESSION['page'] = $_SESSION['lien'];
if( empty($_SESSION['pseudo']) ){ $_SESSION['pseudo'] = ''; } // Mettre TOUJOURS les accolades (c'est plus prudent)
// stats
include('../connex_mysqli/lecture_stat.php');
?>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="keywords" content=".......(mots séparés par des virgules)............" />
	<meta name="description" content="..............(phrase descriptive de la page)................" />
 
	<title>Document sans titre</title>
 
	<link rel="stylesheet" href="test_css.css" media="all" type="text/css"/>
	<link rel="stylesheet" href="../css/style_menu.css" media="all" type="text/css"/>
</head>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
 
<div id="main_wrap"> <!-- div englobant le contenu du site -->
 
 
	<div class="pub"> <!-- on met la pub au-dessus du header (inutile qu'elle soit dednas !)  -->
		<?php include("../pub/bandeau_pub_970.html"); ?>
	</div>
 
	<header id="header">
 
		<h1>TIMBRES DE FRANCE</h1>
		<p class="connex"><?php 
                        if( !empty($_SESSION['pseudo']) ){ 
                                echo 'Bonjour : '.$_SESSION['pseudo'];
                        } else {
                                echo '<a href='.$_SESSION['adresse_site'].'../espace-perso/accueil-perso.php>Connexion</a>';
                        }
                ?></p>
 
	</header> <!-- fin de header -->

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
	<div id="bloc_centre">
 
		<section id="colonne_gauche">
			<nav>
				<?php include('../menu/menu.php') ?>
			</nav>
			<?php include('../pub/bandeau_pub_droit.html'); ?>
		</section> <!-- fin de colonne_gauche -->
 
		<section id="colonne_centre">
 
			<article>
				<header> <!-- entête de l'article : contient (essentiellement) le titre -->
					<h1><img src="../image_site/0003.jpg" height="80" width="65" alt="Premier timbre français"/>  Le Cérès </h1>
				</header>
				<div class="article_contenu"> <!-- contenu de l'article : textes, images, vidéos,... -->
					<p>La philatélie est l'art de collectionner les timbres postaux et timbres fiscaux, et de les étudier. Les collectionneurs et les amateurs de timbres sont des philatélistes.La philatélie est née avec l'apparition des premiers timbres.</p>
					<p>Pour la France, c'est le 30 août 1848 que paraît le décret instaurant le timbre-poste en France. La réalisation en est confiée au graveur général des Monnaies, Jacques-Jean Barre, il propose une représentation de la République sous les traits de Cérès, la déesse latine des moissons et symbole de fertilité. Ce timbre sera mis en vente à partir du 1er janvier 1849, à partir de cette date des personnes ont commencés à garder ces petites vignettes. La philatélie était née </p>
				<div>
			</article>
 
			<!-- on peut mettre PLUSIEURS <article> à la suite ! -->
 
		</section> <!-- fin de colonne_centre -->
 
		<section id="colonne_droite">
			<div>bord droit </div>
			<div>bord droit bas </div>
		</section> <!-- fin de colonne_droite -->
 
	</div> <!-- fin de bloc_centre -->

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
	<footer id="footer">
		<?php include('../bandeau/bandeau_bas_css.php'); ?>
	</footer><!-- fin de footer -->
 
</div> <!-- fin de main_wrap -->
 
</body>
</html>

Code CSS GENERAL :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
@charset "utf-8";
/* CSS Document */
/* -------------------------------------- */
* { margin:0; padding:0; border:0; font-size:100%; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video
{ vertical-align:baseline; box-sizing:border-box; background:transparent; }
table, caption, tbody, tfoot, thead, tr, th, td { vertical-align:middle; box-sizing:border-box; background:transparent; }
html { width:100%; height:100%; font-size:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; }
/* Correction block display (non défini dans IE6/7/8/9 & FF3) */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, address { display:block; } /* balises HTML5 (IE) */
/* viewport */
@-webkit-viewport { width:device-width; }
@-moz-viewport { width:device-width; }
@-ms-viewport { width:device-width; }
@-o-viewport { width:device-width; }
/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
table, td, blockquote, code, pre, textarea, input, iframe, 
img, object, embed, canvas, video, audio, picture { max-width:100%; min-height:auto; }
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
img { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
/* gestion des mots longs */
textarea, table, td, th, code, pre, samp { word-wrap:break-word;/* passage à la ligne forcé */
hyphens:auto; -moz-hyphens:auto; -webkit-hyphens:auto;/* césure propre */ }
/* passage à la ligne spécifique pour les éléments à châsse fixe */
code, pre, samp { white-space:pre-wrap; }
address { font-style:normal; /* (italic par defaut) */ }
 
/* ------------div englobant le contenu du site ------------*/
html, body {}
body { background:#eee;  /* fond gris clair */
  	font-family:Arial, Helvetica, sans-serif;
}
#main_wrap { 
  max-width:1200px; /* largeur maxi de l'affichage */
  margin:0 auto;
}
/* ------------ STRUCTURE DU SITE ------------*/
#header, #bloc_centre, #footer {
	position:relative;
  clear:both;
 
  background:#999966; /* fond vieil or */
  padding:10px;
  margin:1% 0;
  border-radius:5px;
  box-shadow: 0px 2px 5px #999;
}
#bloc_centre { 
  display:table; 
}
#colonne_gauche, #colonne_centre, #colonne_droite {
	position:relative; 
  display:table-cell; /* permet d avoir les 3 colonnes de la même hauteur */
  vertical-align:top;
  padding:10px;
  border-radius:5px;
}
#colonne_gauche, #colonne_droite {
	width:10%; 
  min-width:200px;
}
#colonne_centre {
  background:#eee;
}

Pour le HEADER :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* ------- HEADER : Bandeau haut ------- */
#header_pub {
	text-align:center;
  margin-top:1%;
}
#header h1 {
  text-align:center; 
	color:#FEDC52;
	font-size:2em;
	font-weight:bold;
	font-family:Dayrom,BallparkWeiner,Verdana, Arial, Helvetica, sans-serif;
}
#header .connex { 
  position:absolute; top:20px; right:1%; color:#fff; 
}
#header .connex a { color:#fff; text-decoration:none; }
/* ------------------------------------ */

Pour le FOOTER :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
/* ------- FOOTER : Bandeau bas ------- */
#footer { text-align:center; }
#footer .box_1, #footer .box_2, #footer .box_3, #footer .box_4, #footer .box_5
{
	display:inline-block;
  padding:1%;
	text-align:left;
}
#footer, #footer a { color:#fff; text-decoration:none; }
#footer a:hover { color:green; text-decoration:underline; }
/* ------------------------------------ */

Je te laisse ajouter le reste

Remarques :

Ne mets PAS des <div>...</div> à tout bout de champ ! Il faut qu'il soient utiles, sinon ils n'ont pas lieu d'être.
Reste cohérent dans le choix des " ou ' (ex. $_SESSION['machin'] => toujours avec des ')
N'hésite pas à avoir un code CLAIR : mets des espaces, des indentations,... (c'est plus facile à lire et à déboguer)

**michel71** · 23/07/2015, 13h38

Merci !

C'est super

Bonne journée

Supprimer ces horreurs

CSS

Discussions similaires

Partager

Partager