CSS-дизайн

Здесь хотелось бы для себя и для других пользователей в ходе того как буду разбираться с дизайном этого модуля описывать выполнение тех или иных элементов)

Возможно вы уже настроили своё сообщество и захотите поделится опытом)
Велком!

Итак фон
На сколько я понимаю фон сообщества закреплён селектором
#main
вот здесь то мы и начинаем экспериментировать с настройкой
прописываем
#main
{background: url(адрес изображения) repeat;}

Данный код повторяет ваш фон на странице
Если вы пропишете так

#main
{background: url(адрес изображения) no-repeat center;}
ваш фон не будет повторяться, а зафиксируется один раз в центре отписывая right, left
вы можете закрепить изображение справа или слева)

Но пять же повторюсь я совершенно ещё не разобралась с настройкой данного модуля по ходу дела буду описывать что получилось)

Это сообщение отредактировал Toria - 09-11-2012 - 11:00

Я буду заглядывать сюда ... :)

Буду очень рада Вас видеть, возможно у меня возникнут вопросы в ходе настройки)
На самом деле в своё время благодаря настройке блогов на СН очень многое узнала о CSS

Я сам пользуюсь как справочником этим сайтом: http://htmlbook.ru/css/cat/atrules

могла бы и раньше позвать,я бы свою "лепить" не стал )

Вов ну я ж не знала))) Позвала бы ещё вчера))))

(Румпельштицкин @ 09.11.2012 - время: 11:18)
Я сам пользуюсь как справочником этим сайтом: http://htmlbook.ru/css/cat/atrules
Ага тоже периодически юзаю этот сайт))) Ну и гугл конечно тоже в помощь)))

Так таблица цветов, в помощь тем у кого нет фотошопа, хотя я зачастую беру цвет пипеткой)))

тык

Это сообщение отредактировал Toria - 20-07-2013 - 15:23

Ещё ссылочка очень полезная утащена у Потёмкина из сообщества
http://jigsaw.w3.org/css-validator/

Я вроде разобрался с кнопками))). У Потемкина выложил... ну и у Палыча заодно)))

(Tchuba @ 11.11.2012 - время: 23:55)
Я вроде разобрался с кнопками))). У Потемкина выложил... ну и у Палыча заодно)))
Саш ну ты даёшь, я бы не разобралась с эти наверное никогда)))) А ты решил этот квест!

По этой ссылке можно про кнопки почитать и про то как их менять
Тынц

О CSS можно говорить бесконечно много и долго, поэтому начну с самого простого)))

Итак фон обозначение - background:
селекторы или как обозначено на картинке выложенной админом id


каждый из них может иметь свой фон то есть background:
фон может быть залит цветом отписывается например так
background:#ffffff;
я здесь отписываю белый вы можете брать любой из таблицы цветов или фотошопа

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

бесшовный фон
background: url(ссылка на фон) repeat;

градиент *делается полосочка к примеру вертикальная с градиентом*
background: url(ссылка на фон) repeat-x;

градиент *делается полосочка с горизонтальным градиентом*
background: url(ссылка на фон) repeat-y;


далее можно так же делать фон из картинки и фиксировать эту картинку вверху блока (top)
справа(right)
слева(left)
снизу(bottom)

Например верх-право картинка не повторяется крепится к верхнему правому углу блока
background: url(ссылка на фон) no-repeat top right;

ну и так далее в различных вариациях продолжение следует)

Это сообщение отредактировал Toria - 14-11-2012 - 02:00

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

Padding - это пространство между содержимым элемента и бордюром.

задаётся следующим образом
padding-bottom
padding-left
padding-right
padding-top


если же вы прописываете
padding:1px; то отступ применяется со всех сторон элемента в данном случае 1пиксел)

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

два значения - первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.

три значения - первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.

четыре значения - поочередно устанавливается поля от верхнего, правого, нижнего и левого края.

padding:25px(верх) 5px(право) 5px(низ) 55px(лево);

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

Однако, да интересно почему))) тоже не знаю)

Продолжу про отступы)

Если прошлый раз были так называемые внутренние отступы то margin это отступы наружные)

margin - Устанавливает величину отступа от каждого края элемента.

margin-bottom - низ
margin-left - лево
margin-right - право
margin-top - верх


если же вы прописываете
margin:1px; то отступ применяется со всех сторон элемента в данном случае 1пиксел)

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

два значения - первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.

три значения - первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.

четыре значения - поочередно устанавливается поля от верхнего, правого, нижнего и левого края.

margin:25px(верх) 5px(право) 5px(низ) 55px(лево);

auto - указывает, что размер отступов будет автоматически рассчитан браузером.
inherit - наследует значение родительского элемента.

Делая дизайн вы можете часами фотошопить и подбирать фон, для того что бы проверить бесшовный фон как он выглядит, надцать раз не загружая его на дизайн делаем такое))) Когда-то откопала в инете))))


1. Создаем в блокноте документ с текстом:
<html>
<head>
<body background="рисунок.jpg">
</body>
</head>
</html>

2. Сохраняем докумет, как - название.html
3. Рисунок должен находиться в той же папке, что и сам сохраненный документ.
4. Вместо "рисунок", вставляете название вашего фона (не забывая писать разрещение, наприменр: fon.jpg)
5. Сохраняем, кликаем по документу два раза, он откроется в браузере и вы увидите плод ваших трудов

Пример как может выглядеть блог и гильдия: http://papa.sxnarod.com/

Очень круто конечно!!!
Вы же код знаете как свои пять пальцев, где что у вас тут прописано, а мы как сапёры по минному полю пробираемся) Это я к тому что всё же стоит обозначить основные блоки, но возможно это и будут ведь неделя ещё не прошла)


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

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

Одно дело когда посмотрел как сделан какой то элемент полез почитал и вывел подобное себе в код, но когда целиком, не айс это.

В дизайне этой группы надо положить большой фон в <body>. На большом разрешении по бокам просто синий фон, а напрашивается что-то красивое.

В смысле запихнуть верх в боди и добавить по бокам ещё бекграунда какого-то через майн?

(Toria @ 03.12.2012 - время: 01:08)
В смысле запихнуть верх в боди и добавить по бокам ещё бекграунда какого-то через майн?
Он имеет в виду боди без #

Да. Можно целую картинку положить или разрезать на 2 части и чтобы они с боков от таблицы с группой были.

Вот только не пойму если разрезать на две части)

Картинку заглавие в навигейшин впихнуть, правое в боди а левое в майн, так мне думается)))

Итак как показывает опыт можно картинку банер установить в селектор

и картинку фон установить в ИД
если шапка высокая здесь обязательно возникнет необходимость прописать отступы

body
#head
#main

бесшовники лучше ставить в, здесь появляется возможность использовать два фона
#main
body

А так же нужно прописывать размер

width: размер в пикселах px; - ширина
height: размер в пикселах px; - высота



Это сообщение отредактировал Toria - 18-12-2012 - 11:50

Такая красота - сразу настроение - новогоднее ))!
А можно - пару вопросиков?

Конечно мона)))

Викуль, подскажи, пожалуйста, а как заменить цвет на панельке с логотипом Sxnarod ?
И ещё - как убрать серый фон слева и сверху?

Так панелька с лого у нас прописана туточки

#head {
background:# цвет;
margin:20px auto 40px;
padding:7px;
height:24px;
border-radius: размер px;
border: размер px solid #цвет}


А где серый фон? Давай скрин не очень поняла))))

Это сообщение отредактировал Toria - 19-12-2012 - 23:38

Вот скрин):



Серое - там, где слово "Блог" и где "Страницы..."

Прописываешь так

#container {background: #68838B;
border: 5px double #E0EEEE;
border-radius: 6px;
box-shadow: 0px 0px 10px #607B8B;
}

Просто убрала прописанную картинку в контейнере)

Огромное спасибо, Викулечка !
Что-то - уже вырисовывается))!

На здоровье Мариш, если что спрашивай будем разбираться вместе)

Вика, подскажи, пожалуйста, а где прописывается цвет текста со страницы настройки блога?
"Настройка дизайна. Пишите здесь свой CSS.", "Список забаненных" и т д). Что-то запуталась)).