Вопросы по CSS

Автор: Xrobak
Дата сообщения: 28.07.2015 10:47

WONDROUS
Растягивается по высоте и повторяется по горизонтали окна браузера:

Код: html {
height: 100%;
}
body {
background-image:url('your-image.jpg');
background-repeat: repeat-x;
background-size: 100px 100%;
}

Автор: WONDROUS
Дата сообщения: 28.07.2015 14:30

Xrobak
Спасибо за совет, попробую.

Автор: Mavrikii
Дата сообщения: 29.07.2015 07:07

Weinaum
размер вашего header определен через padding контейнера в нем.
поэтому все так и сужается. либо нужно через javascript менять это исходя из размеров окна, либо искать другой подход, возможно с другой версткой.

Автор: Weinaum
Дата сообщения: 29.07.2015 09:12

Mavrikii
Спасибо, да, вы правы - в данном случае наверное через js был бы наиболее правильный подход.
Проблема, что я не силен в js, т.е. использовать готовые решения и как то подогнать под себя еще туда-сюда, а написать свое решение...
Поэтому подумал, что пока не найду готового решения, разобью по стилям на @media - будут скачки конечно, но в принципе ведь тоже выход...

Автор: stupom
Дата сообщения: 29.07.2015 10:19

Цитата:

наверное через js был бы наиболее правильный подход

-вот это уже не верно. CSS - совершенно достаточно для любых разумных задач связанных с визуальной часть дизайна. JS следует использовать только для структурных изменений в документе.

Автор: Xrobak
Дата сообщения: 12.08.2015 17:28

Не получается сделать картинку с прозрачным бордеров + ховер + текст поверху картинки и все это должно быть ссылкой. Пример http://jsfiddle.net/na1264y7/

Как видно из примера, ссылкой тут получается только текст в спане. Да, можно тег А вынести перед дивом и все будет работать, но, мне это не подходит. Проблема в том, что когда так сделать и вставить в редактор скедитор, то в базу сохранится хтмл код как показан у меня в примере. Почему-то скедитору (или друпалу) не нравится див завернутый в ссылку. Есть идеи как победить сие безобразие с такой разметкой? А то уже задолбался пробовать)

Автор: Mavrikii
Дата сообщения: 12.08.2015 19:49

stupom

Цитата:

CSS - совершенно достаточно для любых разумных задач связанных с визуальной часть дизайна

не всегда в случае динамики. особенно когда нужно менять стиль при определенных критериях.

Xrobak

Цитата:

не нравится див завернутый в ссылку

потому, что блочные элементы не могут быть в инлайновых.
сделайте a блочным и проблема должна исчезнуть.

Автор: stupom
Дата сообщения: 12.08.2015 21:40

Цитата:

блочные элементы не могут быть в инлайновых

-отстали от жизни, A в HTML5 не инлайновый.

Добавлено:

Цитата:

особенно когда нужно менять стиль при определенных критериях

-это и есть неразумно. "Критерий" является сущностью и должен влиять только на сущность, а не на оформление.

Автор: Mavrikii
Дата сообщения: 12.08.2015 21:51

stupom

Цитата:

-отстали от жизни, A в HTML5 не инлайновый.

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

Цитата:

это и есть неразумно.

ну попробуйте сделать то, о чем он просит, на чистом css.

Автор: stupom
Дата сообщения: 12.08.2015 21:57

Цитата:

видимо, не тот доктайп

DOCTYPE - ЗЛО

Автор: Xrobak
Дата сообщения: 13.08.2015 00:36

У меня html5, соответственно стоит <!DOCTYPE html>, так что не спасает.
Есть варианты как сделать то что мне нужно, не оборачивая див в ссылку? Т.к. другого варианта я не вижу, т.к. не знаю почему скедитор или сам друпал сохраняет не то, что я прописываю (т.е. ему не нравится обернутый в ссылку див, хоть и используешь хтмл5).

Автор: stupom
Дата сообщения: 13.08.2015 00:49

Цитата:

Есть варианты как сделать то что мне нужно

-да, если освоить HTML то для таких сайтов-визиток можно обойтись и без CMS. А если добавить любой язык (напр. BASIC), то можно реализовать любой сервис от визитки до магазина.

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

Автор: Xrobak
Дата сообщения: 13.08.2015 02:25

stupom
Ну и какого хрена ты тут лепишь рекламу? Какие в одно место еще сайты визитки в обсуждаемом вопросе? Один флейм и ничего более. Лучше просто помолчи, спасибо!

Автор: Mavrikii
Дата сообщения: 13.08.2015 03:17

Xrobak
http://ckeditor.com/forums/Support/CKEditor-wont-allow-inside
добавляют в конфиг ckeditor CKEDITOR.dtd.a.div = 1;
но это уже история для CKEditor (бывший FCKeditor)
и это больше напоминает о том, что поле редактирования (а в него, в зависимости от настроек ckeditor, могут и не идти вообще заголовки html кода - обрезает) работает в XHTML режиме.
или просто баг )

Автор: dimka11gg
Дата сообщения: 18.08.2015 18:36

Копирую css с другого сайта, после этого все смещается вправо ( страница увеличивается в ширине в два раза). Как это исправить?

Автор: stupom
Дата сообщения: 18.08.2015 19:03

Цитата:

Как это исправить?

-не копировать то, содержание чего вам не понятно.
С уважением, ваш КО!

Автор: Mavrikii
Дата сообщения: 18.08.2015 19:58

dimka11gg

Цитата:

Как это исправить?

ну нет тут телепатов, показывайте свое рукоделие.

stupom
вам не надоело еще флеймом заниматься?

Автор: WONDROUS
Дата сообщения: 14.09.2015 17:14

Не пойму, почему если сделать полупрозрачный фон, то остальные элементы, текст и картинки, на этом фоне делаются полупрозрачными, не сохраняют свои цвет и яркость?

Автор: stupom
Дата сообщения: 14.09.2015 17:21

Цитата:

сделать полупрозрачный фон

Возможно, вы сделали слой полупрозрачным, а не фон, или перепутали слои.

Автор: Mavrikii
Дата сообщения: 14.09.2015 17:47

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

Автор: WONDROUS
Дата сообщения: 14.09.2015 20:32

В одной программе есть расширение (*.js), делающее фон полупрозрачным:

Код: addBackgroundStyle('opacity', '.bgr-opacity{opacity: 0.7; filter: alpha(Opacity=70);}');

Автор: Mavrikii
Дата сообщения: 14.09.2015 20:34

WONDROUS

Цитата:

В одной программе есть расширение (*.js), делающее фон полупрозрачным

она делает, наверняка, аналогично тому, что приведено ниже. а там прозрачным делается не фон, а сам элемент и все, что в нем. полупрозрачный фон может быть только PNG картинка с альфа каналом.

Автор: WONDROUS
Дата сообщения: 14.09.2015 21:18

Mavrikii
Сейчас попробовал применить два расширения для прозрачности, фона и картинок. Фон и всё прочее на нём немного темнеют, а если применить только для вставленных картинок (JPG) работает, они становятся прозрачнее.

Хорошо, а возможно ли сделать так, чтобы только сама фоновая картинка (JPG) немного темнела, не обрабатывая её в редакторе? Или смысла нет?

И ещё, как правильно дописать к этому коду рамку/границу по периметру, белого цвета и, например, 3px толщиной?

Код: addImageStyle('deep-shadow', '.img-deep-shadow{box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.62);}');

Автор: Mavrikii
Дата сообщения: 14.09.2015 21:30

WONDROUS

Цитата:

чтобы только сама фоновая картинка (JPG) немного темнела

JPG не поддерживает прозрачность, а значит нужно делать прозрачным элемент, который его содержит. это повлияет на его детей.

Цитата:

Сейчас попробовал применить два расширения для прозрачности

я не знаю что и как вы делали. PNG прозрачность требует обработки в граф редакторе.

Автор: Xrobak
Дата сообщения: 15.09.2015 02:03

Цитата:

Хорошо, а возможно ли сделать так, чтобы только сама фоновая картинка (JPG) немного темнела, не обрабатывая её в редакторе? Или смысла нет?

Можно. Например, наложив поверху ее слой и этот слой уже сделать темный с прозрачностью.
Первое попавшееся http://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css а если мало, то гугли - там есть готовое.

Автор: Weinaum
Дата сообщения: 19.09.2015 11:54

Приветствую,
что то не могу никак в одном месте сайта с bootstrap применить img-responsive для картинок -
вот в этом месте конкретно картинки логотипов что то никак не хотят уменьшаться в размере в зависимости от ширины экрана.
Что то мешает, или я что накосячил, найти не могу...

Автор: stupom
Дата сообщения: 19.09.2015 12:06

Weinaum, слишком большая страница, разбираться лень.
В любом случае, если надо иметь размер в зависимости ширины родителя или предка - ставьте размер в процентах.
Зависимость от ширины экрана, CSS не устанавливает.
Можно делать для параметров клиента отдельные стили http://htmlbook.ru/css/value/media

Автор: Xrobak
Дата сообщения: 19.09.2015 14:00

Цитата:

вот в этом месте конкретно картинки логотипов что то никак не хотят уменьшаться в размере в зависимости от ширины экрана.

В эмуляторе моб устройства в хромовском дев тулс 2 логотипа уменьшены в размере и как и в десктопной версии умещаются в один ряд. Я не знаю что у вас не уменьшается.
Или все же вопрос некоректно поставлен вами?

Можете просто сделать чтобы логотип в моб версии был один в строку, т.е. занимал всю область по ширине, тогда будет практически респонсив. Делается это элементарно - в медиа запросе задайте для нужного li ширину 100%

Автор: Weinaum
Дата сообщения: 19.09.2015 18:00

Xrobak
да, действительно, в хроме все корректно, у меня ff основной браузер, вот в нем что то тупит...
up. справился вроде бы, добавил стиль для img в текущем классе width:100% и все выровнялось.

Автор: xerpal
Дата сообщения: 22.09.2015 15:25

Есть обычный вложенный список - UL LI, в LI так же встречаются списки. Как этот список вывести в две равные колонки, а не в одну, средствами CSS? Что-то ниче на ум не приходит

» Вопросы по CSS