Гость
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Адаптация верстки со сменой контента / 2 сообщений из 2, страница 1 из 1
08.02.2022, 19:43
    #40132648
vlad-55
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Адаптация верстки со сменой контента
Добрый день всем!

Хочется сделать так, чтобы на устройствах с экраном меньше 640 пикселей посетителям показывался другой графический файл логотипа и другой текст верхнего меню. Но почему-то получатся так, что логотип меняется как и ожидалось, а вот ссылки меню проваливаются куда-то вниз страницы. Инспектор кода Ф12 не дает ответа о причинах. Код такой:

#top_menu_wide, top_menu_narrow{width: 100%; position: relative; display:none;}

#top_menu_1, #top_menu_2 {position: absolute; bottom:5%; text-align: center; left:0; right:0; display:none;}
#top_menu_1 a, #top_menu_2 a{text-decoration:none;color: #00F;}

@media screen and (min-width:640px){
#top_menu_wide {display:block;}
#top_menu_narrow {display: none;}
#top_menu_1 {display:block;font-size:16px; font-weight: bold;} <!-- 640 и больше -->
}


@media screen and (min-width:535px) and (max-width:640px){
#top_menu_wide {display:none;}
#top_menu_narrow {display:block ;}
#top_menu_2 {display:block;font-size:14px; font-weight: normal;} <!-- 535-640 -->
}


<div id="top_menu_wide">
<a href="/"><img src="/my-design/logo-3.jpg" style=" width:100%; height:auto;"></a>

<div id="top_menu_1">
<a href="/s1.html">Миссия</a>
<a href="/s2.html">Как вступить</a>
<a href="/s2.html">Члены клуба</a>
<a href="/s2.html">Сообщество</a>
</div>

</div> <!-- top_menu_wide -->


<div id="top_menu_narrow">
<a href="/"><img src="/my-design/logo-4.jpg" style=" width:100%; height:auto;"></a>

<div id="top_menu_2">
<a href="/s1.html">Миссия</a>
<a href="/s2.html">Как вступить</a>
<a href="/s2.html">Сообщество</a>
</div>

</div> <!-- top_menu_narrow -->

Улетает вниз весь <div id="top_menu_2">.

Можете подсказать, в чем здесь ошибка?
...
Рейтинг: 0 / 0
08.02.2022, 21:18
    #40132683
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Адаптация верстки со сменой контента
vlad-55
в чем здесь ошибка?

В этом селекторе
vlad-55

Код: css
1.
2.
3.
4.
5.
6.
#top_menu_wide, 
top_menu_narrow {
   width: 100%; 
   position: relative; 
   display:none;
}


...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Адаптация верстки со сменой контента / 2 сообщений из 2, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]