Выберите вариант, который не отображается должным образом

Я пытаюсь создать веб-страницу HTML, в верхней части которой находятся некоторые параметры меню, а после этого в окне я хочу отобразить некоторые элементы списка. Я использовал следующий код для достижения той же:Выберите вариант, который не отображается должным образом

<body> 
<div id="admin"> 
<div id="header"> 
<span id="show_all" onclick="showAll();" class="nolite">All</span> 
<span id="show_words" onclick="showWords();" class="nolite">Blocked Words</span> 
<span id="show_ip" onclick="showIP();" class="nolite">Blocked IP</span> 
<span id="show_url" onclick="showURL();" class="nolite">Blocked URL</span> 
<span id="show_filtered" onclick="showFiltered();" class="nolite">Authorized System</span> 
</div> 
</div> 
<div> 
<table width="auto" border="1" cellspacing="0" cellpadding="0" > 
<td nowrap> 
<select name="selectFilter" id="selectFilter" size="23"> 
<option>test1</option> 
<option>test2</option> 
<option>test3</option> 
</select> 
</td> 
</table> 
</div> 
</body>

через вызов AJAX Я обновляю selectFilter значение опции успешно. Но проблема в том, что поле выбора находится слева от параметров меню и не сильно расширяется, чтобы закрыть окно браузера. Я добавил, как выглядит страница результатов: Resulet Page

Как мне выбрать параметр выбора под моим пунктом меню и накрыть окно браузера полями слева, сверху (после верхнего меню), влево и вправо?

Ниже CSS, который я использую:

#icon { 
    position: absolute; 
    left: 50px; 
    top: 50px; 
} 

#content { 
    position: absolute; 
    left: 230px; 
    top: 70px; 
    width: 400px; 
} 

#ok_btn { 
    position: absolute; 
    left: 20px; 
    cursor: pointer; 
} 

#cancel_btn { 
    position: absolute; 
    left: 150px; 
    cursor: pointer; 
} 

#header { 
    position: absolute; 
    left: 50px; 
    top: 20px; 
} 

#show_all, #show_words, #show_ip, #show_url, #show_filtered { 
    cursor: pointer; 
} 

.button { 
    cursor: pointer; 
} 

.hilite { 
    background: #f88017; 
    color: #ffffff; 
    padding: 5px; 
} 

.nolite { 
    background: #ffffff; 
    color: #000000; 
    padding: 5px; 
} 

.denied { 
    text-decoration: line-through; 
} 

#table { 
    position: absolute; 
    left: 50px; 
    top: 60px; 
    right: 50px; 
    bottom: 10px; 
    overflow: auto; 
    border: 1px solid black; 
} 

.row { 
    padding: 2px; 
}

источник

2013-12-02 Prakash

выглядит как вопрос стиля, Вы должны размещать свои таблицы стилей, а также – shyam

я добавил свою таблицу стилей в вопросе – Prakash

Я не уверен, что ваши таблицы стилей, но добавив это сделает покрытие браузер с полями.

table { width:96%;margin:1% ;} 
select {width:100%}

источник

2013-12-02 08:39:39 Neha

я добавил свою таблицу стилей в этом вопросе. Я попытался использовать ваши комментарии в моей таблице стилей, но все тот же вопрос – Prakash

Спасибо за подсказку - с манипуляцией с моим CSS я смог достичь цели – Prakash

Выберите вариант, который не отображается должным образом

ответ

Смежные вопросы