Problème avec un margin auto [Résolu]

[jbrasselet]

Bonjour,

j'ai un div qui doit être centré dans le navigateur. Je lui ai donc appliqué la balise margin;auto. Jusqu'ici pas de problème. il s'agit du div header.

Code html :

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
<div id="Header">
         <table id="HeaderTable">
         <col width="60px"/>
         <col width="200px"/>
         <col width="320px" />
         <col width="150px" />
         <col width="*px" />
         <col width="50px" />
         <tr>
            <td rowspan="2"><img id="Logo" src="/imgcarto/logoorange.gif" /></td>
            <td rowspan="2">
               <span class="Title">Home</span>
               <br />
               <span class="Title" id="TitleCarto">Cart</span><span class="Title" id="TitleCartoRed">O</span>
            </td>
            <td><input name="ctl00$HeaderSearchTextBox" type="text" id="HeaderSearchTextBox" style="border-color:#FF6600;border-width:1px;border-style:Solid;width:300px;" /></td>
            <td rowspan="2"><img id="Image1" src="/imgcarto/icons/loupe.png" /></td>
            <td>Help</td>
 
         </tr>
         <tr>
            <td class="TdComboBox">
               <div id="HeaderSearchComboBox" class="ComboBox">
	<table id="HeaderSearchComboBox_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" style="border-width:0px;border-style:None;border-collapse:collapse;">
		<tr>
			<td class="ajax__combobox_textboxcontainer"><input name="ctl00$HeaderSearchComboBox$TextBox" type="text" id="HeaderSearchComboBox_TextBox" autocomplete="off" style="border-color:#FF6600;border-width:1px;border-style:Solid;" /></td><td class="ajax__combobox_buttoncontainer"><button id="HeaderSearchComboBox_Button" type="button" style="visibility:hidden;"></button></td>
		</tr>
	</table><ul id="HeaderSearchComboBox_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
		<li>IT Objects</li><li>Function</li><li>Data</li><li>Process</li>
	</ul><input type="hidden" name="ctl00$HeaderSearchComboBox$HiddenField" id="HeaderSearchComboBox_HiddenField" value="0" />
</div>
            </td>
            <td>Contact</td>
            <td>update</td>
         </tr>
         </table>
      </div>

Lorsque je clique sur mon input HeaderSearchComboBox_TextBox l'ul HeaderSearchComboBox_OptionList apparait. Seulement, il se placeb au milieu de l'écran.

Sans le margin:auto, mon ul est bien aligné à mon input.
Comment puis-je annuler pour cet ul le margin:auto ?

Voici mon css également :

Code css :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
/**********************************************************************************************
MAIN LAYOUT
**********************************************************************************************/
html 
{
   overflow : hidden;
}
 
body
{
   background-color: #fff;
   font-size: 11px;
   font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
   margin : 0;
   padding: 0;
   color: #696969;
   overflow : hidden;
}
 
#Page
{
   width: 100%;
   margin-bottom : 0;
}
 
#Header
{
   position: relative;
   margin-bottom: 0px;
   color: #000;
   padding: 0px;
   height : 65px;
   width : 989px;
   margin : auto;
}
 
#Scroll 
{
   width : 100%;
   overflow-y : scroll;
}
 
#Main
{
   border:solid 1px #f60;
   background: #fff;
   width : 989px;
   margin : auto;
   height : 550px;
}
 
#Data
{
   background: #fff;
   padding: 0px 5px 10px 5px;
}
 
#Footer
{
   width : 90%;
   color: #999;
   line-height: normal;
   margin: auto;
   font-size: .9em;
   width : 989px;
   padding : 0;
}
 
/**********************************************************************************************
HEADER LAYOUT
**********************************************************************************************/
#HeaderTable 
{
   width : 100%;
   height : 65px;
   vertical-align : middle;
   border : #FFF none 0px;
   padding : 0px;
   margin : 0px;
}
 
#HeaderTable tr
{
   height : 50%;
}
 
#HeaderTable td
{
   border : #000 none 1px;
   padding : 0px;
   margin : 0px;
}
 
#Logo 
{
   padding-left : 12px;
}
 
.Title 
{
   cursor : pointer;
}
 
#TitleCarto
{
   font-size : 26px;
   font-weight : bold;
}
 
#TitleCartoRed
{
   font-size : 26px;
   font-weight : bold;
   color : #F60;
}
 
.TdComboBox 
{
   vertical-align : middle;
}
 
/**********************************************************************************************
CONTROLS APPEARENCE
**********************************************************************************************/
.TextBox 
{
   border : 1px solid #F60;
   background-color : #FFF;
}
 
.ComboBox 
{
   margin : 0;
}
.ComboBox table td
{
   padding : 0px;
   margin : 0px;
   border : 0px;
}
 
.ComboBox .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer INPUT{
   BORDER-BOTTOM: #ff6600 1px solid; 
   BORDER-LEFT: #ff6600 1px solid; 
   BORDER-TOP: #ff6600 1px solid; 
   BORDER-RIGHT: none;
}
 
.ComboBox .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer BUTTON 
{
   background-image : url(http://localhost/imgftcarto_proto/arrows.gif);
   background-position : left top;
   BORDER-BOTTOM: #ff6600 1px solid; 
   BORDER-LEFT:none; 
   BORDER-TOP: #ff6600 1px solid; 
   BORDER-RIGHT: #ff6600 1px solid;
   display : block;
}
 
.ComboBox .ajax__combobox_itemlist {
   BORDER: 1px solid #ff6600;
   padding-left : 2px;
   padding-right : 2px;
   background-color : Red;
}

Merci d'avance de votre aide

[jbrasselet]

Bon j'ai quasi résolu mon problème, comme quoi une nuit de sommeil ça fait du bien. Dans ma classe Header j'avais mis position : relative. Sans cet attribut ma liste déroulante est correcte.

Il me reste juste à résoudre un petit détail afin d'aligner mon header et mon main. En effet mon main est au milieu de (ma page - largeur du scroll) alors que mon header est au milieu de ma page.

Si quelqu'un a une idée ?

[12monkeys]

Bonjour

Avec ton code on ne sais pas si header et main sont des éléments de même niveau et placés l'un sous l'autre ou si header est placé dans main (ou inversement d'ailleurs...)

Dans le 1er cas, pourquoi ne pas les englober par un élément parent et n'appliquer le centrage qu'à lui ?
Dans le second cas pourquoi centrer et main et header ?

Bref peux tu préciser ce point et encore mieux nous montrer une page en ligne ?

[jbrasselet]

Ah oui en effet tout le code n'y était pas.
Du coup, pour répondre à ta question, j'ai mon div header, puis un div scroll (permettant d'avoir une scrollbar ne prenant pas en compte le header) puis dans ce div scroll, mon div main.
Mais j'ai résolu le problème en ajustant légèrement la taille de mon header et son contenu.

PS : réfléchir beaucoup plus avant de poster