Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

Открыть новую тему     Написать ответ в эту тему

Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ссылки для самостоятельного изучения:
 
Теория + примеры + учебники:
W3School: CSS Tutorial
MDN: Cascading Style Sheets (CSS)
WebReference: Уроки по HTML и CSS
htmlbook: Справочник CSS
YouTube: Основы CSS/CSS3
CSS для JavaScript-разработчика
Основы CSS - каскадные таблицы стилей
Статьи по основам CSS
 
Применение на практике:
StackOverflow: 'CSS' Questions
CSS-Tricks
 

Первый пост темы (до включения шапки).. ··· Текущий бэкап шапки..

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 18:46 27-10-2004 | Исправлено: TheBarmaley, 05:24 27-02-2019
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
его только по ховеру, стандартным способом.

Имеете в виду - на Крестик нажать для закрытия меню?

Всего записей: 347 | Зарегистр. 07-09-2016 | Отправлено: 20:29 07-02-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vladsvn

Цитата:
Имеете в виду - на Крестик нажать для закрытия меню?

нет, имеется в виду, что появляется второй уровень и исчезает по наведению мыши, а не клику.

Всего записей: 15493 | Зарегистр. 20-09-2014 | Отправлено: 20:30 07-02-2022
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Я ищу простое двухярусное меню, в котором через CSS можно было бы устанавливать цвет и размеры. Чтобы оно открывалось по клику на бургер и закрывалось по клику на крестик или по клику на любое место за пределами меню.
 
Пересмотрел в сети множество решений, но все они слишком сложные и громоздкие. Необходимость JS  само по себе не является препятствием, но часто в него прячут цвет и размеры, так что разобраться крайне сложно. А хотелось бы чего попроще.
 
Вы не знаете подходящего меню?  

Всего записей: 347 | Зарегистр. 07-09-2016 | Отправлено: 23:49 07-02-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vladsvn

Цитата:
Вы не знаете подходящего меню?  

не знаю, сам делаю если что нужно.

Всего записей: 15493 | Зарегистр. 20-09-2014 | Отправлено: 23:56 07-02-2022
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">.
 
Можете подсказать, в чем здесь ошибка?
 

Всего записей: 347 | Зарегистр. 07-09-2016 | Отправлено: 16:11 08-02-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vladsvn
зачем повторять всю структуру, если можно изменять свойства одного меню?

Всего записей: 15493 | Зарегистр. 20-09-2014 | Отправлено: 20:18 08-02-2022 | Исправлено: Mavrikii, 20:18 08-02-2022
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Это макет и позже можно будет что-то подсократить и почистить код, но прежде нужно добиться его работоспособности. Сейчас он не работоспособен - <div id="top_menu_2"> улетает вниз почему-то.
 
Вы можете подсказать, почему это происходит и как избавиться от этой проблемы?

Всего записей: 347 | Зарегистр. 07-09-2016 | Отправлено: 20:42 08-02-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vladsvn

Цитата:
почему это происходит и как избавиться от этой проблемы?

потому что потеряли #

Цитата:
#top_menu_wide, top_menu_narrow  

Всего записей: 15493 | Зарегистр. 20-09-2014 | Отправлено: 20:52 08-02-2022
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Большое Вам спасибо!
 
Я чувствовал, что здесь какая-то неприметная синтаксическая ошибка, много раз все просматривал, но отыскать её навыков не хватило...  
Очень Вам благодарен!

Всего записей: 347 | Зарегистр. 07-09-2016 | Отправлено: 00:09 09-02-2022
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Снова немного дилетантский вопрос, но всё же просьба подсказать, как в данном примере сделать, чтобы спереди canvas (пузырей) разместить див и чтобы размер canvas зависел от размера помещённого спереди дива и, например, его padding? То есть, помещаешь картинку 250х250px и размер canvas с пузырями в высоту был 250 пикселей.

Всего записей: 3411 | Зарегистр. 30-06-2002 | Отправлено: 23:11 11-02-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
  window.addEventListener('resize', function() {
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
  });

считаете что вам нужно и выставляете как нужно.

Всего записей: 15493 | Зарегистр. 20-09-2014 | Отправлено: 23:32 11-02-2022
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ответ!
Но всё же, просьба подсказать, как на этом примере сделать, чтобы пузыри были только по высоте картинки? С Явой также не дружу.

Всего записей: 3411 | Зарегистр. 30-06-2002 | Отправлено: 15:00 13-02-2022 | Исправлено: WONDROUS, 15:15 13-02-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
чтобы пузыри были только по высоте картинки?

а точнее? подогнать, к примеру, канвас под ее размер и разместить прямо под ней. тогда ничего снаружи не будет.
при чем тут CSS?

Всего записей: 15493 | Зарегистр. 20-09-2014 | Отправлено: 22:27 13-02-2022 | Исправлено: Mavrikii, 22:28 13-02-2022
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Вопрос как раз в том, как высота канвас автоматом подгонялась под размер картинки или того, что будет перед канвас. Что-то не соображу просто...

Всего записей: 3411 | Зарегистр. 30-06-2002 | Отправлено: 22:38 13-02-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
как высота канвас автоматом подгонялась под размер картинки или того, что будет перед канвас

только через js или общего родителя.. например https://jsfiddle.net/zaomne75/

Всего записей: 15493 | Зарегистр. 20-09-2014 | Отправлено: 22:49 13-02-2022
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Добрый день!
 
Возникли проблемы с формой поиска, которые никак не удается решить.  
 
Форма  несложная - для простоты я поместил ее вот сюда: http://fh7929mi.bget.ru/panel-10-1.html
 
Хочется сделать так, чтобы:
 
1. На широком экране при вводе информации форма раздвигалась на все свободное место.
 
2. На узком экране форме раздвигаться некуда, поэтому на узком экране либо она должна раздвигаться на весь экран поверх блоков Меню и Вход, либо опускаться вниз и ложиться поверх контента и тоже на всю ширину экрана.  
 
Как бы такое сделать?

Всего записей: 347 | Зарегистр. 07-09-2016 | Отправлено: 13:54 16-02-2022
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за пример!
Если делать высоту 100%, то пузыри получаются сжатыми, плоскими. Ладно, оставлю эту затею.

Всего записей: 3411 | Зарегистр. 30-06-2002 | Отправлено: 17:47 16-02-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
Если делать высоту 100%, то пузыри получаются сжатыми, плоскими

наверно потому, что высота внутри канваса как то еще задается.

Всего записей: 15493 | Зарегистр. 20-09-2014 | Отправлено: 23:53 16-02-2022
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Что-то никак не получается с этим кодом сделать плавное появление. Исчезает плавно, а появляется гораздо быстрее.

Код:
.ball {
    animation: flash 2s ease infinite;
}
 
@keyframes flash {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Всего записей: 3411 | Зарегистр. 30-06-2002 | Отправлено: 17:05 21-02-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
Ну так 70% как бы не середина.

Всего записей: 15493 | Зарегистр. 20-09-2014 | Отправлено: 17:27 21-02-2022
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru