Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Архивы » Мы за оригинальность. Урок с AliKa


Мы за оригинальность. Урок с AliKa

Сообщений 1 страница 10 из 22

1

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

0

2

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

0

3

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

0

4

Чтобы безотрывно за компом сидеть, захожу обычно в 20 - 21 по Москве) На любой тестовик? Тогда вот: http://testing7.anihub.ru/
Здесь мне кажется самое большее количество косяков х)
Делаю все через свой стиль, так по моему удобнее. Ну а по поводу не нравится... Долго искала коды, чтобы можно было без проблем впихивать по 4 элемента (к примеру: шапка, картинка для копирайта внизу, картинка для основного тела форума и задний фон). Вот вроде как нашла, проработала под себя, показалось все очень удобным - использовать такую схему стала чуть ли не везде (даже где элементов и меньше).
Но вот недавно зашла с компа, на котором разрешение не 1280, а 1024 и опа... форум на котором стоит диз (он же сейчас на тестовике) можно нормально просматривать только постоянно вертя прокрутку, которая появляется внизу - что крайне не удобно. Я так поняла, что код который я ставлю, нельзя использовать с шапкой, которая больше ширины форума. Ибо получается вот такая глупость: http://s1.uploads.ru/i/h/g/b/hgb41.jpg
Вот очень хотелось бы справиться с этой несуразицей.
Ну а в остальном, у меня всегда проблемы со вставкой того или иного элемента (в основном самый задний фон). Понимаю, что все по идее должно быть довольно просто, но у меня то не отображается, то налазит как-то криво, то еще что-то с чем-то. Когда задник цветом просто - все легко, но когда картинкой - приходится ломать голову. Хотелось бы и с этим разобраться.

Отредактировано AliKa (2012-06-23 16:24:53)

0

5

AliKa написал(а):

Чтобы безотрывно за компом сидеть, захожу обычно в 20 - 21 по Москве

Буду стараться в это время присутствовать. Правда у меня интернет часто лагает, могу вылетать. ну вообще по ходу дня думаю будем продвигаться.  Если вдруг не будет возможности какое-то время заходить, обязательно сообщай. Я тоже постараюсь без предупреждения не пропадать.

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

Что в первом окне изменяла кроме /* A5.1 */ , /* A5.2 */ и /* D1.4 */

Первое что заметила. Разберем код

Код:
/* A5.1 */
#pun {
  margin: 0;
  position: center;
width: 1202px; margin: 0 auto; float: center;
background: transparent url(http://uploads.ru/i/Z/y/w/Zywiq.png) repeat-y top center;
 }

/* A5.2 */
.punbb {
  float: center;
  height: auto;
width: 870px;
padding-left: 165px;
  }

/* A5.1 */  position: center; - это что такое? кому ты позицию установила?
И нет такого значения.
position: absolute | fixed | relative | static | inherit
на заметку

нам нужно position: relative;

margin: 0;
width: 1202px; margin: 0 auto;

одного margin:  достаточно
margin: auto;

почему у тебя он не по центру.
float: center; вообще достаточно в /* A5.2 */ указать.
и нет такого значения.
float: left | right | none | inherit
на заметку

float: inherit; нам подойдет
и я не поняла зачем так все усложнять. Я про этот кусок
width: 1202px; margin: 0 auto; float: center;
background: transparent url(http://uploads.ru/i/Z/y/w/Zywiq.png) repeat-y top center;
и
width: 870px;
padding-left: 165px;

достаточно ширину форума указать 870. И сделать отступ как padding: 0 18px; То есть получиться само тело форума 888. У тебя слишком широкая рамка получается. 1202, поэтому если экран меньше 1202 появляется прокрутка. Зачем этот отступ громадный? Обрезать до 888 и все. Я обрезала и перезолила. + конечно еще шапка. Но ее разберем дальше.

Как правильно:

Код:
 /* A5.1 */
#pun {
margin: auto; 
position: relative;
width: 870px; 
padding: 0 18px;
background: transparent url(http://s1.uploads.ru/i/Z/X/F/ZXFbl.png) repeat-y top center;
 }

/* A5.2 */
.punbb {
  float: inherit;
  width: 100%;
  height: auto;
}

что непонятно, спрашивай.

Отредактировано Sharell' (2012-06-23 20:43:54)

+1

6

Sharell' написал(а):

Буду стараться в это время присутствовать. Правда у меня интернет часто лагает, могу вылетать. ну вообще по ходу дня думаю будем продвигаться.  Если вдруг не будет возможности какое-то время заходить, обязательно сообщай. Я тоже постараюсь без предупреждения не пропадать.

Ничего страшного) У меня инет тоже иногда может время от времени вредничать. А без предупреждений пропадать не буду) Если вдруг необходимо будет на время отлучаться, то обязательно сообщу)

Sharell' написал(а):

position: center; - это что такое? кому ты позицию установила?
И нет такого значения.

Картинке хд
Честно, я училась всему по некоторым статьям и у подруги спрашивала что к чему, которая уже во всем этом плавает чуть дольше меня. Поэтому не исключаю, что могла вычитать или понять что-то не правильно...
Огромное спасибо за ссылки, раньше их не знала. Буду читать - ознакомляться лучше)

Sharell' написал(а):

float: center; вообще достаточно в /* A5.2 */ указать.

Где-то я наоборот читала, что в этом разделе подобного значения быть и близко не может оО

Sharell' написал(а):

достаточно ширину форума указать 870. И сделать отступ как padding: 0 18px; То есть получиться само тело форума 888.

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

В остальном, вроде как все понятно. Еще и заметочки читаю, которые ты дала)

Отредактировано AliKa (2012-06-23 20:44:40)

0

7

AliKa написал(а):

Картинке

картинке ты установила вот: background: transparent url(http://uploads.ru/i/Z/y/w/Zywiq.png) repeat-y top center;

AliKa написал(а):

Где-то я наоборот читала, что в этом разделе подобного значения быть и близко не может оО

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

AliKa написал(а):

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

Шапку нужно резать - да. а тело форума то зачем.  Шапку мы разберем дальше.

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

0

8

Sharell' написал(а):

картинке ты установила вот: background: transparent url(http://uploads.ru/i/Z/y/w/Zywiq.png) repeat-y top center;

Ой, извини, немного не туда посмотрела. Видно и когда прописывала просто повторилась так неудачно.

Sharell' написал(а):

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

Эм... когда только создаешь, там стоит float: left; оО

Sharell' написал(а):

Шапку нужно резать - да. а тело форума то зачем.  Шапку мы разберем дальше.

Да, логично. Как-то я немного в другую степь думала)

Картинка шапки у меня и так есть, поэтому ее убрала. Вроде как теперь тоже ничего не прокручивается)

0

9

Так. Сделала. Теперь рассмотрим шапку. Для начала давай учиться делать шапки переходящие в фон. Так, чтобы не было прокрутки внизу. Для этого нам надо разделить шапку на часть в ширину форума, и часть самой шапки.
Во-первых. Необязательно делать в png формате. Можно и в jpeg вполне сделать шапку и не бояться что она будет весить много. В общем, сейчас мы будем работать с этой шапкой. А на других примерах будем делать в формате jpeg.
Открываем твою шапку в фотошопе. Идем в «размер холста» (у меня фотошоп на русском), ставим заместо см пиксели и указываем ширину 888 пикселей.  Шапка обрезается до нужного нам размера, сохраняем в формате jpeg. Чтобы меньше весило, про качество во время сохранения знаешь? Теперь можно вырезать ту часть, что мы сохранили, чтобы png вариант весил значительно меньше. Только осторожно, пиксель в сторону и уже криво. Лучше всего ту часть, что вырезала залить цветом, и аккуратно вырезать. Сохранить нашу «вторую шапку» в png.

Вот что у меня получилось: и того шапка в 2 раза меньше весит.
http://s1.uploads.ru/t/s/h/G/shG6N.png
http://s1.uploads.ru/t/N/g/q/NgqDm.jpg

Теперь будем учиться это вставлять в код.

Код:
/* D1.4 */
#pun-title h1 span  {
display: none;
  }

#pun-title table {
border: none;
height: 338px;
width: 1202px;  margin-left: -166px !important;
background-image: url("http://s1.uploads.ru/i/N/g/q/NgqDm.jpg"); 
background-repeat: no-repeat;
background-position: top center;
background-color: transparent;
}


#pun-title td.title-logo-tdl {
	border: none;
	width: 100%; 
}

В этом коде мы вставили ту часть шапки. Что в ширину форума.
height: 338px; - высота
width: 1202px; - ширина 
margin-left: -166px !important; - двигаем шапку чтобы она встала ровно.

Теперь вставляем вторую часть. что за пределами тела форума.
Идем во второе окно.
#pun-title .title-logo span {display: none;} это можно убрать. В /* D1.4 */ указано уже.
Ставим под html

Код:
body {background: url("http://s1.uploads.ru/i/L/N/J/LNJB0.png") top center  no-repeat}

это и есть вторая часть

http://s1.uploads.ru/i/d/r/a/draA1.jpg
вот из-за этого и надо делать макеты и обрезать по ним, чтобы все было тютелька в тютельку.  А то так одна картинка по центру, и другая, дают разные расположения. надо двигать в фотошопе.

Попробуй все с начала, сама сделать у себя на форуме.

Отредактировано Sharell' (2012-06-23 22:01:05)

+2

10

Sharell'
Всегда мечтала научиться так шапку делать ** Но на столько толковых и понятных объяснений не находила **
Сейчас все сама сделать попробую, а потом вдруг чего задам вопросы сразу, если появятся)
По поводу макета же - я изначально всегда с ним работать и стараюсь)

0


Вы здесь » Кот » Архивы » Мы за оригинальность. Урок с AliKa


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC