Фиксированное меню в CSS

@timslife · Регистрация: 01.12.2014

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

Здравствуйте. Знаний CSS нет.

Делаю сайт в онлайн системе создания сайтов. Unbounce.com
Доступа к общему HTML нету. Есть возможность добавлять HTML элементы (блоки). Есть доступ к CSS.

Мне нужно Чтоб на сайте было фиксированное меню. Полупрозрачный фиксированный блок я создал. Добавив в CSS такую запись:

CSS

#lp-pom-box-167 {
  position: fixed; 
  top: 0px; 
  left: 0px; 
  width: 100%;
}

Все как надо мне.

Но теперь не знаю как расположить элементы в этом блоке. Ссылки, текст, пару картинок. Но только не относительно окна браузера, а относительно этого элемента.
Прописываю значение (position: fixed, left: 773px и т.д.), но расстояние отсчитывается от начала окна браузера, а не от начала ширины страницы (940px).

Подскажите какой код нужно вставить. Заранее спасибо.

@ludmila-sv · 01.12.2014, 16:53

Внутренним элементам попробуйте указать position: relative;

@Kiruxa · 01.12.2014, 17:05

Располагайте элементы точно так же как в обычном блоке (без указания для них position:fixed).

@timslife · 01.12.2014, 17:24 **[ТС]**

Спасибо, но попробовал, даже убрал значение left, не помогло.

Вот так сайт выглядит в админ панели: (в CSS внес только номер телефона, не обращайте внимания на цветные значки.)
http://www.designbird.kz/scree... -13-11.png

А вот так в браузере:
http://www.designbird.kz/scree... -14-18.png

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

@Kiruxa · 01.12.2014, 17:24

Вы могли бы дать ссылку на проект, чтобы можно было посмотреть детальнее?

@timslife · 01.12.2014, 17:35 **[ТС]**

Да, конечно.

http://unbouncepages.com/designbird-1/

Добавлено через 7 минут
Нужно что то вроде этого...
http://getbootstrap.com/exampl... ixed-top/#

Или этого:
http://landings.in/

Но у меня нету доступа к HTML страницы. Только к CSS, Javascript и вставка блока с HTML

@Kiruxa · 01.12.2014, 17:35

CSS

#lp-pom-text-144 {
position: relative;
width: 940px;/*сюда ставите ширину контентной области*/
text-align: right;
overflow: hidden;
margin: 0 auto;
}
#lp-pom-text-144 p{
width: 150px;
float: right;
}

@timslife · 01.12.2014, 17:44 **[ТС]**

Сделал, элемент улетел за края экрана. Если уменьшить страницу, то можно его увидеть.
Сделал ширину контентной области 940px.

А для чего второй раз указывать #lp-pom-text-144?

@Kiruxa · 01.12.2014, 17:49

Это стили для р внутри #lp-pom-text-144. Посмотрите внимательнее селектор написан #lp-pom-text-144 p/
Выше я написала стили для #lp-pom-text-144. Т.е вам нужно поставить этот кусок стилей вместо имеющегося.

@timslife · 01.12.2014, 17:52 **[ТС]**

Вставил все, как написали. Но телефон за пределами сайта.

CSS

    
#lp-pom-text-144 {
position: relative;
width: 940px;
text-align: right;
overflow: hidden;
margin: 0 auto;
}
#lp-pom-text-144 p{
width: 150px;
float: right;
}

@Kiruxa · 01.12.2014, 17:53

Еще разок

CSS

#lp-pom-text-144 {
position: relative;
width: 940px;
text-align: right;
overflow: hidden;
margin: 0 auto;
background:url(....);
padding:15px 0;
}

@timslife · 01.12.2014, 17:54 **[ТС]**

А значение background для текста или для меню?

@Kiruxa · 01.12.2014, 17:59

На 1064 строке у вас остались стили для #lp-pom-text-144, они ломают верстку, удалите их или закомментируйте пока.
background перепишите из стилей выше (на 1064 строке)

Добавлено через 4 минуты
Через поиск в редакторе найдите стили для #lp-pom-text-144 и удалите(или закомментируйте) не нужные.

@timslife · 01.12.2014, 18:00 **[ТС]**

В редакторе нету 1064 строк. Их не так много. Вот весь текст CSS.

CSS

<style>
 
a {
   text-decoration:none!important; 
}
  
#lp-pom-box-70:after, #lp-pom-box-71:after {
    top: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #ffffff;
    border-width: 15px;
    margin-left: -15px;
}
  
  #lp-pom-block-8, #lp-pom-block-15 {
    background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
  
  #lp-pom-box-167 {
  position: fixed; 
  top: 0px; 
  left: 0px; 
  width: 100%;
} 
    
#lp-pom-text-144 {
position: relative;
width: 940px;
text-align: right;
overflow: hidden;
margin: 0 auto;
background:url(....);
padding:15px 0;
}
  
#lp-pom-text-144 p{
width: 150px;
float: right;
}
  
  
</style>

@Kiruxa · 01.12.2014, 18:02

Обновите кеш сайта.

@timslife · 01.12.2014, 18:07 **[ТС]**

Обновил, что то должно измениться?

@Kiruxa · 01.12.2014, 18:11

От стилей которые вы удалили остался кеш, так как они отображаются в браузере. Всю картину портят свойства

CSS

#lp-pom-text-144{
left: 780px;
top: 9px;
}

ну попробуйте на первое время (пока не отвиснет кеш) указать :

CSS

#lp-pom-text-144{
left: 0;
top: 0;
}

@timslife · 01.12.2014, 18:14 **[ТС]**

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

Указал по нулям. Адрес встал на место) Спасибо. А другие элементы как прописывать? Я так понимаю, только в CSS все будет указываться?

@Kiruxa · 01.12.2014, 18:22

Я просто не знаю по какому принципу организованы стили на вашем сайте. Но, безусловно, писать стили лучше в один файл. Сейчас, я смотрю в хром, и вижу что стили для #lp-pom-text-144 прописаны в двух местах, они перекрывают и дополняют друг друга. Сохраните стили для #lp-pom-text-144 в какой-то один файл.

@timslife · 01.12.2014, 18:31 **[ТС]**

Получается так. Есть главный редактор (drag and drop (визуальный)). И есть опционально CSS, как бы дополнительно.
Вот пример по вставке Google Fonts.
http://support.unbounce.com/en... ding-page-

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311
	01.12.2014, 18:22	19
	Я просто не знаю по какому принципу организованы стили на вашем сайте. Но, безусловно, писать стили лучше в один файл. Сейчас, я смотрю в хром, и вижу что стили для #lp-pom-text-144 прописаны в двух местах, они перекрывают и дополняют друг друга. Сохраните стили для #lp-pom-text-144 в какой-то один файл. 0

Фиксированное меню в CSS

Решение

Решение

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	01.12.2014, 16:53	2
	Внутренним элементам попробуйте указать position: relative; 0

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311
	01.12.2014, 17:05	3
	Располагайте элементы точно так же как в обычном блоке (без указания для них position:fixed). 0

@timslife 0 / 0 / 0 Регистрация: 01.12.2014 Сообщений: 10
	01.12.2014, 17:24 [ТС]	4
	Спасибо, но попробовал, даже убрал значение left, не помогло. Вот так сайт выглядит в админ панели: (в CSS внес только номер телефона, не обращайте внимания на цветные значки.) http://www.designbird.kz/scree... -13-11.png А вот так в браузере: http://www.designbird.kz/scree... -14-18.png Добавлено через 3 минуты Попробовал, Ничего не меняется. Если элемент не добавлять в CSS, то он становится не фиксированным и двигается вместе с прокруткой. 0

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311
	01.12.2014, 17:24	5
	Вы могли бы дать ссылку на проект, чтобы можно было посмотреть детальнее? 1

@timslife 0 / 0 / 0 Регистрация: 01.12.2014 Сообщений: 10
	01.12.2014, 17:35 [ТС]	6
	Да, конечно. http://unbouncepages.com/designbird-1/ Добавлено через 7 минут Нужно что то вроде этого... http://getbootstrap.com/exampl... ixed-top/# Или этого: http://landings.in/ Но у меня нету доступа к HTML страницы. Только к CSS, Javascript и вставка блока с HTML 0

@timslife 0 / 0 / 0 Регистрация: 01.12.2014 Сообщений: 10
	01.12.2014, 17:44 [ТС]	8
	Сделал, элемент улетел за края экрана. Если уменьшить страницу, то можно его увидеть. Сделал ширину контентной области 940px. А для чего второй раз указывать #lp-pom-text-144? 0

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311
	01.12.2014, 17:49	9
	Это стили для р внутри #lp-pom-text-144. Посмотрите внимательнее селектор написан #lp-pom-text-144 p/ Выше я написала стили для #lp-pom-text-144. Т.е вам нужно поставить этот кусок стилей вместо имеющегося. 0

@timslife 0 / 0 / 0 Регистрация: 01.12.2014 Сообщений: 10
	01.12.2014, 17:54 [ТС]	12
	А значение background для текста или для меню? 0

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311
	01.12.2014, 17:59	13
	На 1064 строке у вас остались стили для #lp-pom-text-144, они ломают верстку, удалите их или закомментируйте пока. background перепишите из стилей выше (на 1064 строке) Добавлено через 4 минуты Через поиск в редакторе найдите стили для #lp-pom-text-144 и удалите(или закомментируйте) не нужные. 0

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311
	01.12.2014, 18:02	15
	Обновите кеш сайта. 0

@timslife 0 / 0 / 0 Регистрация: 01.12.2014 Сообщений: 10
	01.12.2014, 18:07 [ТС]	16
	Обновил, что то должно измениться? 0

@timslife 0 / 0 / 0 Регистрация: 01.12.2014 Сообщений: 10
	01.12.2014, 18:14 [ТС]	18
	Указал. Это значения были в визуальном редакторе. Мне нужно чтобы так, как я поставлю в визуальном редакторе, так же и отображался в итоге. Указал по нулям. Адрес встал на место) Спасибо. А другие элементы как прописывать? Я так понимаю, только в CSS все будет указываться? 0

@timslife 0 / 0 / 0 Регистрация: 01.12.2014 Сообщений: 10
	01.12.2014, 18:31 [ТС]	20
	Получается так. Есть главный редактор (drag and drop (визуальный)). И есть опционально CSS, как бы дополнительно. Вот пример по вставке Google Fonts. http://support.unbounce.com/en... ding-page- 0