Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 14, средняя оценка - 4.64
nonamez123
185 / 181 / 12
Регистрация: 23.10.2010
Сообщений: 1,306
#1

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

16.11.2012, 16:13. Просмотров 2193. Ответов 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):

Зафиксировать меню - HTML, CSS
Ребят доброго дня. Меню выпадает при наведении мыши. При переходе по ссылке меню исчезает. Как сделать чтобы оно не исчезало...

Зафиксировать расположение - HTML, CSS
Помогите, коли сможете. Вопрос по CSS. #fac{ position: absolute; top: 5px; left: 1100px; } &lt;div id='fac'&gt;&lt;img...

Как зафиксировать страницу - HTML, CSS
Дело в том, что я собрала такой вот сайтик и он получился не на всю страницу. Мне нужно сделать так,чтобы курсор прокручивался при...

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

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

Зафиксировать шапку сайта - HTML, CSS
Сделал фиксацию шапки, а она ушли ниже футура что не так ? http://stavni.url.ph/ Сейчас я снял фиксацию .

6
nonamez123
185 / 181 / 12
Регистрация: 23.10.2010
Сообщений: 1,306
16.11.2012, 16:22  [ТС] #2
да, дальше идут таблицы, по этому статик и фиксед не подходят
0
StopSmell
289 / 166 / 16
Регистрация: 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
185 / 181 / 12
Регистрация: 23.10.2010
Сообщений: 1,306
16.11.2012, 16:28  [ТС] #4
Цитата Сообщение от StopSmell Посмотреть сообщение
CSS
1
2
.advanced-search {position: relative;}
.advanced-search-values {position: absolute;}
поставить ширину advanced-search-values и все
Я же говорю - заезжает на основной стиль
0
Изображения
 
StopSmell
289 / 166 / 16
Регистрация: 16.09.2012
Сообщений: 369
16.11.2012, 16:33 #5
Цитата Сообщение от nonamez123 Посмотреть сообщение
Я же говорю - заезжает на основной стиль
Значит сделать так чтобы при клике добавлялся отступ от кнопок вниз для спозиционированных элеметнов. Других вариантов не знаю.
0
nonamez123
185 / 181 / 12
Регистрация: 23.10.2010
Сообщений: 1,306
16.11.2012, 16:36  [ТС] #6
Цитата Сообщение от StopSmell Посмотреть сообщение
Значит сделать так чтобы при клике добавлялся отступ от кнопок вниз для спозиционированных элеметнов. Других вариантов не знаю.
Тогда зачем отвечать? Вопрос то Зафиксировать кнопку в заданном положении
0
StopSmell
289 / 166 / 16
Регистрация: 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
Привет! Вот еще темы с ответами:

Зафиксировать размеры ячеек - HTML, CSS
&lt;table width=&quot;100%&quot;&gt; &lt;tr&gt; &lt;td width=&quot;20%&quot; height=&quot;30%&quot;&gt; ...

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

Как зафиксировать div - HTML, CSS
Добрый день! Как зафиксировать на месте&lt;div&gt;? При отдалении страницы, блок двигается в левую часть. Какой стиль задать? &lt;div...

Зафиксировать фоновое изображение - HTML, CSS
Доброй ночи. Есть фон, и нужно сделать так, чтобы при изменении размера экрана он всегда оставался в одном положении, так как узоры...


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

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

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