Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
flyp
Заблокирован
#1

При сворачивании сайтав окно строка поиска перемещается на строку выше

14.11.2015, 15:18. Просмотров 1357. Ответов 40
Метки нет (Все метки)

При сворачивании сайта в окно строка поиска перемещается на строку выше как это исправить вот код
HTML5
1
2
3
 <div class="head-contact  <p><strong>Наш кошелек: </strong><br>
  <span>текст  тест</span>
  <p><strong>Администрация сайта не несет ответсвенности за публикуемые материалы <br>По всем вопросам обращайтесь к авторам статей.</strong><br><a href ="http://">Правила сайта </a></p>  </div>
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
.head-contact
         {
            float:right; /*выравниваем .head-contact по правому краю*/
            background:#F8FAFB  url(images/phone-img1.jpg)575px 8px no-repeat;/*задаем фоновый цвет, добавляем картинку, с отступом 575px,   сверху 8 px */
            border:2px solid #EDF2F6; /*задаем рамку в 2px, solid сплошная, затем заадем цвет рамки*/
            border-radius:0 0 10px 10px; /*закругление рамки, 1 значение  сверху слева(0), 2 значение  сверху справа(0), 3 значение снизу справа(10px), 4  значение снизу слева(10px)*/
            text-align:right;/*выравниваем текст в рамке по правому краю*/
            margin:0 6px 0 0;/*задаем отступ рамки справа 6px*/
            padding:5px 65px 5px 15px; /*задаем внутренние отступы 5px это сверху отступ 10px справа*/
          }
               .head-contact p{
                          font-size:12px; font-family:verdana,geneva,sans-serif;line-height:1,3; margin:0 0 10px 0;/*задаем шрифт для тегов, line-height межстрочный интервал <p> margin:0 0 10px 0 отступ снизу 10px*/
                }
                    .head-contact p strong { /*задаем стили для strong в head-contact p */
                                   font-size: 14px; /*задаем размер шрифта*/
                                   font-weight:normal;/*убираем жирность  шрифта*/  
                     }
                    .head-contact p span {
                                   font-size:21px; font-weight:bold;/* bold полужирный шрифт*/
                     }
            .search-head {/*стили для поисковой строки*/
                float:right; /*выравниваем .search-head по правому краю*/
                list-style:none;/*убираем маркеры*/
                background:url(images/bg-search.jpg) no-repeat; left top; width:307px;height:29px;margin:5px 6px 0;/*назначаем картинку  для поисковой  строки и для кнопки поиска, width и height  выставляем по размеру картинки no-repeat не повторять*/
             }
                     #quickquery{/*делаем форму поиска невидимой, для этого для id назначаем стили id пишется через #*/
                                  border:none; /*убираем рамку*/
                                  margin:6px 30px 3px 10px;
                                  width: 210px;/*ширина*/
                                  font-size:12px;
                     }
                    .search-head  li { /*задаем стили для <li> в search-head */
                                  float:left;/*выравниваем в одну строку*/
                     }
                    .search-btn {/*стили для кнопки поиска*/
                                  margin:8px 0 0 0;/*отступы для кнопки поиска*/
                     }
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.11.2015, 15:18
Ответы с готовыми решениями:

Фиксированная строка поиска при прокрутке
Наткнулся я на довольно любопытный каталог. У него при прокрутке остается...

Пропадает StatusBar при сворачивании в окно
Пропадает панель состояния когда выполняется &quot;Сворачивание в окно&quot; Если форму...

При сворачивании страницы в окно обрезается фоновая картинка
Здравствуйте! Никак не могу справиться с проблемой. При сворачивании страницы в...

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

Listview дублирует предыдущую строку при сворачивании формы
После того, как заполняется строка в Listview, при сворачивании формы или...

40
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
14.11.2015, 15:33 #2
Цитата Сообщение от flyp Посмотреть сообщение
При сворачивании сайта в окно строка поиска перемещается на строку выше как это исправить вот код
Где в этом коде та самая "строка поиска" и что такое "сворачивание сайта в окно".
0
flyp
Заблокирован
14.11.2015, 15:36  [ТС] #3
в браузере обычное сворачивание
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
search-head {/*стили для поисковой строки*/
                float:right; /*выравниваем .search-head по правому краю*/
                list-style:none;/*убираем маркеры*/
                background:url(images/bg-search.jpg) no-repeat; left top; width:307px;height:29px;margin:5px 6px 0;/*назначаем картинку  для поисковой  строки и для кнопки поиска, width и height  выставляем по размеру картинки no-repeat не повторять*/
             }
                     #quickquery{/*делаем форму поиска невидимой, для этого для id назначаем стили id пишется через #*/
                                  border:none; /*убираем рамку*/
                                  margin:6px 30px 3px 10px;
                                  width: 210px;/*ширина*/
                                  font-size:12px;
                     }
                    .search-head  li { /*задаем стили для <li> в search-head */
                                  float:left;/*выравниваем в одну строку*/
                     }
                    .search-btn {/*стили для кнопки поиска*/
                                  margin:8px 0 0 0;/*отступы для кнопки поиска*/
                     }
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
 <form method ="get" action=""><!--форма поиска form  создание формы,action страница обработки формы-->
  <ul class="search-head"> <!--создаем списки для вывода блоков с текстовым полем и кнопкой поиск-->
   <li> <input type="text" name="search" id="quickquery" placeholder="Что будем искать?" />
<script type="text/javascript">
//<![CDATA[
placeholderSetup('quickquery');
//]]>
</script></li><!--input type="text" name="search" создание текстового поля для поиска, placeholder вывод слова для подсказки в строке поиска-->
   <li> <input type ="image" class="search-btn" src="images/searc-btn.jpg" name ="search"/><!--выводим кнопку поиска в виде картинки, class="search-btn" класс для управления кнопкой поиска-->
   </li>
   </ul>
   
  </form>
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
14.11.2015, 15:49 #4
Цитата Сообщение от flyp Посмотреть сообщение
в браузере обычное сворачивание
Это ресайз окна, так как input и второй элемент не помещаются в одну строку вот и переносится. Задайте контейнеру фиксированную ширину, тогда переносится не будет, а появится полоса прокрутки
0
flyp
Заблокирован
14.11.2015, 16:12  [ТС] #5
без прокрутки полосы можно как то обойтись?
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
14.11.2015, 16:16 #6
Цитата Сообщение от flyp Посмотреть сообщение
без прокрутки полосы можно как то обойтись?
overflow:hidden у контейнера
0
flyp
Заблокирован
14.11.2015, 22:50  [ТС] #7
.header{/*стили для шапки сайта*/
overflow:hidden; }
это указанно и работает если информации меньше написано, вот в чем проблема

Добавлено через 8 минут
Телефон:
8 (800) 700-00-01

Режим работы:
Будние дни: с 9:00 до 18:00
Суббота, Воскресенье - выходные

Этот текст легко обрезается и все корректно показывается. Мой длинный текст никак не хочет корректно обрезаться, вернее он не обрезается вовсе. Надеюсь что вы подскажете какие то решения
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
14.11.2015, 23:11 #8
flyp, вы пишите какой-то несуразный бред. Если я хоть что-то из этого понял, то вы хотите добиться такого эффекта
HTML5
1
2
3
4
<ul>
    <li><input type="text"></li>
    <li><input type="text"></li>
</ul>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
html, body{
    overflow-x:hidden;
}
ul{
    width:300px;
    list-style:none;
}
li{
    float:left;
    margin-right:10px;
}
li input{
    width:130px;
}
http://jsfiddle.net/shakalaka/ycgrL520/
А из вашего кода непонятно ничего. Комментарии в CSS можно ставить если вы используете какой-то сложный прием(неочевидный) или обозначить начало/конец блока правил относящегося к одному блоку разметки. Но комментировать каждую строку - это бред который никому не нужен и только делает код нечитабельным.
0
flyp
Заблокирован
16.11.2015, 20:39  [ТС] #9
мне нужно чтобы форма поиска не смещалась на строку выше без скрола

Добавлено через 5 минут
overflow-x:hidden добавил все равно съезжает
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
.header{
        overflow:hidden;
         .logo, slogan {
            float:left;
         }
         .logo{
            margin:8px 0 0 30px;
         }
         .slogan{
            margin:40px 0 0 30px;
         }
 
         .head-contact
         {
             
            float:right; 
            background:#F8FAFB  url(images/phone-img1.jpg)575px 8px no-repeat;
            border:2px solid #EDF2F6;
            border-radius:0 0 10px 10px; 
            text-align:right;
            margin:0 6px 0 0;
            padding:5px 65px 5px 15px; 
               .head-contact p{
                          font-size:12px; font-family:verdana,geneva,sans-serif;line-height:1,3; margin:0 0 10px 0;
                }
                    .head-contact p strong { 
                                   font-size: 14px; 
                                   font-weight:normal;  
                     }
                    .head-contact p span {
                                   font-size:21px; font-weight:bold;
                     }
            .search-head 
                float:right; 
                list-style:none;
                background:url(images/bg-search.jpg) no-repeat; left top; width:307px;height:29px;margin:5px 6px 0;
             }
                     #quickquery{
                                  border:none; 
                                  margin:6px 30px 3px 10px;
                                  width: 210px;
                                  font-size:12px;
                     }
                    .search-head  li {
                                  float:left;
                                  
                     }
                    .search-btn {
                                  margin:8px 0 0 0;
                     }
Добавлено через 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
<div class ="header"> 
  
  <a href ="/"><img class ="logo" src="images/logo.jpg" alt="" /></a>
  <img class="slogan" src="images/slogan.jpg" alt="" />
  <div class="head-contact">
  <p><strong>Наш кошелек: </strong><br>
  <span>текст  тест</span>
  </p>
  <p><strong>Администрация сайта не несет ответсвенности за публикуемые материалы <br>По всем вопросам обращайтесь к авторам статей.</strong><br><a href ="http://">Правила сайта </a></p>
  </div>
  <form method ="get" action="">
  <ul class="search-head"> 
   <li> <input type="text" name="search" id="quickquery" placeholder="Что будем искать?" />
<script type="text/javascript">
//<![CDATA[
placeholderSetup('quickquery');
//]]>
</script></li>
   <li> <input type ="image" class="search-btn" src="images/searc-btn.jpg" name ="search"/>
   </li>
   </ul>
   
  </form>
   </div>
Добавлено через 2 минуты
у меня блок с объявлением вниз проваливается тем самым вытесняя форму поиска

Добавлено через 18 часов 33 минуты
сейчас добавлю }
li input{
width:130px;
}

Добавлено через 2 минуты
не помогает кнопка найти увеличивается только и всего

Добавлено через 1 минуту
жду надеюсь еще какие ни будь идеи есть?



Добавлено через 59 минут
Толку с вас ноль помошнички так до конца не помогли походу вы только из макетов сайты лепите

Добавлено через 3 минуты
CSS
1
float:right; list-style:none; background:url(images/bg-search.jpg) no-repeat left top; width:305px; height:29px; margin:5px 6px 5px 0;
эт о сто лет в субботу прописано

Добавлено через 3 минуты
ты хоть код мой читал ,какой импут у меня формой выводится
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
16.11.2015, 20:53 #10
Цитата Сообщение от flyp Посмотреть сообщение
Толку с вас ноль помошнички так до конца не помогли походу вы только из макетов сайты лепите
Во-первых, вам никто здесь ничем не обязан.
Во-вторых, что это за бред, куча открытых и незакрытых скобок.

А по поводу решения, так я уже написал, и даже пример привел. Если вы не можете понять 2 строки кода, или не можете изложить свои мысли, то это только ваши проблемы
0
flyp
Заблокирован
16.11.2015, 22:53  [ТС] #11
я изложил надо чтобы не скакала форма поиска также обрезалась как обрезается все на этом сайте при сворачивании я сделал как ты написал результат нулевой также скачит строка поиска в последнем случае кнопка найти увеличивается скобки закрыты я комментарии убирал которые тебе не понравились и видимо снес нечаянно
ты мне написал про оверлов у меня он прописан даже если его переношу да html и body не режет и все тут остальное все в коде прописано

Добавлено через 3 минуты
хватит себе цену набивать просто помоги если можешь и все

Добавлено через 5 минут
если текст короткий то без проблем режется

Добавлено через 1 минуту
ты говоришь гением родился я за тебя глубоко рад я не гений поэтому сюда написал

Добавлено через 2 минуты
я думаю все ты понял давно и набиваешь себе цену вот и все

Добавлено через 5 минут
ты же сам видишь что overflow:hidden; прописан где что увеличить чтобы форма поиска не смещалась при сворачивании в окно сайта. Получается .head-contact проваливается вниз тем самым форму поиска вытесняя что тут непонятного
0
Миниатюры
При сворачивании сайтав окно строка поиска перемещается на строку выше  
flyp
Заблокирован
16.11.2015, 22:54  [ТС] #12
вот видишь где форма поиска мне нужно чтобы она оставалась внизу и наместе оставалось объявление те срезалосьпри сворачивании у меня происходит смещение
0
Taatshi
Администратор
11709 / 5052 / 257
Регистрация: 05.04.2011
Сообщений: 13,804
Записей в блоге: 2
17.11.2015, 10:13 #13
flyp, во-первых, прекратите составлять посты из кусочков - пишите все сразу и внятно. Во-вторых, почитайте правила форума, особенно пункт 3,1
0
flyp
Заблокирован
17.11.2015, 20:31  [ТС] #14
del

Добавлено через 5 часов 34 минуты
Просто помогите
0
mrBobrillo
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 272
18.11.2015, 14:51 #15
Лучший ответ Сообщение было отмечено flyp как решение

Решение

flyp Во первых:

Как в firefox так и в chrome есть инструменты разработчика и инспекции кода, по нажатию на клавишу f12 вы сможете вызвать инспектор, настройкой отпозиционировать его справа и просто напросто за ползунок расширять его в лево, тогда ваш сайт будет сживаться справа на лево и не нужно сжимать сам браузер. В firefox есть комманда в инструментах адаптивный дизайн, аналогично не нужно будет сжимать сам браузер.

Во вторых, без просмотра адекватного кода никто не сможет вам помочь, так как то что вы выкладываете на форум, действительно несусветная чушь + кривой код с ошибками сам по себе, приходится его чинить на ходу.

В третьих, используйте клеарфиксы, так как скорее всего ваша проблема заключается в float.
Ведь по логике что то подтягивает вверх данный блок, но ничего кроме float этого сделать не может.
По идее если делать адекватно, то у вас должна быть общая обертка конкретно у каждой секции, этой общей обертке следовало бы прописать clear: both;
Я не уверен что это сработает не имея тестового сервера с вашей проблематичной версткой.
0
flyp
Заблокирован
18.11.2015, 16:17  [ТС] #16
Поподробнее можно у меня общий div main
0
mrBobrillo
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 272
18.11.2015, 16:39 #17
Общий див не сыграет роли, он как оболочка для всех остальных секций.

Каждая ваша секция (heder, menu, container) это как отдельная строка - обертка, если в ней находятся колонки с float проблем не избежать, они начнут подтягивать нижележащие обертки или колонки. Однако если в них поставить дополнительный класс clearfix, который будет иметь clear: both; float: none; то проблема решится сама собой, общая обертка будет как защитная оболочка. Так же можно с помощью псевдо элементом after проделать то же самое.
0
Миниатюры
При сворачивании сайтав окно строка поиска перемещается на строку выше  
flyp
Заблокирован
18.11.2015, 16:47  [ТС] #18
сейчас попытаюсь воспользоваться вашей моделью. спасибо огромное)

Добавлено через 5 минут
CSS
1
2
3
.main{
    clear: both;
}
HTML5
1
2
3
4
 <div class ="main"> <!-- блок который включает в себя все содержимое страницы целиком-->
  <div class ="header"> <!--блок включающий в себя всю полностью шапку-->
   </div>
</div>]
Добавлено через 28 секунд
реакции не получил никакой(
0
mrBobrillo
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 272
18.11.2015, 16:49 #19
нет, не для main следует ставить данное правило, а для блока, который подтягивается, в данном случае это обертка, в которую обернут ваш сайтбар, если конечно же он обернут?
0
flyp
Заблокирован
18.11.2015, 16:52  [ТС] #20
CSS
1
2
3
.search-head {/*стили для поисковой строки*/
             clear: both;
}
сработало только расстояние осталось под редактировать огромное вам спасибо век не забуду
0
18.11.2015, 16:52
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
18.11.2015, 16:52

Перемещается ли окно
Возможно ли, имея HWND определить, перемещает ли пользователь окно в данный...

Не перемещается окно
Перетащила окно программы на край экрана и оно там зависло. Ярлыки...

Дочернее окно не перемещается
При выборе определённого пункта меню, должно быть создано новое дочернее окно....


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

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

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