Problème avec un margin auto
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:
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:
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