Div pas bien positionné [Résolu]

[typhoon74]

Bonjour à tous,

J'espère que je vais me faire comprendre.

Je suis entrain de m'essayer au css (de comprendre comment les div interagissent) entre eux et je tombe sur une colle que je n'arrive pas à résoudre.

Voici le site ou le code est installé : http://sej.collonges-sous-saleve.fr/atsr74/

et voici mon css:

Code :

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
body {
    background-color:#4c522f;
    font-family: Arial, Verdana, serif;
    margin: 0;
}
 
/********************** Fond ***************************/
#fond {
    /*background-image: url(../images/fond.jpg);*/
    background-color: black;
    width: 1000px;
    height: 800px;
    margin: 0px auto;
}
 
/********************** Menu ***************************/
#menu {
    background-color: red;
    width: 1000px;
    height: 110px;
    text-align: left;
    position: relative;
    margin-top: 180px;
}
 
/********************** Contenu ***************************/
#contenu {
    background-color: green;
    text-align: left;
    width: 1000px;
    height: 460px;
    position: relative;
}
 
/********************** Texte ***************************/
#texte {
    background-color: blue;
    text-align: justify;
    width: 595px;
    height: 445px;
    font-size: 13px;
    float:left;
    margin: 0px 10px 10px 65px;
}
 
/********************** Photo ***************************/
#photo {
    background-color: yellow;
    text-align: center;
    width: 260px;
    height: 445px;
    font-size: 14px;
    float:left;
    margin: 0px 60px 10px 10px;
}
 
/********************** Pied de page ***************************/
#pied_page {
    background-color: purple;
    width: 950px;
    height: 35px;
    position: relative;
    text-align: left;
    font-size: 10px;
    padding: 15px 0px 0px 50px;
}

Je ne comprend pas pourquoi mon block noir nommé "fond" ne se présente pas tout en haut de ma page. il commence au même niveau que mon block rouge nommé "menu"... Si j'attribue un position: absolute à mon block fond, tout se place parfaitement mais je perds mon centrage.

Avez vous une idée?

Merci d'avance,
David

[David55]

Bonjour,
Ton div "fond" n'est pas au même niveau que ton div "menu". "menu" est dans ton div "fond"!

Si tu modifie la taille de ton block rouge tu verra le block noir deriere!

Ceci étant je n'ai pas encore réussit à régler le soucis!

Une solution simple serai de créer un block noir au dessus du rouge!


PS: utilise firebug

[Candygirl]

Hello,

Tu es confronté à la problématique de fusion de marges (css2.1 en).

Il y a différentes manières de régler le problème, selon les cas. Ici, tu pourrais jouer avec un padding-top sur le #fond plutôt que le margin-top de 180 sur ton #menu (source de ton "problème").

Autrement, appliquer une propriété qui confère un nouveau contexte de formatage au parent empêche la fusion des marges.

[typhoon74]

Bingo!!!

Merci à toi CandyGirl, c'était bien ça. ça marche nikel!!
Merci à toi également David55.

Typhoon