Diviser une page en plusieurs partie

Invité · 18/05/2009, 16h05

Bonjour,

Tout d'abord je voulais m'excusé si mon topic n'est pas à la bonne place.

Voila je suis en train de développer un site web, et j'aimerai diviser le contenu d'une de mes pages en 3 parties ! Je m'explique avec un dessin ci joint : http://jeanjean8501.free.fr/plan.jpg

Donc mon site web contient une header un contenu et un footercomme vous pouvez le voir.

Donc dans mon contenu en partie 1 j'aimerai mettre une partie news, en 2 une partie des infos relatives au MAJ du site et en 3 quelques photos.

Le problème qui se pose, c'est que je ne sais pas comment diviser mon contenu en 3 partie. J'ai essayé avec la propriété float dans mon css mais sa ne marche pas !

Voici le code que j'ai mis en place afin de tester les différentes propriétés:

index.php

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
<!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" />
        <link href="style.css" rel="stylesheet" type="text/css"/>
 
        <!-- Auteur de la page -->
		<meta name="author" content="JeanJean"/>
    	<title>Site test</title>     
    </head>
 
    <body>
		<div id="header">
        	<table id="header_table" cellpadding="0" cellspacing="0">
            	<tr>
                    <td id="header_table_m"><a href="index.php"><img src="images/header.png" border="0" alt="header" /></a>
                    </td>
               </tr>
            </table>
        </div>
 
		<div id="News_brief_left">
            <table id="news_table" cellpadding="0" cellspacing="0" width="20%" bgcolor="#00FF33">
            <tr>
                <td>
                    News 1
                </td>
            </tr>
            <tr>
                <td>
                    News 2
                </td>
            </tr>
            </table>
        </div>
		<div id="News_brief_center">
            <table id="news_table" cellpadding="0" cellspacing="0" width="20%" bgcolor="#CDD231">
            <tr>
                <td>
                    News 1
                </td>
            </tr>
            <tr>
                <td>
                    News 2
                </td>
            </tr>
            </table>
        </div>
        <div id="News_brief_right">
            <table id="news_table" cellpadding="0" cellspacing="0" width="20%" bgcolor="#556743">
            <tr>
                <td>
                    News 1
                </td>
            </tr>
            <tr>
                <td>
                    News 2
                </td>
            </tr>
            </table>
        </div>
 
		<div id="footer">    
        	<table id="footer_table" cellpadding="0" cellspacing="0">
            	<tr>
                    <td id="footer_table_m"> <img src="images/footer.png" border="0" alt="Footer" />  <!-- <p>Copyright "JeanJean" 2008, tous droits réservés</p>-->
                    </td>
               </tr>
            </table>        
        </div>
 
    </body>    
</html>

style.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
@charset "utf-8";
/* CSS Document */
 
body{
	margin: 30px;
}
 
#header_table{
 
	height: 120px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	background:url(images/header.png);
	background:no-repeat;
}
 
#contenu{
 
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	background: url(images/contenu_mm.png);
	color:#000000;
}
 
# News_brief_left{
	float:left;
}
 
# News_brief_right{
	float:right;
}
 
# News_brief_center{
}
 
#footer{
	clear:both;
}
 
#footer_table{
 
	height: 60px;
	margin-left: auto;
	margin-right: auto;
	background:url(images/footer.png);
	background:no-repeat;
}

Si quelqu'un pouvait m'eclairer se serait sympa.

Ps: Ce que je veux faire ressemblerai a peut pret a ça : http://ub90.free.fr/main/index.php

**12monkeys** · 18/05/2009, 20h03

Bonsoir

Voici un petit tutoriel qui pourrait t'aider à faire ce que tu veux : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

Invité · 18/05/2009, 20h06

Merci pour ce tutoriel, je vais aller y jeter un oeil

**12monkeys** · 18/05/2009, 20h15

Bon aller un exemple vite fait :

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
33
34
35
36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr-FR">
<head>
<title>Testes</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
div { border: 1px solid black;margin:15px; }
#conteneur { overflow: hidden; }
#conteneur div { margin:5px;width:40%;float:left; }
</style>
</head>
 
<body>
 
  <div>
header
  </div>
 
  <div id="conteneur">
    <div>
1
    </div>
    <div>
2
    </div>
    <div>
3
    </div>
  </div>
 
  <div>
Pied
  </div>
 
</body>
</html>

Invité · 19/05/2009, 17h28

Merci pour tes exemples, je n'ai pas encore u le temps de m'y pencher. Mais se soir je me conscacre à sa !

Invité · 22/05/2009, 19h24

Nikel sa marche comme je voulais, merci pour ton aide

Diviser une page en plusieurs partie

CSS

Discussions similaires

Partager

Partager