Пример некоторой подгонки стиля

[Мариша]

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

[Rayden]

Мариша
Это еще что, а у меня она влезает два раза:

Добавлено спустя 5 минут 38 секунд:

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

[RedNaxi]

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

[Мариша]

по поводу инфобокса-это да...достал перебоями в работе

по поводу шрифта

уменьшить шрифт на странице

-подправила


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

Добавлено спустя 14 минут 9 секунд:

Мариша
Плюс пункты верхнего меню выполнены разным шрифтом - не комильфо.

я не волшебник,я только учусь (с)


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

[Rayden]

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

По поводу шапки все просто. У тебя сейчас в качестве шапки огромная картинка с цветами и надписью. Раздели ее. Отрежь от нее самое начало, примерно квадратик, там как раз повторяющийся рисунок - и пусти его фоном. Он будет повторяться по горизонтали и засеет всю шапку ромашками.
А надпись Lucky fam... сделай или как я советовал - гифом с прозрачностью, или как RedNaxi советовал - обычной строкой огромным шрифтом, и выведли отдлельным блоком поверх ромашек.

[Палыч]

Загоняешь все кнопки в фотошоп

Мариша Вот здесь почитайте http://www.phpbbguru.net/community/view ... hp?t=14854

Отрежь от нее самое начало, примерно квадратик, там как раз повторяющийся рисунок - и пусти его фоном

Только там придётся немного покумекать с ячейками-строками-таблицами. У вас сейчас этот рисунок идёт как фон ячейки (в которой таблица, у которой две строки, в верхней Регистрация, в нижней меню).

А надпись Lucky fam... сделай или как я советовал - гифом с прозрачностью, или как RedNaxi советовал - обычной строкой огромным шрифтом

Лучше рисунком, так как шрифт красивый сложнее подобрать (если текстом).

[PhoeNiXX]

Я делал шапку так: в фотошопе нарисовал шапку таким образом, чтобы основное название сайта и логотип был слева, далее идет некий фон (не обязательно один цвет, главное, чтоб он был однородным), далее справа конец шапки - тоже рисунок, который как бы вытекает из этого фона. В итоге все выглядит как единое целое. Далее вырезаешь левую часть (для нормального отображения под все обычные разрешения экрана я сделал его шириной 660 pix), вырезаешь повторяющийся кусок (у меня например он шириной 3 pix), и вырезаешь правую часть шапки (у меня получилось 86 pix). Потом в overall_header.tpl занес все это такимп образом:

Код: Выделить всё

<table  width="80%" height="110" cellspacing="0" cellpadding="0" border="0" align="center" background="templates/SubSilver/images/Forum_Header_sp3_ed.jpg"> 
	<tr><td align="left">
<IMG SRC=templates/SubSilver/images/head_l.jpg border=no></td>
<td align="right"><IMG SRC=templates/SubSilver/images/head_r.jpg border=no></td></tr></TABLE>

Forum_Header_sp3_ed.jpg - фон таблицы = повторяющийся кусочек
head_l.jpg - левая часть шапки
head_r.jpg - правая часть шапки
В итоге - при любых разрешениях экрана - шапка выглядит единым целым - увеличивается только повторяющаяся область.
Важно нарисовать все это таким образом, чтобы эта повторяющаяся область не бросалась в глаза и все выглядело единым целым.
P.S. - ширина таблицы у меня 80% - можно задать нужное тебе значение. Для твоего сайта 100% надо ставить.

[Rayden]

Мариша
Можно ваш overal_header? Только вчерашний, плиз. И картинку с ромашками.
На самом деле там всего три-четыре шага надо сделать, не сложных.

Добавлено спустя 3 минуты 8 секунд:

Только там придётся немного покумекать с ячейками-строками-таблицами. У вас сейчас этот рисунок идёт как фон ячейки (в которой таблица, у которой две строки, в верхней Регистрация, в нижней меню).

Нет проблем, делаем третью, посередине и в нее надпись вставляем.

А надпись Lucky fam... сделай или как я советовал - гифом с прозрачностью, или как RedNaxi советовал - обычной строкой огромным шрифтом

Лучше рисунком, так как шрифт красивый сложнее подобрать (если текстом).

Добавлено спустя 2 минуты 50 секунд:

PhoeNiXX
Не путай человека, ей нужно с конкретной шапкой разобраться.

[RedNaxi]

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

[Мариша]

вчерашняя шапка с ромашками

[RedNaxi]

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

[Rayden]

Ну поехали...
1. Отрезаем от ромашек повторяющийся рисунок, у меня получилось 105х80 пикселей. Вот он - lucky2.jpg

Добавлено спустя 6 минут 19 секунд:

2. в хидере заменяем старую картинку на новую:
Находим строчку (у меня 244)
<td width="98%" valign="top" background="templates/skyLineOrange/images/lucky.gif">
и меняем на
<td width="98%" valign="top" background="templates/skyLineOrange/images/lucky2.jpg">
Должно получиться что-то типа этого:

Добавлено спустя 7 минут 22 секунды:

Так, дальше пока сделаю паузу. Попробую разобраться, зачем там аж ЧЕТЫРЕ вложенных таблицы. У меня руки тянуться выкинуть их и вставить одну. Сейчас поэкспериментирую.

Добавлено спустя 14 минут 48 секунд:

4. В районе 270 строки находим такой код:

Код: Выделить всё

</table> 
</td> 
</tr> 
</table> </td> 
</tr> 
<tr> 

<td height="28" background="templates/skyLineOrange/images/panel_2_bg.gif">

И добавляем еще одну ячейку. Именно в ней и будет Главная Надпись. Пока это просто Lucky Families Piter :

Код: Выделить всё

</table> 
</td> 
</tr> 
</table> </td> 
</tr> 
<tr align="center">
<td align="center">Lucky Families Piter 
</td>
</tr> 
<tr>
<td height="28" background="templates/skyLineOrange/images/panel_2_bg.gif">

Добавлено спустя 14 минут 26 секунд:

5. Ну просто надпись шрифтом, как заметил Палыч (он умный, он тоже с Питера ), не слишком хороша, поэтому создаем lfp.gif в котором только одна надпись и вставляем его в созданную нами ячейку:

Код: Выделить всё

</table> 
</td> 
</tr> 
</table> </td> 
</tr> 
<tr align="center"> 
<td align="center"><img src="templates/skyLineOrange/images/lfp.gif">
</td> 
</tr> 
<tr> 
<td height="28" background="templates/skyLineOrange/images/panel_2_bg.gif">

Добавлено спустя 5 минут 42 секунды:

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

Кнопками займется позже - кофетайм.

[Мариша]

спасибо за труды


http://forum.luckyfamilies.ru
вот результат....
жаль только что надпись всё так же мала ...так и должно быть?

только сейчас заметила ...ячейки все стали вкривь вкось...что я опять натворила?

[Rayden]

ээээ... ты не прочла пятого пункта. Там я заменил текстовую надпись картинкой - lfp.gif

Какие ячейки? В разделах? Они и вчера разные были, глянь на мой скриншот вчерашний.

[Мариша]

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

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