Mise en Page CSS

**rems033** · 28/11/2007, 11h04

Salut à tous
Je code un site internet et la j'avous que je bloque vraiment sur un probleme de mise en page...
Je pense pourtant avoir fait tout ce qu'il fallait!
Apercu : http://www.licences4.net/test/index.php
Je vous laisse un bout de mon code html et 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
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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
 
<!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" />
<meta name="identifier-url" content="http://www.licences4.net">
<meta name="Description" content="Ventes,achats,transferts touristiques de licences de debit de boissons(licence 4 ou 3 ou 2),plus de 4000 licences references sur notre site" />
<meta name="keywords" content="licence 4,licence 3,licence 2,licence IV,licence III,licence II,cafe,bar,hotel,hotellerie,transfert touristique,code de la sante publique,
code des debits de boissons,ventes,achats,chr,douanes,zone protegee,debit de boissons,alcool,biere,vin,champagne,aperitif,brasserie,brasseur,pub,discotheque" />
<meta name="reply-to" content="service-commercial@licences4.net">
<meta name="revisit-after" content="8 day">
<meta name="author"content="Remi DUDREUIL">
<link rel="stylesheet" type="text/css" title="CSS" href="styles.css" media="screen" />
<title>Cabinet Licences IV : Le Spécialiste de La Vente de Licences de Débits de Boissons</title>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
 
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
//--><!]]></script>
</head>
 
<body>
<div id="page">
    <div id="kg-01_">
    </div>
    <div id="kg-02_">
    </div>
    <div id="kg-03_">
        Aujourd'hui, 
        <p>
        <?php    // Script interrogeant le nombre de licences dans la base de donnees
            mysql_connect("****", "****", "*****");
            mysql_select_db("*****");
 
            // Combien de licences disponibles
            $retour = mysql_query("SELECT COUNT(*) AS nbre_entrees FROM licences");
            $donnees = mysql_fetch_array($retour);
 
            echo $donnees['nbre_entrees']; 
 
            // Déconnexion de MySQL
            mysql_close(); 
        ?> Licences disponibles</p>
 
    </div>
    <div id="kg-04_">
    </div>
    <div id="kg-05_">
    </div>
    <div id="menu">
        <div id="kg-06_">
        </div>
        <div id="kg-10_">
            05.56.50.95.98<br />06.24.32.85.44<br />
               <a href="mailto:service-commercial@licences4.net"><img src="images/e_mail2_068.gif" alt="contactez nous" width="39" height="45" border="0"/></a>
        </div>
        <div id="kg-12_">
        </div>
        <div id="kg-13_">        
        <ul id="glossymenu">
            <li><a href="index.php">Accueil</a></li>
 
            <li><a href="recherche.php">Recherche Géographique</a></li>
 
            <li><a href="licences.php">Les Types de Licences</a>
                <ul>
                    <li><a href="licence2.php">La Licence II</a></li>
                    <li><a href="licence3.php">La Licence III</a></li>
                    <li><a href="licence4.php">La Licence IV</a></li>
                </ul>
            </li>
 
            <li><a href="reglementation.php">La Réglementation</a>
                <ul>
                    <li><a href="sante_publique.php">Code de la Santé Publique</a></li>
                    <li><a href="arretes_prefectoraux.php">Les Arrêtés Préfectoraux</a></li>
                    <li><a href="transfert_touristique.php">Le Transfert Touristique</a></li>
                    <li><a href="zones_protegees.php">Les Zones Protégées</a></li>
                </ul>
            </li>
 
            <li><a href="adresses.php">Adresses Utiles</a>
                <ul>
                    <li><a href="syndicats.php">Les Syndicats Hôteliers</a></li>
                    <li><a href="douanes.php">Les Douanes</a></li>
                </ul>
            </li>
 
          <li><a href="liens.php">Liens Utiles</a></li>
 
          <li><a href="faq.php">FAQ</a></li>
 
          <li><a href="a_propos.php">Qui Sommes nous ?</a></li>
 
          <li><a href="contact.php">Nous Contacter</a></li>
 
        </ul>  
        </div>
 
          <div id="kg-14_">
        </div>
        <div id="kg-15_">
        Dernière Mise à jour<br/>
        <p>
        <?php    // script permettant d'afficher la date et l'heure courante
                // Enregistrons les informations de date dans des variables
 
                $jour = date("d");
                $mois = date("m");
                $annee = date("Y");
 
                $heure = date("H");
                $minute = date("i");
 
                // Maintenant on peut afficher ce qu'on a recueilli
                echo "$jour/$mois/$annee à $heure h 00";
        ?>
        </p>
          </div>
    </div>
 
    <div id="contenu">
        <div id="kg-07_">
        </div>    
        <div id="content">
            <div id="kg-08_">
            </div>
 
            <div id="kg-11_">
              <p class="titre"><img alt="" src="images/fleche.gif" width="14" height="14" />
                <strong>Licences4.net</strong> fait peau neuve 
                <img alt="" src="images/fleche.gif" width="14" height="14" /><br>
                <img alt="" src="images/fleche.gif" width="14" height="14" />
                Nouveau Site Internet pour votre confort 
                <img alt="" src="images/fleche.gif" width="14" height="14" />
              </p>
 
                <marquee SCROLLAMOUNT="3" width="98%" BEHAVIOR="alternate" style="height: 41px">
                <font class="style2">
                <?php    // Script autorisant l'affichage de la date en francais
                // On récupère le numéro du jour correspondant au timestamp (0, 1, 2, 3...)
                $numero_jour = date('w');
                $numero_mois = date('n');
                $numero_annee = date('Y');
                $jourMois = date("d");
 
                // On crée un array pour numéroter les jours (0 => Dimanche, 1 => Lundi...)
                $jours = array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
                $mois = array('janvier','f&eacute;vrier','mars','avril','mai','juin','juillet','ao&ucirc;t','septembre','octobre','novembre','d&eacute;cembre');
 
                // On récupère le nom du jour en français grâce à l'array qu'on vient de créer
                $jour = $jours[$numero_jour];
                $mois = $mois[$numero_mois-1];
 
                // Puis on affiche le résultat
                echo "Aujourd'hui $jour $jourMois $mois $numero_annee";
 
                ?></font>
                <br />
                <font class="style1"><strong>
                <?php    // Script interrogeant le nombre de licences dans la base de donnees
                mysql_connect("********, "*****", "**");
                mysql_select_db("*****");
 
                // Combien de licences disponibles
                $retour = mysql_query("SELECT COUNT(*) AS nbre_entrees FROM licences");
                $donnees = mysql_fetch_array($retour);
 
                echo $donnees['nbre_entrees']; 
 
                // Déconnexion de MySQL
                mysql_close(); 
                ?></strong></font> <font class="style2">Licences disponibles...</font>
                </marquee>
                <p>
                    <a href="recherche.php"><img src="images/Licence2.gif" alt="Recherche Géographique" width="218" height="262" border="1"/></a>            </p>
                <p>
                <a href="recherche.php">Vous recherchez une Licence IV, 
                III ou II</a>, notre site référence les Licences disponibles et 
                cessibles par département.<br />
                Professionnels du C.H.R. ( Cafés, Hôtels, Restaurants), vous pourrez 
                consulter la <a href="sante_publique.php">
                règlementation</a> 
                concernant les débits de boissons ainsi que les divers 
                <a href="arretes_prefectoraux.php">arrêtés 
                préfectoraux</a> concernant les zones protégées, les diverses 
                <a href="douanes.php">adresses des Douanes</a> assurant le 
                secrétariat de la commission des transferts touristiques ainsi que 
                les coordonnées des 
                <a href="syndicats.php">syndicats de l'hôtellerie</a>
                </p>
 
 
            </div>
            <div id="kg-16_">
            </div>
        </div>
        <div id="kg-09_">
        </div>
 
    </div>
 
 
 
 
 
 
    <div id="footer">
        <div id="kg-17_">
        </div>
        <div id="kg-18_">
        </div>
        <div id="kg-19_">
            <p><a href="index.htm">Accueil</a> - 
            <a href="a_propos.php">Qui Sommes-nous ?</a> -
            <a href="recherche.php">Recherche Géographique</a> -
            <a href="licences.php">Licences</a> -
            <a href="reglementation.php">Réglementation</a> - <br />
            <a href="adresses.php">Adresses Utiles</a> - 
            <a href="faq/faq.php">FAQ</a> - 
            <a href="liens_utiles/liens_utiles.php">Liens Utiles</a> -
            <a href="contact/contact.php">Contacts</a> -
            <a href="plan_du_site.php">Plan du Site</a></p>
            <p><strong>RCS Bordeaux n° 323 508 168</strong> - Copyright © 2007 Licences4.net.<br />
            Tous droits réservés - Design par <a href="http://www.net-productions.fr">http://www.net-productions.fr</a> </p>
 
 
        </div>
        <div id="kg-20_">
        </div>
    </div>
 
</div>
 
 
 
 
</body>
</html>

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
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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
 
html {
    background:#666666;
}
 
body {
    width:850px;
    height:900px;
    margin: 0px auto;
    text-align:center;
    font: 10pt Verdana, Arial, Helvetica, sans-serif ;
    background:#666666;
}
 
#page {
    margin: 0px auto;
    width:850px;
    height:900px;
}
 
#kg-01_ {
    margin:0px;
    padding:0px;
    width:850px;
    height:119px;
    background-image:url(images/kg_01.png);
}
 
#kg-02_ {
    float:left ;
    margin:0px;
    padding:0px;
    width:595px;
    height:62px;
    background-image:url(images/kg_02.png);
}
 
#kg-03_ {
    float:left ;
    margin:0px;
    padding:0px;
    width:225px;
    height:62px;
    background-image:url(images/kg_03.png);
    text-align:left;
}
 
#kg-03_ p {
    text-align:center;
    color:#FF0000;
    font-size:16px;
    font-weight:bold;
}
 
#kg-04_ {
    float:left;
    margin:0px;
    padding:0px;
    width:30px;
    height:62px;
    background-image:url(images/kg_04.png);
}
 
#kg-05_ {
    float:left ;
    margin:0px;
    padding:0px;
    width:28px;
    height:614px;
    background-image:url(images/kg_05.png);
}
 
#menu {
    float:left ;
 
}
 
#kg-06_ {
    float:none ;
    margin:0px;
    padding:0px;
    width:188px;
    height:8px;
    background-image:url(images/kg_06.png);
}
 
#contenu {
    float:left;
    width:634px;
    height:614px;
}
 
#kg-07_ {
    float:left;
    margin:0px;
    padding:0px;
    width:30px;
    height:614px;
    background-image:url(images/kg_07.png);
}
 
#kg-08_ {
    float:left;
    margin:0px;
    padding:0px;
    width:574px;
    height:22px;
    background-image:url(images/kg_08.png);
    color:#FFFFFF;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:22px;
    font-weight:bold;
}
 
#kg-09_ {
    float:left;
    margin:0px;
    padding:0px;
    width:30px;
    height:614px;
    background-image:url(images/kg_09.png);
}
 
#kg-10_ {
    margin:0px;
    padding:0px;
    width:188px;
    height:101px;
    background-image:url(images/kg_10.png);
    overflow:auto;
}
 
#kg-11_ a {
    border:none;
    text-decoration:none;
}
 
#kg-11_ p.titre {
    font-size:20px;
    color:#336699;
}
 
#kg-11_ p.rouge_gras {
    font-size:24px;
    font-weight:bold;
    color:#FF0000;
}
 
#kg-11_ p {
    font-size:small;
    color:#003399;
    font-weight:normal;
}
 
#kg-11_ .style1 {
    color:#FF0000;
    font-weight::bold;
}
 
#kg-11_ .style2 {
    color:#336699;
    font-weight::bold;
}
 
#kg-11_ a {
    text-decoration:none;
    color:#990000;
    font-size:small;
}
 
#kg-11_ a:hover {
    text-decoration:none;
    color:#FF0000;
}
 
#kg-11_ {
    margin:0px;
    padding:0px;
    width:574px;
    height:567px;
    background-image:url(images/kg_11.png);
}
 
#kg-12_ {
    float:none ;
    margin:0px;
    padding:0px;
    width:188px;
    height:24px;
    background-image:url(images/kg_12.png);
}
 
#kg-13_ {
    float:none ;
    margin-top:0px;
    padding:0px;
    width:188px;
    height:391px;
    background-image:url(images/kg_13.png);
}
 
#kg-14_ {
    float:none ;
    margin:0px;
    padding:0px;
    width:188px;
    height:21px;
    background-image:url(images/kg_14.png);
}
 
#kg-15_ {
    float:none ;
    margin:0px;
    padding:0px;
    width:188px;
    height:69px;
    background-image:url(images/kg_15.png);
    color:#FFFFFF;
    font-size:small;
}
 
#kg-15_ p {
    font-weight:bold;
    font-size:14px;
    color:#FFFF00;
    letter-spacing:0px;
}
 
#kg-16_ {
    margin:0px;
    padding:0px;
    width:574px;
    height:25px;
    background-image:url(images/kg_16.png);
}
 
#footer {
    clear:both ;
    width:850px;
    height:105px;
}
 
#kg-17_ {
    clear:both;
    margin:0px;
    padding:0px;
    width:850px;
    height:13px;
    background-image:url(images/kg_17.png);
}
 
#kg-18_ {
    float:left;
    margin:0px;
    padding:0px;
    width:170px;
    height:92px;
    background-image:url(images/kg_18.png);
}
 
#kg-19_ p, a {
    color:#666666;
    font-size:9px;
    text-decoration:none;
}
 
#kg-19_ p, a:hover {
    color:#333333;
    text-decoration:none;
}
 
#kg-19_ {
    float:left;
    margin:0px;
    padding:0px;
    width:522px;
    height:92px;
    background-image:url(images/kg_19.png);
}
 
#kg-20_ {
    float:left;
    margin:0px;
    padding:0px;
    width:158px;
    height:92px;
    background-image:url(images/kg_20.png);
}
 
#content_ {
    float:left ;
    margin:0px;
    padding:0px;
    width:574px;
    height:621px;
}
 
#glossymenu{
    list-style-type: none;
    margin: 5px 0;
    padding: 0;
    width: 170px;
    border: 1px solid #9A9A9A;
    border-bottom-width: 0;
}
 
#glossymenu li a{
    background: white url(images/glossyback.gif) repeat-x bottom left;
    font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color:white;
    display: block;
    height: 25px;
    width: auto;
    padding: 8px 0;
    padding-left: 10px;
    text-decoration: none;
 
}
 
 
* html #glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
    width: 160px;
}
 
#glossymenu li a:visited, .glossymenu li a:active{
    color: white;
}
 
#glossymenu li a:hover{
    background-image: url(images/glossyback2.gif);
}
 
 
#glossymenu, #glossymenu ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    float : left;
    width : 186px;
}
 
#glossymenu li ul { /* second-level lists */
    position : absolute;
    left: -999em;
    margin-left : 12.5em;
    margin-top : -2.0em;
}
 
#glossymenu li:hover ul, #glossymenu li li:hover ul, #glossymenu li li li:hover ul, #glossymenu li.sfhover ul, #glossymenu li li.sfhover ul, #glossymenu li li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
    min-height: 0;
}

Je vous remercie d'avance pour vos réponses!!
Ca m'aidera bcp!

**BnA** · 28/11/2007, 11h47

Salut

Rajoute un "float:left;" sur ta DIV #kg-11_

Le gros du problème est résolu; tu aura toujours un léger bug de positionnement, mais tu devrais savoir régler ça toi-même.

**rems033** · 28/11/2007, 12h04

merci beaucoup pour le div_kg_11 c'est ok mais seulement, il me reste un souci avec le 9, il ne veut pas se positionner au bon endroit!!!
ahahahahah
Reregarde le site si tu peux encore m'aider!
merci beaucoup!