Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 14, средняя оценка - 4.64
nonamez123
186 / 182 / 54
Регистрация: 23.10.2010
Сообщений: 1,329
#1

Зафиксировать кнопку в заданном положении - HTML, CSS

16.11.2012, 16:13. Просмотров 2554. Ответов 6
Метки нет (Все метки)

В общем-то набросал простенькую форму поиска
Зафиксировать кнопку в заданном положении

По клику с низу появляется див
Зафиксировать кнопку в заданном положении

Проблема в том, что вторая кнопка смещается влеза, якобы за нижний див (позишен абсолют не помогает).
Зафиксировать кнопку в заданном положении

На деле оно должно выглядеть вот так

Сам код на http://jsfiddle.net/nonamez/PDjmB/2/ (за исключением стилей кнопок)
Кликните здесь для просмотра всего текста
HTML5
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
<div class="search">
    <div class="simple-search">
        <input type="text" value="Search input" id="search-field" size="15"> <button id="simple-search-button" class="button">Search button</button>
    </div>
    <div style="margin:0 10px;width:1px;height:30px;background-color:#DDDDDD;float:left;"></div>
    <div class="advanced-search">
        <button id="advanced-search-button" class="button">Advanced Search</button>
        <div class="advanced-search-values" style="padding: 5px 4px 6px">
            Search[First]:
            <span id="advanced_search_by_branch" class="fake-link">By Name</span> |
            <span id="advanced_search_by_address" class="fake-link">By Address</span> |
            <span id="advanced_search_by_tel" class="fake-link">By Telephone Number</span>
        </div>
    </div>
    <div style="margin:0 10px;width:1px;height:30px;background-color:#DDDDDD;float:left;"></div>
    <div class="advanced-search">
        <button class="button">Load From Template</button>
        <div class="advanced-search-values" style="padding: 5px 4px 6px">
            Search[Second]:
            <span id="advanced_search_by_branch" class="fake-link">By Name</span> |
            <span id="advanced_search_by_address" class="fake-link">By Address</span> |
            <span id="advanced_search_by_tel" class="fake-link">By Telephone Number</span>
        </div>
    </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.simple-search{
    float: left;
}
 
.advanced-search{
    float: left;
    /*margin-left: 5px;*/
}
 
div.advanced-search-values{
    display: none;
    border: 1px solid #DDDDDD;
    margin-top: 5px;
    padding: 2px;
}
 
span.advanced-search-selected-val{
    text-decoration: underline;
    font-weight: bold;
}
Javascript
1
2
3
4
5
6
jQuery(document).ready(function(){
    jQuery('button').click(function(){
        jQuery('.advanced-search-values').hide();
        jQuery(this).next('div').toggle();
    });
});
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.11.2012, 16:13
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Зафиксировать кнопку в заданном положении (HTML, CSS):

картинки по центру в опр. положении
Здравствуйте , как заставить картинки встать именно так ? В флексах не шарю ,...

Зафиксировать расположение
Помогите, коли сможете. Вопрос по CSS. #fac{ position: absolute; top: 5px;...

Зафиксировать блок
Здравствуйте, на сайте имеется номер телефона и адрес с одинаковыми стилями, но...

Зафиксировать меню
Ребят доброго дня. Меню выпадает при наведении мыши. При переходе по...

Как зафиксировать ширину?
Есть сайт http://510294.psiurok.web.hosting-test.net/features.html На...

Зафиксировать положение блока
&lt;div id=&quot;content&quot;&gt; &lt;div style=&quot;float: left; width: 400px;&quot;&gt; text &lt;/div&gt; ...

6
nonamez123
186 / 182 / 54
Регистрация: 23.10.2010
Сообщений: 1,329
16.11.2012, 16:22  [ТС] #2
да, дальше идут таблицы, по этому статик и фиксед не подходят
0
StopSmell
290 / 167 / 28
Регистрация: 16.09.2012
Сообщений: 369
16.11.2012, 16:25 #3
CSS
1
2
.advanced-search {position: relative;}
.advanced-search-values {position: absolute;}
поставить ширину advanced-search-values и все
0
nonamez123
186 / 182 / 54
Регистрация: 23.10.2010
Сообщений: 1,329
16.11.2012, 16:28  [ТС] #4
Цитата Сообщение от StopSmell Посмотреть сообщение
CSS
1
2
.advanced-search {position: relative;}
.advanced-search-values {position: absolute;}
поставить ширину advanced-search-values и все
Я же говорю - заезжает на основной стиль
0
Изображения
 
StopSmell
290 / 167 / 28
Регистрация: 16.09.2012
Сообщений: 369
16.11.2012, 16:33 #5
Цитата Сообщение от nonamez123 Посмотреть сообщение
Я же говорю - заезжает на основной стиль
Значит сделать так чтобы при клике добавлялся отступ от кнопок вниз для спозиционированных элеметнов. Других вариантов не знаю.
0
nonamez123
186 / 182 / 54
Регистрация: 23.10.2010
Сообщений: 1,329
16.11.2012, 16:36  [ТС] #6
Цитата Сообщение от StopSmell Посмотреть сообщение
Значит сделать так чтобы при клике добавлялся отступ от кнопок вниз для спозиционированных элеметнов. Других вариантов не знаю.
Тогда зачем отвечать? Вопрос то Зафиксировать кнопку в заданном положении
0
StopSmell
290 / 167 / 28
Регистрация: 16.09.2012
Сообщений: 369
16.11.2012, 16:38 #7
Все молчу
0
16.11.2012, 16:38
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
16.11.2012, 16:38
Привет! Вот еще темы с решениями:

Как зафиксировать fixed
Как сделать чтобы зафиксированный элемент был в одном положении при любом...

Зафиксировать шапку сайта
Сделал фиксацию шапки, а она ушли ниже футура что не так ?...

Зафиксировать положение списка
Всем привет! Подскажите, пожалуйста: Есть блок фиксированной высоты. В нем...

Как зафиксировать сайт?
Добрый день форумчане! Верстаю сайт и хочу чтоб его главная страничка при...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru