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

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в 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

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

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
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
fanmas
css не особо для подобного.. но можно для @media print сделать видимым div с подписью.
.sign {
  display: none;
}
@media print {
  .sign {
     position: fixed;
     bottom: 0;
     left: 0;
   }
}
...
<div class='sign'>Подпись</div>
 
на фиксированном месте в странице будет этот div при печати.
Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 21:08 26-01-2022
WONDROUS



Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать по анимации, так как почему-то не соображается и не получается. Вопрос в том, как совместить две анимации, чтобы картинка вращалась по кругу (например, диаметр 300px) и при этом верх картинки был всегда направлен к центру круга?
Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 22:22 27-01-2022
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
за один оборот вокруг центра сделать один оборот картинки вокруг себя.
https://jsfiddle.net/rcwup8Lk/
Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 22:35 27-01-2022 | Исправлено: Mavrikii, 22:41 27-01-2022
WONDROUS



Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за пример!
Я сейчас понял, почему не получалось, просто надо было у картинки угол изменить, чтобы она верхом к центру была.
Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 23:27 27-01-2022
Mavrikii

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

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

либо запускать анимацию снизу.
https://jsfiddle.net/o61aygfq/
Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 05:11 28-01-2022
WONDROUS



Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за пример, но я всё же оставлю вариант с изменением угла, так как подойдёт и для других целей.
Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 01:30 29-01-2022
Vladsvn

Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Добрый день!
 
Не понимаю, как разместить строку меню в нижней части логотипа.
 
Логотип имеет размер 1250х200, а в его нижней части отведено место для текстовых строк меню. Но у меня, почему-то, текст ссылок идет ниже логотипа. Код вот такой:
 
<div style="border: red 3px solid; width: 100%; position: relative;">
<a href="/"><img src="/my-design/logo-3.jpg" style=" width:100%; height:auto;"></a>
<div style="position: absolute; vertical-align:bottom;">
<a href="/s1.html">Лук</a>
<a href="/s2.html">Листья</a></div>
  </div>
 
Кроме того, ссылки меню никакими способами не удается центрировать...
 
Как бы решить эти проблемы?
Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 16:19 05-02-2022
Mavrikii

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

Цитата:
style="position: absolute

Зачем?? Ну или уже указывайте явно координаты тогда
Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 16:41 05-02-2022
Vladsvn

Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Честно говоря, я ориентировался на два найденных в сети примера, в которых было сделано именно так. Во всяком случае, устранение абсолютного позиционирования проблему не решило.
 
Центрировать тоже не удается. И, как сейчас выяснилось, не удается задействовать к ссылкам text-decoration: none.
 
Не знаете, почему?
Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 16:50 05-02-2022 | Исправлено: Vladsvn, 16:51 05-02-2022
Mavrikii

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

Цитата:
устранение абсолютного позиционирования проблему не решило.
 

Я не сказал удалять. Либо добавляете bottom:0, либо используйте отрицательный margin-top, к примеру.
 

Цитата:
задействовать к ссылкам text-decoration: none

Код
 

Цитата:
никакими способами не удается центрировать

Центрировать в каком направлении?
Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 16:55 05-02-2022
Vladsvn

Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
bottom сработал, спасибо!
 
Центрировать ссылки нужно в горизонтальном направлении.
 
А код работы со ссылками я пытался использовать такой  
<span style="text-decoration: none;">
<a href="/s1.html">Лук</a></span>
 
Не действует.
 
Добавлено:
С учетом сделанных корректировок, текущий код такой:
 
<div style="width: 100%; position: relative;">
    <a href="/"><img src="/my-design/logo-3.jpg" style=" width:100%; height:auto;"></a>
   <div style="position: absolute; bottom:5%;">
    <span><a style="text-decoration: none; color: #FFF;" href="/s1.html">Лук</a></span>
    <span><a style="text-decoration: none; color: #FFF;" href="/s2.html">Листья</a></span>
   </div>
</div>
 
Осталось только центрировать меню (ссылки) по горизонтали. Как бы это сделать?
 
Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 17:11 05-02-2022 | Исправлено: Vladsvn, 17:43 05-02-2022
Mavrikii

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

Цитата:
Как бы это сделать

text-align: center
у родителя.
Ну и растянуть его на всю ширину.
left: 0
right: 0
Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 18:30 05-02-2022
Vladsvn

Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Действительно, получилось! А то я чего только не пробовал! Спасибо!
 
Окончательный работоспособный код такой (может, кому-нибудь пригодится):
 
<div style="width: 100%; position: relative;">
    <a href="/"><img src="/my-design/logo-3.jpg" style=" width:100%; height:auto;"></a>
   <div style="position: absolute; bottom:5%; text-align: center; left:0; right:0;">
    <a style="text-decoration: none; color: #FFF;" href="/s1.html">Лук</a>
    <a style="text-decoration: none; color: #FFF;" href="/s2.html">Листья</a>
   </div>
</div>
 
Ещё раз благодарю!  
 
Добавлено:
Интересно, а есть возможность с помощью медиа запросов на разных экранах показывать разные меню? Для большого размера будет в первом медиа запросе display: none; покажут только второе (большое) меню. А для узкого экрана наоборот - display: none; для большого меню.  
 
Например, на узком экране показываем
   <div style="position: absolute; bottom:5%; text-align: center; left:0; right:0;">
    <a style="text-decoration: none; color: #FFF;" href="/s1.html">Лук</a>
    <a style="text-decoration: none; color: #FFF;" href="/s2.html">Листья</a>
   </div>
 
А на широком экране показываем
   <div style="position: absolute; bottom:5%; text-align: center; left:0; right:0;">
    <a style="text-decoration: none; color: #FFF;" href="/s1.html">Лук</a>
    <a style="text-decoration: none; color: #FFF;" href="/s2.html">Листья</a>
<a style="text-decoration: none; color: #FFF;" href="/s3.html">БАНАНЫ</a>
<a style="text-decoration: none; color: #FFF;" href="/s4.html">АРБУЗЫ</a>
   </div>
 
Это не нарушает какие-нибудь правила?
Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 19:34 05-02-2022
Mavrikii

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

Цитата:
а есть возможность с помощью медиа запросов на разных экранах показывать разные меню?

есть.. на странице сразу оба, но отображается нужное в зависимости от ширины экрана.
так responsive дизайн и делается
https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Responsive_Design
Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 22:14 05-02-2022
Vladsvn

Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо за ссылку - это реально очень интересно! Правда, тем не идет речи о разном тексте для разных устройств, но, наверное, и это допустимо.
Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 11:27 06-02-2022
Mavrikii

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

Цитата:
Правда, тем не идет речи о разном тексте для разных устройств

а какая разница? делаете display: none для того варианта, который не должен отображаться. и убираете когда нужно, чтобы отображался.
Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 11:36 06-02-2022
Vladsvn

Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Сейчас в CSS так много всяких свойств, что даже трудно понять, что CSS может, а чего не может.
 
Можно ли средствами CSS сделать всплывающее меню? Вот такое, как здесь: https://www.e-xecutive.ru/ Чтобы кликнуть на гамбургер и окно появилось, кликнуть вне окна и оно закрылось.
 
Возможно такое без скрипта или нет?
Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 15:07 06-02-2022
Mavrikii

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

Цитата:
Возможно такое без скрипта или нет?

муторно. потому что единственный способ в css сделать нечто такое это использовать спрятанный чекбокс. ибо css с кликами не работает, не его задача.
 
например - вариант 3
https://css-tricks.com/three-css-alternatives-to-javascript-navigation/
 

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

с этим самая большая проблема.
Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 02:32 07-02-2022
Vladsvn

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

Цитата:
единственный способ в css сделать нечто такое это использовать спрятанный чекбокс.  
Похоже, что так, хотя, вероятно, возможна и радиокнопка.
 
А можно ли по этому же принципу сделать двухуровневое меню?
 
 
 
 
Всего записей: 342 | Зарегистр. 07-09-2016 | Отправлено: 12:15 07-02-2022
Mavrikii

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

Цитата:
А можно ли по этому же принципу сделать двухуровневое меню?

нет, потому что второй уровень не закроется без клика. его только по ховеру, стандартным способом.
Всего записей: 15100 | Зарегистр. 20-09-2014 | Отправлено: 20:14 07-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

Компьютерный форум 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