margin-left et la resolution

Version imprimable

Salut Internautes,

J'ai un probleme avec les css. En fait pour ma page j'utilise le margin-left:-100%; mais je viens de remarquer que le Box en question disparaissait. Et j'ai du remarque qu'elle dependait de la resolution du Moniteur. Y a t il une solution pour ca?

Merci d'avance

ce css code:

Code:

1
2
3
4
5
6
7
8
9
10
11
.content-left {
	padding:20px 10px;
	float:left;
	width:180px;
	margin-top:-1px;
	position:relative;
	margin-left:-100%;
	right:200px;
	_left:200px;
	border-top:1px dotted #797979;
	}

le content-left se trouve dans un div

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
 
<body>
    <div class="content-container">
        <div class="content-container-inner">
            <div class="content-main">
                <a name="maincontent" id="maincontent"></a>
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div>
            <!-- Render Navigation Page -->
<form action="/UltraChart/UltraChart" method="post">
 
<div class="content-left">
    <div class="side-bucket">
        <ul>
            <li class="first"><a href="#">Zeitraum:</a></li>
            <ul>
                <li>
                    <input checked="checked" id="PLastWeek" name="model.Zeitraum" type="radio" value="lastWeek" />
                    <label for="PLastWeek" class="Period" id="LLastWeek">
                        Letzte Kalenderwoche
                    </label>
                </li>
                <li>
                    <input id="PLastMonth" name="model.Zeitraum" type="radio" value="lastMonth" />
                    <label for="PLastMonth" class="Period" id="LLastMonth">
                        Letzter Kalendermonat
                    </label>
                </li>
                <li>
                    <input id="PLastThreeMonth" name="model.Zeitraum" type="radio" value="lastThreeWeek" />
                    <label for="PLastThreeMonth" class="Period" id="LLastThreeMonth">
                        Letzte 3 Kalenderwochen
                    </label>
                </li>
                <li>
                    <input id="PLastYear" name="model.Zeitraum" type="radio" value="lastYear" />
                    <label for="PLastYear" class="Period" id="LLastYear">
                        Letzte Kalenderjahr
                    </label>
                </li>
</ul>
</ul>
</div>
<div>        <input type="submit" value="Submit"/>
    </div>
</div>
</form>
            <div class="clear">
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="nav-footer">
        </div>
    </div>
</body>

13/08/2009, 13h32
Macmillenium

Bonjour,

Citation:

Envoyé par mourbare

J'ai un probleme avec les css. En fait pour ma page j'utilise le margin-left:-100%; mais je viens de remarquer que le Box en question disparaissait.

:mouarf: :mouarf: c'est normal.
Et pourquoi -100% :aie:
13/08/2009, 13h53
mourbare

que faut il changer la? quand je l'enleve alors il n'est plus positionne a gauche (Internet Explorer) mais quand c'est firefox coe IE le presente bien pour ma resolution 1280*1024 pixel mais pour une plus grande elle disparait. que me proposez vous? Je vous remercie deja pour la reponse

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
.content-left {
	padding:20px 10px;
	float:left;
	width:180px;
	margin-top:-1px;
	/* position:relative; */
	/* margin-left:-100%; */
	/* right:200px; */
	/* _left:200px; */
	border-top:1px dotted #797979;
	}

float:left place l'élément à gauche, après tout dépend de ce que tu veux faire :)

Et Voila que la Navigation est au bon milieu du content-main, je poste le reste du css peut etre que cela aidera d#avantage. Je ne suis pas pro en 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
 
.content-container {
	position:relative;
	_height:1px;
	min-height:1px;
	background:url(images/bg-column-left.png) repeat-y;
	}
 
.content-container-inner {
	background:url(images/bg-column-right.png) repeat-y right;
	_height:1px;
	min-height:1px;
	padding:0 200px;
	position:relative;
	}
 
.content-main {
	padding:15px 2% 20px 2%;
	position:relative;
	min-height:1px;
	_height:1px;
	float:left;
	width:96%;
	}
 
.content-left {
	padding:20px 10px;
	float:left;
	width:180px;
	margin-top:-1px;
	/*position:relative;
	margin-left:-100%;
	right:200px;
	_left:200px;*/
	border-top:1px dotted #797979;
	}

13/08/2009, 14h41
Macmillenium

Ton code n'est pas bon.
Utilise les commentaires conditionnels au lieu du vieux hack "_" pour IE6.

Ton problème vient du float:left; sur .content-main qui a impacté le flottant .content-left.
Contrairement à FF, les padding latéraux attribué au conteneur .content-container-inner sont ignorés sous IE, .content-left s'est donc placé à coté de .content-main.
13/08/2009, 14h57
mourbare

Citation:

Envoyé par Macmillenium

Ton code n'est pas bon.
Utilise les commentaires conditionnels au lieu du vieux hack "_" pour IE6.

Ton problème vient du float:left; sur .content-main qui a impacté le flottant .content-left.
Contrairement à FF, les padding latéraux attribué au conteneur .content-container-inner sont ignorés sous IE, .content-left s'est donc placé à coté de .content-main.

Merci pour le conseil, je vais utilise les commentaires conditionnels.
Mais pour mon probleme, je ne comprends pas la suggestion,peut etre en modifiant mon code, je vous en serais reconnaissant.;)

Merci, Danke
13/08/2009, 15h02
Macmillenium

Citation:

Envoyé par mourbare

Mais pour mon probleme, je ne comprends pas la suggestion,peut etre en modifiant mon code, je vous en serais reconnaissant.;)

Citation:

Envoyé par Macmillenium

Ton problème vient du float:left; sur .content-main qui a impacté le flottant .content-left.

=> Il faut retirer le float en question.
13/08/2009, 15h09
mourbare

Citation:

Envoyé par Macmillenium

=> Il faut retirer le float en question.

j'aurais du mentionner que je l'ai retirer mais tout de meme j'obtient tout autre chose:

IE: content-main et content-left sont superposes maintenant.
FF: content-left suit content-main.

pour aller plus loin:
http://www.asp.net/mvc/gallery/defau...upportsjs=true
l'exemple orange avec asp.net mvc que je suis entrain de tester.

Merci pour la patience et les reponses

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
 
.content-container {
	/* position:relative;
	_height:1px;
	min-height:1px; */
	background:url(images/bg-column-left.png) repeat-y;
	}
 
.content-container-inner {
	background:url(images/bg-column-right.png) repeat-y right;
	/* _height:1px;
	min-height:1px; */
	padding:0 200px;
	/* position:relative; */
	}
 
.content-main {
	padding:15px 2% 20px 2%;
	/* position:relative;
	min-height:1px;
	_height:1px;
	float:left; */
	width:96%;
	}
 
.content-left {
	padding:20px 10px;
	float:left;
	width:180px;
	margin-top:-1px;
	/*position:relative;
	margin-left:-100%;
	right:200px;
	_left:200px;*/
	border-top:1px dotted #797979;
	}

Je n'ai pas de problème avec ton code.

13/08/2009, 15h42
mourbare

sans toutefois vouloir vous accabler. le Main (content-main) est au decu et la Navigation qui doit etre a gauche est tout en bas (bien que a gauche).

je m'excuse du derangement
13/08/2009, 16h03
Macmillenium

Citation:

Envoyé par mourbare

sans toutefois vouloir vous accabler. le Main (content-main) est au decu et la Navigation qui doit etre a gauche est tout en bas (bien que a gauche).

Tu veux mettre la navigation à gauche et le main à droite :aie: ?
13/08/2009, 16h36
mourbare

Citation:

Envoyé par Macmillenium

Tu veux mettre la navigation à gauche et le main à droite :aie: ?

Exact c'est ce que je cherche a faire.
Merci

Il faut retirer le width:96% sur main, lui attribuer un overflow:hidden et le placer après la barre de nav dans le HTML.

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
 
.content-container {
	/* position:relative;
	_height:1px;
	min-height:1px; */
	background:url(images/bg-column-left.png) repeat-y;
	}
 
.content-container-inner {
	background:url(images/bg-column-right.png) repeat-y right;
	/* _height:1px;
	min-height:1px; */
	padding:0 200px;
	/* position:relative; */
	}
 
.content-main {
	padding:15px 2% 20px 2%;
	/* position:relative;
	min-height:1px;
	_height:1px;
	float:left; 
	width:96%; */
	overflow:hidden;
	}
 
.content-left {
	padding:20px 10px;
	float:left;
	width:180px;
	margin-top:-1px;
	/*position:relative;
	margin-left:-100%;
	right:200px;
	_left:200px;*/
	border-top:1px dotted #797979;
	}

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
 
<body>
    <div class="content-container">
        <div class="content-container-inner">
 
            <!-- Render Navigation Page -->
<form action="/UltraChart/UltraChart" method="post">
 
<div class="content-left">
    <div class="side-bucket">
        <ul>
            <li class="first"><a href="#">Zeitraum:</a></li>
            <ul>
                <li>
                    <input checked="checked" id="PLastWeek" name="model.Zeitraum" type="radio" value="lastWeek" />
                    <label for="PLastWeek" class="Period" id="LLastWeek">
                        Letzte Kalenderwoche
                    </label>
                </li>
                <li>
                    <input id="PLastMonth" name="model.Zeitraum" type="radio" value="lastMonth" />
                    <label for="PLastMonth" class="Period" id="LLastMonth">
                        Letzter Kalendermonat
                    </label>
                </li>
                <li>
                    <input id="PLastThreeMonth" name="model.Zeitraum" type="radio" value="lastThreeWeek" />
                    <label for="PLastThreeMonth" class="Period" id="LLastThreeMonth">
                        Letzte 3 Kalenderwochen
                    </label>
                </li>
                <li>
                    <input id="PLastYear" name="model.Zeitraum" type="radio" value="lastYear" />
                    <label for="PLastYear" class="Period" id="LLastYear">
                        Letzte Kalenderjahr
                    </label>
                </li>
</ul>
</ul>
</div>
<div>        <input type="submit" value="Submit"/>
    </div>
</div>
 
            <div class="content-main">
                <a name="maincontent" id="maincontent"></a>
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div>
</form>
            <div class="clear">
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="nav-footer">
        </div>
    </div>
</body>

Sans oublier le zoom:1 (pour avoir le même résultat) sur main dans une CSS IE6 appelée entre commentaires conditionnels.

14/08/2009, 09h19
mourbare

Impeccable et super ca fonctionne :ccool: meme si sous IE La navigation est a quelques pixels plus en bas mais avec deux css Fichier je pourrais pour IE configurer le Top. Merci une fois de plus