[CSS] Probleme de bordure de la div globale

**Elmilouse** · 21/07/2005, 19h11

Bonjour,

je souhaite faire ma page d'accueil de la facon suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
------------------------------------------------------------------
|                                                         |                      |
|                        TITRE                        |    CONNEXION |
|                                                         |                      |
------------------------------------------------------------------
|                |                                        |                      |
|   MENU     |           CORPS                   |  RECHERCHE  |
|                |                                        |                      |
|                |                                        |                      |
------------------------------------------------------------------

Chaque partie (titre,connexion,menu,corps,recherche) est un div.
Ma page html est donc codé comme ceci :

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
 
<body>
  <div id="global">
    <div id="titre">
    </div>
    <div id="connexion">
    </div>
    <div id="recherche">
    </div>
    <div id="menu">
    </div>
    <div id="corps">
    </div>
  </div>
</body>

et j'ai ecrit la feuille de style suivante :

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
 
#global {
width: 760px ;
margin-right: auto ;
margin-left: auto ;
margin-top: 10px ;
background-color: #FFFFFF ;
border: 1px solid;
}
 
#titre{
width: 507px;
float: left;
margin: 10px ;
}
 
#connexion{
width: 213px;
float: right;
margin: 10px;
font-align: right;
font-size: 9pt;
}
 
#recherche{
width: 213px;
float: right;
margin: 10px;
font-align: right;
font-size: 9pt;
}
 
#menu{
float: left;
width: 200px;
margin: 10px;
font-size: 12px;
 
}
 
#corps{
width: 280px;
margin: 10px;
float: left;
}

avec ca, j'ai la disposition que je veux, mais je ne vois pas pourquoi, la bordure de la div globale n'entoure pas le tout. elle est visible mais tout en haut de la page, et elle forme en fait juste un trait.
Je pense que c'est un probleme dû à ma feuille de style, mais je ne vois pas où il se situe.

Pourriez vous m'aidez?

**ilood** · 21/07/2005, 20h01

Salut,

Tes blocs sont positionnés en float. Ca a pour effet de les faire sortir du flux normal. Donc il "sortent" de ton bloc global.

En ajoutant un div doté de la propriété clear both ça foncitonnera

html

Code :

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

1
2
3
4
5
  <div id="global">
    ...
    <div id="corps">Corps</div>
    <div class="separe"></div>
  </div>

css

Code :

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

.separe { clear: both; }

**Elmilouse** · 21/07/2005, 20h50

Merci de m'avoir repondu.
Ta solution marche très bien.
Je ne la comprends pas trop pour l'instant mais je pars à la recherche de + d'infos dessus.

Merci beaucoup d'avoir résolu mon problème.

**Elmilouse** · 21/07/2005, 22h11

Finalement, y avait encore quelques imperfections d'affichage.
En fait, la balise <div class="separe"> ne doit pas etre vide.
Pour la remplir sans afficher qqchose, on peut lui mettre à l'interieur un espace incesable (&nbsp).

**jeff_!** · 21/07/2005, 23h02

tu mettre a la place d'un div une balise <hr/> avec display:hidden

[CSS] Probleme de bordure de la div globale

CSS

Discussions similaires

Partager

Partager