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

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

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css

Цитата:
[class^="icon-"], [class*=" icon-"]
и так далее
как видите, грузится с CDN, поэтому сам файл не измените, но можете переписать стилем в доступном вам css файле.
и если нужно именно разноцветными каждую звезду или у каждого пользователя разные цвета, то нужно менять и код генерящий страницу, чтобы менять стили и у каждой копии стиля свой цвет.

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 10:06 06-06-2017
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Там можно изменить цвет, дописав эти строки, но они работают, только если прописать их в файле comments.css. Просто, это стек для веб-редактора и в самой программе есть возможность вносить изменения или дополнения в CSS, и было бы удобнее в самой программе сразу сделать этот код работающим, а не изменять потом отдельный файл CSS.

Код:
.stars {
color: #FF8B00;
}
 
.user-rating {
color: #FF8B00;
}

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 11:07 06-06-2017 | Исправлено: WONDROUS, 11:07 06-06-2017
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
 
спасибо, пришлось срочно уехать, поэтому не сразу отвечаю, сорри -  
я конечно же работаю с панелью разработчика, куда ж без этого, правый монитор полностью только под панель и редактор кода. Иногда вот просто смотришь и не видишь то что на поверхности лежит.)  
 
Еще раз спасибо, особо за
Цитата:
а основная причина в том, что bootstrap добавляет это  
 
Цитата:
* {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}
 

 

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 12:23 06-06-2017 | Исправлено: Weinaum, 12:23 06-06-2017
vs6262



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

Цитата:
но можете переписать стилем  

тоже хотел было сказать, забыл

Всего записей: 2235 | Зарегистр. 25-02-2013 | Отправлено: 00:57 07-06-2017
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
 
Вчера разработчик откорректировал стили, теперь вроде бы страница выпрямилась, спасибо )
ссылка
Пару моментов вижу, в принципе, решение тоже вижу, но не понятны причины, хотелось бы узнать (как в случае с "bootstrap добавляет свое" )
Речь вот о чем -  
при просмотре в мобильном разрешении именно для первого продукта заголовок и текст кнопки не выровнен по центру. Непонятно, почему именно для первого элемента такое.
 
И второе - перебился цвет фона для body - в принципе, я вижу, что  перебито bootstrap-овским scaffolding.less, и видимо, перебивает потому, что bootstrap-овские стили подключаются после стилей темы - stylesheet.css.
Задумался вот о чем. В ближайшее время намечено изменение еще нескольких страниц данного сайта, и все они связаны с респонсивной версткой. Изначально пошел по пути наименьшего сопротивления, и просто везде добавляю bootstrap. Хотя у них какой то свой респонсив вроде даже внедрен, но много где не работает или работает криво.  
Теперь разрабы на xtcommerce добавляют bootstrap прямо в теле страницы. Соотв-но он подключается позже чем стили темы.  
Так вот, есть ли какой то иной способ, заставить bootstrap подключаться раньше, кроме как прямо прописать его в head перед stylesheet.css?  
 
 
 
 
 

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 10:14 09-06-2017
Mavrikii

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

Цитата:
 кроме как прямо прописать его в head перед stylesheet.css?

без участия js - нет

Цитата:
Речь вот о чем -  
при просмотре в мобильном разрешении именно для первого продукта заголовок и текст кнопки не выровнен по центру. Непонятно, почему именно для первого элемента такое.

на скриншотах показывайте, чтобы было понятно на что смотреть

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 10:51 09-06-2017
Weinaum



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

Цитата:
на скриншотах показывайте, чтобы было понятно на что смотреть

 
вот об этом речь -  

 

Цитата:
без участия js - нет  

 
спасибо, ясно.  
Вообще bootstrap много лишнего добавляет, на действующих проектах нужно очень осторожно с ним.  
Вот еще маленький косячок, сразу не заметил -  
 

 
пункты меню поприжимались влево, по сравнению с остальными страницами.
Вижу, что тоже bootsprap добавил...
 
 
 

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 13:00 09-06-2017
Mavrikii

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

Цитата:
вот об этом речь -  
 

не наблюдается. рамку вы добавили? она влияет на ширину и сумму левого дива и правого уже не составляет полную ширину, вот один и плывет.

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 13:14 09-06-2017
Weinaum



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

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 15:28 09-06-2017
Mavrikii

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

Цитата:
странно. Нет, рамки на скрине подрисовал, для наглядности

тогда указывайте точно разрешение и браузер. уменьшение ширины окна браузера не приводит к заметным дефектам.

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 15:42 09-06-2017
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
<479, хром, фф - сейчас почему "плывет" второй продукт, точнее - ZEBRA DS8178 HANDSCANNER  - и заоголовок и кнопка, а первый только заголовок.

Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 15:58 09-06-2017
Mavrikii

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

Код:
@media (max-width: 479px)
a.product-name {
   float: left;
    text-align: center;
    padding-bottom: 20px;
}

float не центрируется. и синяя кнопка смещена вправо

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 16:11 09-06-2017 | Исправлено: Mavrikii, 16:11 09-06-2017
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Существует ли какой-то универсальный способ (код), чтобы сделать какой-то элемент поверх другого? Иногда код (с z-index и position) работает, иногда нет.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 20:55 11-06-2017
R3Pa4eK



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
WONDROUS
Что значит "иногда работает, иногда нет"? Если всё сделать правильно, то два абсолютно (как и относительно, кажется) с позиционированных блока будут правильно работать с z-index. А вообще, покажите код в тех случаях, когда работает, и в тех, когда нет.

Всего записей: 963 | Зарегистр. 15-01-2011 | Отправлено: 21:48 11-06-2017
vs6262



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

Код:
.btn {
  background: #3498db;
   
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
   
   
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Calibri;
  color: #ffffff;
  font-size: 16px;
  padding: 4px;
  text-decoration: none;
   
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
 
   
  -o-user-select: none;
  user-select: none;
}
 
.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

нужно falback решение для IE8, IE9 (так чтобы автоматом всё полностью работало бы)
может кто поможет ?
http://www.a-breil.de/ - потом ссылку уберу
 
Добавлено:

Код:
<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

в каком разделе в HTML разместить такой блок ?

Всего записей: 2235 | Зарегистр. 25-02-2013 | Отправлено: 02:00 30-06-2017 | Исправлено: vs6262, 02:16 30-06-2017
vs6262



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

Всего записей: 2235 | Зарегистр. 25-02-2013 | Отправлено: 04:28 30-06-2017
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Я, конечно, извиняюсь, но есть вопрос, как правильнее и проще сделать из прямоугольной картинки квадратную, изменив размер в пикселях, чтобы потом в круг поместить (border-radius)?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 23:15 16-08-2017
Mavrikii

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

Цитата:
проще сделать из прямоугольной картинки квадратную

зачем? поместить ее фоном по центру - сама обрежется
https://jsfiddle.net/5ks7r5fL/
https://jsfiddle.net/5ks7r5fL/1/
https://jsfiddle.net/5ks7r5fL/2/

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 23:20 16-08-2017 | Исправлено: Mavrikii, 23:27 16-08-2017
b7music



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Всем привет! Ребят, подскажите, можно ли как-нибудь подружить попап с z-index и overflow-y?
http://prntscr.com/gewfde вот как выглядит.

----------
https://nbs22.ru -
Запчасти и аксессуары

Всего записей: 684 | Зарегистр. 04-03-2010 | Отправлено: 15:05 30-08-2017
Mavrikii

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

Цитата:
Ребят, подскажите, можно ли как-нибудь подружить попап с z-index и overflow-y?  

какая связь то? скроллинг там сделан js скриптом, а не встроенными средствами браузера.

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 20:30 30-08-2017
Открыть новую тему     Написать ответ в эту тему

Страницы: 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