Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Якорь в Bootstrap3

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Кидает не совсем в нужное место
Поиск в теме | Версия для печати
federal_kaz
Отправлено: 22 Февраля, 2016 - 20:09:14
Post Id


Новичок


Покинул форум
Сообщений всего: 8
Дата рег-ции: Февр. 2016  


Помог: 0 раз(а)
Доброго времени суток!

Верстаю шаблончик на бутстрапе3, бьюсь уже часа 3. Хочу настроить перемещение по странице с помощью якоря. Проблема заключается в том, что страница прокручивается не совсем в то место, куда хотелось бы.

Якори пишу так:
CODE (html):
скопировать код в буфер обмена
  1. <h2 id="top1">Текст</h2>


Ссылку на якори так:
CODE (html):
скопировать код в буфер обмена
  1. <a href="#top1">Ссылка</a>


Вот картинка, до куда опускается в браузере страница отмечено зелёной горизонтальной линией. До куда я хочу - красной.

https://yadi[dot]sk/i/1BxuCavPpKJXN

Получается так, что браузер опускает страницу ниже нужного места. Как мне сделать так, чтобы пролистывал до красных линий? не ниже.
 
 Top
DelphinPRO
Отправлено: 22 Февраля, 2016 - 21:11:41
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
При чем здесь бутстрап???
Я вас спрашиваю - ПРИ ЧЕМ ЗДЕСЬ БУТСТРАП?????????

Якори в html существовали испокон веков, в самых первых спецификациях. Бутстрапом тогда еще и не пахло. Тогда вообще ничего не было. Только якори... )

Воооот. Теперь выкидываем бутстрап из головы, и думаем, почему же страница прокручивается не туда? (даю подсказку - она на самом деле прокручивается туда куда и должна - в место нахождения якоря).


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
IllusionMH
Отправлено: 23 Февраля, 2016 - 02:58:00
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
federal_kaz, а у меню случаем не стоит position:fixed?
 
 Top
federal_kaz
Отправлено: 23 Февраля, 2016 - 03:43:35
Post Id


Новичок


Покинул форум
Сообщений всего: 8
Дата рег-ции: Февр. 2016  


Помог: 0 раз(а)
IllusionMH пишет:
federal_kaz, а у меню случаем не стоит position:fixed?


Теперь понял в чём корень зла. Да, у меня менюшка плавающая с position:fixed. Она то и перекрывает те самые 50 пикселов нужной мне части. Вот только пока ума не приложу как это вылечить в данной ситуации. Со слайдером решил эту проблему данной строчкой в css:

CODE (html):
скопировать код в буфер обмена
  1. body {
  2.         padding-top:50px;
  3. }


А то закрывала верх картинки.
(Добавление)
DelphinPRO пишет:
При чем здесь бутстрап???
Я вас спрашиваю - ПРИ ЧЕМ ЗДЕСЬ БУТСТРАП?????????

Якори в html существовали испокон веков, в самых первых спецификациях. Бутстрапом тогда еще и не пахло. Тогда вообще ничего не было. Только якори... )

Воооот. Теперь выкидываем бутстрап из головы, и думаем, почему же страница прокручивается не туда? (даю подсказку - она на самом деле прокручивается туда куда и должна - в место нахождения якоря).


А при том, чтобы довольно быстро решить проблему, достаточно указать все имеющиеся параметры. Чтобы люди не гадали на кофейной гуще, какие у меня стили прописаны)) Написал бутстрап - IllusionMH сразу догадался)
 
 Top
federal_kaz
Отправлено: 23 Февраля, 2016 - 07:36:50
Post Id


Новичок


Покинул форум
Сообщений всего: 8
Дата рег-ции: Февр. 2016  


Помог: 0 раз(а)
Советуют использовать следуюший стиль:
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. *[id]:before {
  3.   display: block;
  4.   content: " ";
  5.   margin-top: -50px;
  6.   height: 50px;
  7.   visibility: hidden;
  8. }
  9.  


Так что проблема с перемещением в нужное место решена, но породилась новая проблема (делается вставка лишних 50пикселей). Теперь буду придумывать как решить.
Прикреплено изображение (Нажмите для увеличения)
Безымянный.jpg
 
 Top
DelphinPRO
Отправлено: 23 Февраля, 2016 - 12:10:47
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
А просто сделать отдельный пустой элемент-якорь, задать ему релатив и сместить в нужное место не пробовали?

Я бы взял плагин jquery.scrollTo.js для навигации по странице. Плавная прокрутка, любая коррекция прокрутки.


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
federal_kaz
Отправлено: 23 Февраля, 2016 - 12:37:50
Post Id


Новичок


Покинул форум
Сообщений всего: 8
Дата рег-ции: Февр. 2016  


Помог: 0 раз(а)
DelphinPRO пишет:
А просто сделать отдельный пустой элемент-якорь, задать ему релатив и сместить в нужное место не пробовали?

Я бы взял плагин jquery.scrollTo.js для навигации по странице. Плавная прокрутка, любая коррекция прокрутки.


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

А вот про плагин - это идея. Сейчас попробую этот вариант. Спасибо за подсказку, о результате потом отпишусь.
 
 Top
Ch_chov
Отправлено: 23 Февраля, 2016 - 12:55:01
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2121
Дата рег-ции: Июль 2008  
Откуда: из города


Помог: 90 раз(а)
Цитата:
делается вставка лишних 50пикселей
Уберите visibility: hidden; и сделайте content: ""; (без пробела). Получится тоже самое, только без побочных эффектов.

http://stackoverflow.com/a/9618795/272927

(Отредактировано автором: 23 Февраля, 2016 - 12:55:56)

 
 Top
IllusionMH
Отправлено: 23 Февраля, 2016 - 14:01:34
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)

federal_kaz, да я не по бутстрапу догадывался, а по типичным менюшкам и проблемам со скролом "под" такие фиксированные меню.

(Отредактировано автором: 23 Февраля, 2016 - 14:02:19)

 
 Top
federal_kaz
Отправлено: 23 Февраля, 2016 - 17:28:13
Post Id


Новичок


Покинул форум
Сообщений всего: 8
Дата рег-ции: Февр. 2016  


Помог: 0 раз(а)
Ch_chov пишет:
Цитата:
делается вставка лишних 50пикселей
Уберите visibility: hidden; и сделайте content: ""; (без пробела). Получится тоже самое, только без побочных эффектов.

http://stackoverflow.com/a/9618795/272927


Переделал свойства как указано в ресурсе по ссылке - работает как надо. Но теперь стоит попробовать заюзать jquery.scrollTo.js, чтобы сделать всё максимально красиво, да и опыт лишним не бывает.

Спасибо большое всем за помощь!!!
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB