margin-left et la resolution

**mourbare** · 13/08/2009, 13h11

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 :

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

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 :

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
 
<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>

**Macmillenium** · 13/08/2009, 13h32

Bonjour,

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.

c'est normal.
Et pourquoi -100%

**mourbare** · 13/08/2009, 13h53

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

**Macmillenium** · 13/08/2009, 14h01

Code css :

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

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

**mourbare** · 13/08/2009, 14h15

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 :

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
 
.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;
	}

**Macmillenium** · 13/08/2009, 14h41

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.

margin-left et la resolution

CSS

Vue hybride

Discussions similaires

Partager

Partager