Salut, je veux créer une maquette de page en html/css et bootstrap.
J'ai déjà insérer le bootstrap et j'ai fais mes divisions de la page. cependant je n'arrive pas à insérer de background ni à mes sections, ni à mes div, ni à mes asides. De plus je n'arrive pas à inclure d'autres pages telles que "<?php include('header.php');?> et <?php include('footer.php');?> sans qu'il n'y ait déformation. Je ne sais pas pourquoi.
Par exemple si je veux donner un background au premier article qui "art1" dans "index.php"
Ci-dessous les codes des pages:
1) La page "index.php"
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="bootstrap/css/tuto.css"> <style type="text/css"> .col-md-8, .col-sm-10 { line-height: 200px; } .col-md-12 { line-height: 80px; } </style> </head> <body> <div class="container"> <?php include ('header.php');?> <div class="row"> <section class="col-md-8"> <div class="row"> <div class="art1"> <article class="col-md-12"><p class="art1">Article 1 Article 1 Article 1 Article 1 Article 1 Article 1 Article 1 Article 1 Article 1 Article 1 Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1 Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1 Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1 Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1 Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1 Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1Article 1</p></article> </div> <article class="col-md-12"><img src="images/G7.jpg"/></article> <article class="col-md-12">Article 3</article> <article class="col-md-12">Article 4</article> <article class="col-md-12">Article 5</article> </div> </section> <section class="col-md-4"> <div class="row"> <article class="col-md-12">Article 1</article> <article class="col-md-12">Article 2</article> <article class="col-md-12">Article 3</article> <article class="col-md-12">Article 4</article> <article class="col-md-12">Article 5</article> </div> </section> </div> <footer id="foot" class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> <?php include ('footer.php');?> </div> </footer> </div> </body> </html>
2) La page "header.php"
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
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178 <header> <link rel="stylesheet" href="header.css" type ="text/css" /> <div class="head1"> <h4>VOICI VOTRE NOUVEAU SITE</h4></div> <div class="head2"> <h4>VOICI VOTRE NOUVEAU SITE</h4></div> <div> <img src="images/logoeid1.jpg" class="logo1" alt="Logo de Kalyo" id="logo" /> </div> <div class="logo2"> <img src="images/logoeid2.jpg" class="logokalyo" alt="Logo de Kalyo" id="logo" /> </div> <div class="logo3"> <h1>NOTRE IDENTITE</h1></div> <div> <nav> <script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/0B3E2306-2E38-1E44-9D4A-6C1B9A681804/main.js" charset="UTF-8"></script> <ul id="menu"> <li class="violet"><a href="index.php">ACCUEIL</a> <ul> <li><a href="#">A Propos de KMSERVICES</a> <ul> <li><a href="#">Vision et Mission</a></li> <li><a href="#">La vente directe</a></li> <li><a href="#">S'inscrire</a></li> <li><a href="#">Nous contacter</a></li> </ul> </li> <li><a href="#">Nos activités</a> <ul> <li><a href="#">Création de sites web</a></li> <li><a href="#">Création d'applications</a></li> <li><a href="#">Infographie</a></li> <li><a href="#">Vente de matériels informatiques</a></li> </ul> </li> <li><a href="#">Activités commerciales</a> <ul> <li><a href="#">Rémunération</a></li> <li><a href="#">Marketing professionnel</a></li> <li><a href="#">La courte histoire</a></li> </ul> </li> </ul> </li><!-- --><li class="bleu"><a href="presentation.php">PRESENTATION</a> <!--<ul> <li><a href="#">Actualité 1 facultatif</a> <ul> <li><a href="#">Actualité 2</a></li> <li><a href="#">Actualité 3</a></li> <li><a href="#">Actualité 4</a></li> </ul> </li> <li><a href="#">Lien sous menu</a> <ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> </li> <li><a href="#">Lien sous menu</a> <ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> </li> </ul> --> </li><!-- --><li class="orange"><a href="services.php">SERVICES</a> <ul> <li><a href="#">SITES INTERNET</a> <ul> <li><a href="#">Sites statiques</a></li> <li><a href="#">Sites dynamiques</a></li> </ul> </li> <li><a href="#">APPLICATIONS</a> <ul> <li><a href="#">Applications en PHP</a></li> <li><a href="#">Applications en JAVA</a></li> <li><a href="#">Applications en RUBBY</a></li> <li><a href="#">Applications en PYTHON</a></li> </ul> </li> <li><a href="#">INFOGRAPHIE</a> <ul> <li><a href="#">Création de logos</a></li> <li><a href="#">Création d'affiches publicitaires</a></li> <li><a href="#">Création de dépliants...</a></li> </ul> </li> <li><a href="#">MONTAGE VIDEO</a> <ul> <li><a href="#">Montage de clips vidéos</a></li> <li><a href="#">Montage de films</a></li> <li><a href="#">Montage pour évenements...</a></li> </ul> </li> <li><a href="#">VENTE DE MATERIELS INFORMATIQUES</a> <ul> <li><a href="#">Vente d'ordinateurs</a></li> <li><a href="#">Vente d'imprimantes</a></li> <li><a href="#">Vente de logiciels...</a></li> </ul> </li> </ul> </li><!-- --><li class="vert"><a href="realisations.php">REALISATIONS</a> <ul> <li><a href="#">Lien sous menu</a> <ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> </li> <li><a href="#">Lien sous menu</a> <ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> </li> <li><a href="#">Lien sous menu</a> <ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> </li> </ul> </li><!-- --><li class="bleu"><a href="contact.php">CONTACTS</a> <ul> <li><a href="#">Facebook</a> <!--<ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> --> </li> <li><a href="#">Twitter</a> <!--<ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> --> </li> <li><a href="#">Gmail</a> <!--<ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> --> </li> </ul> </li> </ul> <!-- <img src="images/faceb2.jpg" class="logo2" alt="2 eme Logo" id="logo2" /> <img src="images/twitter.jpg" class="logo3" alt="3 eme Logo" id="logo3" /> --> </nav> </div> <!-- <div id="banniere_description"> --> <!-- <div id="banniere_image"> <h1 class="welcome">BIENVENUE</h1> <p class="commentaire"> Nous avons créé notre site que voici dans le but de vous faire comprendre l'importance de notre activité!</br> Ce site relatera tous les domaines de service dans lesquels nous exerçons à travers tout le continent! </p> </br> <p class="coul"> <marquee class="marq" scrollamount="5" direction="left" onmouseover="this.stop()" onmouseout="this.start()"> <em> <!-- -- Bienvenue sur votre site de prestation de services! Bienvenue sur votre site de prestation de services! <!-- -- Bienvenue sur votre site de prestation de services!</em> </marquee> </p> </div> </div> --> </header>
3) La page "footer.php"
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
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178 <header> <link rel="stylesheet" href="header.css" type ="text/css" /> <div class="head1"> <h4>VOICI VOTRE NOUVEAU SITE</h4></div> <div class="head2"> <h4>VOICI VOTRE NOUVEAU SITE</h4></div> <div> <img src="images/logoeid1.jpg" class="logo1" alt="Logo de Kalyo" id="logo" /> </div> <div class="logo2"> <img src="images/logoeid2.jpg" class="logokalyo" alt="Logo de Kalyo" id="logo" /> </div> <div class="logo3"> <h1>NOTRE IDENTITE</h1></div> <div> <nav> <script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/0B3E2306-2E38-1E44-9D4A-6C1B9A681804/main.js" charset="UTF-8"></script> <ul id="menu"> <li class="violet"><a href="index.php">ACCUEIL</a> <ul> <li><a href="#">A Propos de KMSERVICES</a> <ul> <li><a href="#">Vision et Mission</a></li> <li><a href="#">La vente directe</a></li> <li><a href="#">S'inscrire</a></li> <li><a href="#">Nous contacter</a></li> </ul> </li> <li><a href="#">Nos activités</a> <ul> <li><a href="#">Création de sites web</a></li> <li><a href="#">Création d'applications</a></li> <li><a href="#">Infographie</a></li> <li><a href="#">Vente de matériels informatiques</a></li> </ul> </li> <li><a href="#">Activités commerciales</a> <ul> <li><a href="#">Rémunération</a></li> <li><a href="#">Marketing professionnel</a></li> <li><a href="#">La courte histoire</a></li> </ul> </li> </ul> </li><!-- --><li class="bleu"><a href="presentation.php">PRESENTATION</a> <!--<ul> <li><a href="#">Actualité 1 facultatif</a> <ul> <li><a href="#">Actualité 2</a></li> <li><a href="#">Actualité 3</a></li> <li><a href="#">Actualité 4</a></li> </ul> </li> <li><a href="#">Lien sous menu</a> <ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> </li> <li><a href="#">Lien sous menu</a> <ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> </li> </ul> --> </li><!-- --><li class="orange"><a href="services.php">SERVICES</a> <ul> <li><a href="#">SITES INTERNET</a> <ul> <li><a href="#">Sites statiques</a></li> <li><a href="#">Sites dynamiques</a></li> </ul> </li> <li><a href="#">APPLICATIONS</a> <ul> <li><a href="#">Applications en PHP</a></li> <li><a href="#">Applications en JAVA</a></li> <li><a href="#">Applications en RUBBY</a></li> <li><a href="#">Applications en PYTHON</a></li> </ul> </li> <li><a href="#">INFOGRAPHIE</a> <ul> <li><a href="#">Création de logos</a></li> <li><a href="#">Création d'affiches publicitaires</a></li> <li><a href="#">Création de dépliants...</a></li> </ul> </li> <li><a href="#">MONTAGE VIDEO</a> <ul> <li><a href="#">Montage de clips vidéos</a></li> <li><a href="#">Montage de films</a></li> <li><a href="#">Montage pour évenements...</a></li> </ul> </li> <li><a href="#">VENTE DE MATERIELS INFORMATIQUES</a> <ul> <li><a href="#">Vente d'ordinateurs</a></li> <li><a href="#">Vente d'imprimantes</a></li> <li><a href="#">Vente de logiciels...</a></li> </ul> </li> </ul> </li><!-- --><li class="vert"><a href="realisations.php">REALISATIONS</a> <ul> <li><a href="#">Lien sous menu</a> <ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> </li> <li><a href="#">Lien sous menu</a> <ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> </li> <li><a href="#">Lien sous menu</a> <ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> </li> </ul> </li><!-- --><li class="bleu"><a href="contact.php">CONTACTS</a> <ul> <li><a href="#">Facebook</a> <!--<ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> --> </li> <li><a href="#">Twitter</a> <!--<ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> --> </li> <li><a href="#">Gmail</a> <!--<ul> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> <li><a href="#">Lien sous sous menu</a></li> </ul> --> </li> </ul> </li> </ul> <!-- <img src="images/faceb2.jpg" class="logo2" alt="2 eme Logo" id="logo2" /> <img src="images/twitter.jpg" class="logo3" alt="3 eme Logo" id="logo3" /> --> </nav> </div> <!-- <div id="banniere_description"> --> <!-- <div id="banniere_image"> <h1 class="welcome">BIENVENUE</h1> <p class="commentaire"> Nous avons créé notre site que voici dans le but de vous faire comprendre l'importance de notre activité!</br> Ce site relatera tous les domaines de service dans lesquels nous exerçons à travers tout le continent! </p> </br> <p class="coul"> <marquee class="marq" scrollamount="5" direction="left" onmouseover="this.stop()" onmouseout="this.start()"> <em> <!-- -- Bienvenue sur votre site de prestation de services! Bienvenue sur votre site de prestation de services! <!-- -- Bienvenue sur votre site de prestation de services!</em> </marquee> </p> </div> </div> --> </header>
3) Le css de la page footer qui est "footer.css"
5) Le css de la page index est "tuto.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 { /* background: url('images/ico_top.png') no-repeat top center, url('images/separateur.jpg') repeat-x top, url('images/ombre.png') repeat-x top; */ /* width:1200px; */ height:auto; border-bottom: 3px solid rgb(192,192,192); border-top: 3px solid rgb(192,192,192); background-color:rgb(73,63,64); padding-top: 25px; margin-left:-300px; margin-right:-300px; margin-top:-50px; margin-bottom:-50px; padding-bottom:150px; } footer p, footer ul { font-size: 1em; } footer h1 { font-size: 1.1em; } #tweet, #mes_photos, #mes_amis { display: inline-block; vertical-align: top; } #tweet { width: 28%; margin-left:300px; margin-right:-200px; } #mes_photos { width: 40%; margin-right:-80px; } #mes_amis { width: 31%; margin-left:-80px; } #mes_photos img { border: 1px solid #181818; margin-right: -40px; margin-left:40px; } #mes_amis ul { display: inline-block; vertical-align: top; margin-top: 0; width: 48%; list-style-image: url('images/ico_liensexterne.png'); padding-left: 2px; } #mes_amis a { text-decoration: none; color: #760001; }
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 body { padding-top: 10px; } [class*="col-"], footer { /*background-color: lightgreen; */ background: url("images/fnd.jpg") no-repeat center center; border: 2px solid blue; border-radius: 6px; line-height: 40px; text-align: center; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } .art1 { background: url("images/G7.jpg") fixed no-repeat; /*background: url("images/fnd.jpg") no-repeat center center; *background-image:img src=" background: url('../images/fnd.jpg') no-repeat center center; */ background-size: cover; background-position: center; background-attachment: fixed; }
Partager