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

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

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

Что в первом окне изменяла кроме /* 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)

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

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

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

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

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

Вот что у меня получилось: и того шапка в 2 раза меньше весит.

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

/* 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}

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

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

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

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