Зафиксировать и прижать к низу браузера

Ddv122 · Регистрация: 23.12.2010

Студворк — интернет-сервис помощи студентам

Доброго времени суток!
Я новичек в этом деле, нашел интересную панель, только не могу разобраться как её зафиксировать и прижать к низу окна браузера.
Та которая в центре
ссылка

Вот её CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
* { margin: 0; padding: 0; }
body { font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
 
/* ================ DOCK 1 ================ */
#dock { position: relative; top: 150px;}
.dock-container { position: relative; top: -8px; height: 50px; padding-left: 20px; }
a.dock-item { display: block; width: 50px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; }
.dock-item span { display: none; padding-left: 20px; }
.dock-item img { border: 0; margin: 5px 10px 0px; width: 100%; }
 
/*

Помогите пожалуйста!
За ранее благодарен.

z-z · 20.02.2012, 18:22

CSS
1
#dock { position: relative; bottom:0;}

попробуй так) остальной код не меняй)

@allukard · 20.02.2012, 18:23

Сообщение от EdarGp

#dock { position: relative; top: 150px;}

CSS
1
position: relative; bottom: 150px;

Ddv122 · 20.02.2012, 18:59 **[ТС]**

сделал так,

HTML5
1
{position: fixed; bottom:0;}

Он зафиксировался и держится в низу, но только в левом краю..
Как сделать, что б он внизу по центру держался?

z-z · 20.02.2012, 19:01

попробуй

CSS
1
margin:0 auto

в том же стиле указать.
то есть

CSS
1
#dock { position: relative; bottom:0;margin:0 auto}

Ddv122 · 20.02.2012, 19:08 **[ТС]**

Сообщение от z-z

попробуй

CSS
1
margin:0 auto

в том же стиле указать.
то есть

CSS
1
#dock { position: relative; bottom:0;margin:0 auto}

Не помогает(

@Герц · 20.02.2012, 19:30

CSS
1
2
3
4
5
#dock {
width: 100%;
position: absolute;
bottom: 0;
}

Лежит снизу и центрировано.

Добавлено через 11 минут
Там может быть косяк с его жестко заданными

CSS
1
2
left: 590px;
width: 500px;

Width можно оставить, а вот left: 590px я бы заменил на

CSS
1
margin: 0 auto;

Добавлено через 4 минуты

Сообщение от z-z

попробуй

CSS
1
margin:0 auto

в том же стиле указать.
то есть

CSS
1
#dock { position: relative; bottom:0;margin:0 auto}

Ему без толку задавать margin: auto, элемент с id="dock" занимает всю ширину окна, а в соответствии со стандартном, margin: auto (это называется aligning) не действует на элементы, занимающие всю доступную область.

Сообщение от http://www.w3schools.com/css/css_align.asp

Tip: Aligning has no effect if the width is 100%.

Кстати, у тебя точки с запятой на хватает после auto

z-z · 20.02.2012, 19:33

Герц, вот не скажу, как по валидности кода, но с точки зрения работоспособности точка с запятой после последнего стиля может не ставиться, я всегда так делаю, ничего косячного не бывает

@Герц · 20.02.2012, 19:54

Ты прав, стандарт не требует точки с запятой после каждого строчки вида "attr: value".
Видимо она служит лишь как разделитель, если атрибутов несколько.

Ddv122 · 20.02.2012, 22:44 **[ТС]**

Спасибо за советы, нет возможности щас проверить, домой прийду отпишусь..
Насчет ";" соглашусь с z-z, замечал что в конце не обязательно ставить)

Добавлено через 2 часа 24 минуты

Сообщение от Герц

CSS
1
2
3
4
5
#dock {
width: 100%;
position: absolute;
bottom: 0;
}

Лежит снизу и центрировано.

Но не зафиксировано, при скроллинге не стоит на месте, а тоже двигается...
Если сделать

CSS
1
2
3
4
5
#dock {
width: 100%;
position: fixed;
bottom: 0;
}

Лежит снизу и по центру, иконки при скроллинге тоже снизу остаются, а вот фокус анимации убегает..
Думаю понятно объяснил?
Что то ещё надо исправить..

z-z · 20.02.2012, 22:46

а фокус анимации - это как?)) не те иконки выскакивают?))

@Герц · 20.02.2012, 23:02

Не понимаю, у меня все ок, Chrome последний.
Ведет себя точно так же как боковые и центральный.

Ddv122 · 21.02.2012, 11:11 **[ТС]**

Сообщение от z-z

а фокус анимации - это как?)) не те иконки выскакивают?))

Ща на ucoze создам, что было понятно)

Добавлено через 35 минут

Сообщение от EdarGp

Ща на ucoze создам, что было понятно)

Хм на ucoze чёт вообще работать не хочет...
Ладно уже поздно, завтра попробую разобраться...

Добавлено через 11 часов 6 минут

Сообщение от Герц

Не понимаю, у меня все ок, Chrome последний.
Ведет себя точно так же как боковые и центральный.

А при скроллинге она тоже снизу браузера остается?

@Герц · 21.02.2012, 17:05

Что ты подразумеваешь под скроллингом? При изменении размеров окна виджет остается привязанным к нижнему краю окна браузера, соответственно его всегда видно.
А ты как хотел?

Ddv122 · 21.02.2012, 18:20 **[ТС]**

Сообщение от Герц

Что ты подразумеваешь под скроллингом? При изменении размеров окна виджет остается привязанным к нижнему краю окна браузера, соответственно его всегда видно.
А ты как хотел?

Если листать страницу вверх, вниз то панелька тоже передвигается.
Попробуй текста накидать и подвигать ползунок.

Я хотел что бы она была, внизу и по центру(как ты мне уже и сделал) и зафиксирована, т.е. не двигалась при пролистывании страницы.

@Герц · 21.02.2012, 19:12

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

Ddv122 · 21.02.2012, 19:28 **[ТС]**

Вот, глянь пожалуйста.

z-z · 21.02.2012, 19:37

EdarGp, измени в стилях это

CSS
1
#dock {width:100%; position: absolute; bottom: 0px;}

на это

CSS
1
#dock {width:100%; position: fixed; bottom: 0px;}

у меня так сработало, меню липнет вниз)))

Ddv122 · 21.02.2012, 20:08 **[ТС]**

Сообщение от z-z

EdarGp, измени в стилях это

CSS
1
#dock {width:100%; position: absolute; bottom: 0px;}

на это

CSS
1
#dock {width:100%; position: fixed; bottom: 0px;}

у меня так сработало, меню липнет вниз)))

Он так криво работает, попробуй с этими параметрами пролистать в низ страницу и навести на иконки, анимации не будет.

z-z · 21.02.2012, 20:15

проверил в опере 11.61, IE 9, мазила 10, гугл хром 17... что то не то только в мазиле, и то анимация есть, только она работает почему то при наведении мыши над меню, а не на само меню))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 19.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	20.02.2012, 19:33
	Герц, вот не скажу, как по валидности кода, но с точки зрения работоспособности точка с запятой после последнего стиля может не ставиться, я всегда так делаю, ничего косячного не бывает 0

@Герц 545 / 344 / 12 Регистрация: 05.11.2010 Сообщений: 1,076 Записей в блоге: 1
	20.02.2012, 19:54
	Ты прав, стандарт не требует точки с запятой после каждого строчки вида "attr: value". Видимо она служит лишь как разделитель, если атрибутов несколько. 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	20.02.2012, 22:46
	а фокус анимации - это как?)) не те иконки выскакивают?)) 0

@Герц 545 / 344 / 12 Регистрация: 05.11.2010 Сообщений: 1,076 Записей в блоге: 1
	20.02.2012, 23:02
	Не понимаю, у меня все ок, Chrome последний. Ведет себя точно так же как боковые и центральный. 0

@Герц 545 / 344 / 12 Регистрация: 05.11.2010 Сообщений: 1,076 Записей в блоге: 1
	21.02.2012, 17:05
	Что ты подразумеваешь под скроллингом? При изменении размеров окна виджет остается привязанным к нижнему краю окна браузера, соответственно его всегда видно. А ты как хотел? 0

@Герц 545 / 344 / 12 Регистрация: 05.11.2010 Сообщений: 1,076 Записей в блоге: 1
	21.02.2012, 19:12
	Покажи пример чтоли, у меня она вроде как была снизу так и есть при листании. 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	21.02.2012, 20:15
	проверил в опере 11.61, IE 9, мазила 10, гугл хром 17... что то не то только в мазиле, и то анимация есть, только она работает почему то при наведении мыши над меню, а не на само меню)) 0