Discussion :

[wind_vinch]

hello a tous,

J'ai quelques soucis avec la mise en page de mon site web
En effet, je dispose plusieurs élément a l'aide des div, ceux si se positionnent correctement avec FF mais avec IE 6 j'ai quelques soucis de positionnement

De plus avec IE 7 j'aimerai que lorsqu'il y réduction de la fenêtre les div ne s'alignent pas les uns sous les autres mais restent positionnées où ils sont (comme dans ff quoi).

Quelqu'un aurait-il réponse a mes problèmes ?

Voici les sources

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
 
    <div id="bodyContent">
            <div id="banner">
                 Ma bannière
            </div>
            <div id="menu">
                 Le menu...
            </div>
            <div id="content">
                <div id="contentTop" >
                    <div id="contentTopLeft" >
                       Sous titre du contenu (avec un image en background)
                    </div>
                    <div id="contentTopRight" >
                       Deuxième partie du sous titre du contenu (qui contient un image de fond qui remplit le reste)
                    </div>
                <div id="contentBottom">
                     Contenu du site a proprement dit, qui contient donc les données
                </div>
            </div>
            <div id="footer">
                  Le footer...
            </div>
   </div>

et le css associé a cela:

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
 
#bodyContent
{
	min-width : 800px;
}
 
div#banner 
{
    height : 80px;
    margin-top:50px;
    margin-left:25px;
    background-image: url(../App_Themes/Img/logo.gif); 
    background-repeat: no-repeat;
}
 
div#login
{
    float : right;
    margin-top : 40px;
}
 
div#menu
{
    width : 185px;
    float : left;
    margin-left : 15px;
    padding-top : 80px;
}
 
div#content
{
    margin-left : 200px;
}
 
div#contentTop
{
    height : 180px;
}
 
div#contentTopLeft
{
    height : 180px;
    float : left;
    width : 410px;
    background-image: url(../App_Themes/Img/titre.gif); 
    background-repeat: no-repeat;    
}
 
div#contentTopRight
{
    height : 180px;
    margin-left : 410px;
    background-image: url(../App_Themes/Img/titre_chouia.gif); 
    background-repeat: repeat-x;    
}
 
div#contentBottom
{
    padding-left: 20px; 
    padding-bottom: 20px;
    background-color : #5e5454;
}
 
div#footer
{
    height : 50px;
    clear : both;
    text-align : center;
    padding-top : 50px;
    color:white;
    font-size : 12px;
}

[Smiff]

Je suis pas forcément le mieux placé en ce qui concerne les css mais voilà mon avis :

- Dans chacun de tes tags ajoute la balise position:absolute; (je crois qu'il faut la mettre en absolute pour que la <div> ne soit pas liée à la taille de la fenêtre, si ça ne marche pas essaie avec position:relative; ).

Si ça ne marche pas :

- Edite le tag body en css et donne lui une largeur et une hauteur fixe.

Si ça ne marche pas :

- Evite les px, sauf si le tag body possède une largeur et une hauteur fixe, car la présentation de ton site va pas mal bouger entre les résolutions d'écran et les redimensionnements de fenêtre. Utilise les pourcentages à la place.

Si ça ne marche pas :

- Il va falloir attendre que quelqu'un d'autre poste

Bon courage,

[djoyeux]

Je suis pas forcément le mieux placé en ce qui concerne les css mais voilà mon avis :

- Dans chacun de tes tags ajoute la balise position:absolute; (je crois qu'il faut la mettre en absolute pour que la <div> ne soit pas liée à la taille de la fenêtre, si ça ne marche pas essaie avec position:relative; ).

Si ça ne marche pas :

- Edite le tag body en css et donne lui une largeur et une hauteur fixe.

Si ça ne marche pas :

- Evite les px, sauf si le tag body possède une largeur et une hauteur fixe, car la présentation de ton site va pas mal bouger entre les résolutions d'écran et les redimensionnements de fenêtre. Utilise les pourcentages à la place.

Si ça ne marche pas :

- Il va falloir attendre que quelqu'un d'autre poste

Bon courage,

Désolé mais je pense pas que tes solution fonctionne.

Il faut revoir ton code CSS c'est lui qui pose problème
Min_width n'est pas compatible IE il me semble.

y'a pas que ça comme pproblème.

Prend exemple sur le css de ces kit graphique open source.
http://www.tcheval.net/

[wind_vinch]

hello,

Merci bcp pour les réponses.

Effectivement min-width n'est pas compatible avec ie 6 mais bon le problème n'est pas du tout la....

J'ai navigué sur le site http://www.tcheval.net/ et j'ai pu trouver quelques exemples pour répondre a mon problème.... je crois que je suis sur la bonne voie

...mais je reviendrais surement avec d'autres questions

Merci a tous