Vladsvn
Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Добрый день всем! Хочется сделать так, чтобы на устройствах с экраном меньше 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">. Можете подсказать, в чем здесь ошибка? |