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

понедельник, 01 февраля 2010

11:59

все записи пользователя в сообществе тигр-тигр, жгучий страх

они всё-таки будущие лётчики, а у меня цветы.

Здравствуйте.

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

Пишу код:

 .singlePost { width: 632px !important; height: 72px !important; background: url('/userdir/8/2/9/0/829005/51391736.jpg') no-repeat; margin-top: 500px !important}
 .postContent { width: 632px !important; background: url('/userdir/8/2/9/0/829005/51391931.jpg') repeat-y !important; }

Всё отлично.

Добавляю нижнюю часть:

.postInner {width: 632 !important; height: 308px !important; background:url('/userdir/8/2/9/0/829005/51392432.jpg') no-repeat 50% 100;}

Фон перестаёт динамически менять размер. Плюс перекашивается дизайн внизу дневника.

Это можно как-нибудь решить?
Если нужно, напишу весь код.

@темы: отступы, фоновые картинки

URL

Повсюду в самых живописных местах стоят симпатичные такие... ужас, в пятницу жутко нос чесался, но болела голова. Выпи... http://boni2.narod.ru/ После того, как я покурочил с...

Сейчас всем офисом смотрели мультики из NeverHood'a... ... - Все по-старому...- сказала нежно.- Все по-старому... ... Очень симпатичная изящная молодая женщина привела на прие...

Комментарии

01.02.2010 в 16:23

Katze

Cogito ergo sum

Конечно, он не будет менять размер динамически. Пост-то находится внутри .postInner, а ты задаешь ему фиксированную высоту "height: 308px".
Вообще, решить эту задачу можно, при условии, что твоя подложка не будет иметь постоянных границ. Иначе они всё равно будут рваться.
Попробуй взять такие блоки:
верх - .postDate,
середина - .singlePost (бэграунд выровняй по середине вертикали или сделай повторяющимся по оси y - "repeat-y"),
низ - .postLinksBackg.
Я не очень уверен, что получится именно тот результат, который тебе нужен, но поэкспериментировать стоит, имхо.

Посмотреть, какие блоки стоит взять, можно тут.

URL

01.02.2010 в 20:03

усы, лапы и хвост.

Почеши?

Хм. На блок даты были планы, но всё же попробую, спасибо.

И это.
середина - .singlePost (бэграунд выровняй по середине вертикали или сделай повторяющимся по оси y - "repeat-y"),
В данном случае повторяющимся, иначе как он растянется?

URL

01.02.2010 в 20:45

усы, лапы и хвост.

Почеши?

Фейл, дата же у постов пишется только один раз в день, в остальных случаях - блока просто нет.
Успешно впихнул этот фон в .header, всё встало ровно, всё отлично, но почему-то этот же кусок картинки висит чуть выше первой записи.
Что это может быть, откуда он там и как это правится?

URL

01.02.2010 в 22:07

Katze

Cogito ergo sum

Скриншот покажи?

URL

01.02.2010 в 22:15

усы, лапы и хвост.

Почеши?

Ну.
тыц.

И так только над самой первой записью.

URL

01.02.2010 в 22:55

Katze

Cogito ergo sum

Висит он потому, что данный блок тоже относится к .header (он называется .header order_button).
Ради эксперимента можно попробовать назначить ему цвет подложки, чтобы закрыть картинку. Но наверняка есть более изящные решения.
Например, отпозиционировать бэграунд в .header так, чтобы был отступ сверху (допустим, 80px сверху - это будет выглядеть так:

background: url('адрес') 0 80px;

Что проще - не знаю.

URL

02.02.2010 в 12:13

тигр-тигр, жгучий страх

они всё-таки будущие лётчики, а у меня цветы.

Позиционировать фон в .header не получилось. Эта часть фона пропадает везде.
И цвет .header order_button назначить не получается. Пробовал и цвета, и transparent.

Второй день мучаюсь, ничего не могу придумать.

URL

02.02.2010 в 12:32

тигр-тигр, жгучий страх

они всё-таки будущие лётчики, а у меня цветы.

Всё оказалось по-идиотски просто. >_<

.order_button {display:none}

URL

02.02.2010 в 14:42

Katze

Cogito ergo sum

.order_button {display:none} - и у тебя пропадает блок сортировки записей. Если это не критично, то, конечно, можно.

URL

02.02.2010 в 22:06

усы, лапы и хвост.

Почеши?

Не критично совсем.
Но теперь у меня новая проблема: на странице с комментариями весь этот фон разъезжается.
Думаю, что я неправильно использовал позиционирование.
Вот код:

 .header { width: 632px !important; height:100px !important; background: url('/userdir/8/2/9/0/829005/51427019.jpg') no-repeat; position: relative; top: 15px}
 .postContent { width: 632px !important; background: url('/userdir/8/2/9/0/829005/51427049.jpg') repeat-y !important; }
 .paragraph {position: relative; width: 550px; left: 20px; top: 20px; z-index: 10}
 .postLinksBackg { width: 632px !important; height: 189px !important; background: url('/userdir/8/2/9/0/829005/51427271.jpg') no-repeat; position: relative; bottom: 5px; margin-bottom: 20px !important}
 .postLinks {position: relative; right: 80px; top: 60px}
 .urlLink {position: relative; left: 20px; top: 60px}
 .pageBar {position: relative; left: 35px; top:6px}
 .order_button {display:none}

Может, можно как-нибудь отдельно позиционировать эти блоки в комментариях, независимо от блоков главной страницы?

URL

03.02.2010 в 01:29

Katze

Cogito ergo sum

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

display: block;
position: relative;

Когда пропишешь эти атрибуты, блок можно будет смещать в какую хочешь сторону. Координаты надо будет считать от его местонахождения "по умолчанию".
Можно будет использовать для позиционирования такие атрибуты, как top, bottom, left, right (им можно присваивать отрицательные значения), height, width.
А еще лучше - поищи в сети учебники, благо их много.

URL

03.02.2010 в 07:28

усы, лапы и хвост.

Почеши?

Это я знаю, речь о другом.
Я использовал три блока: .header, .postContent и .postLinksBackg, разместив их так, чтобы получился один целый фон записи.
Это на главной странице
Но на странице с комментариями они съехали. Так вот можно ли поправить поправить их на странице с комментариями так, чтобы ничего не перекосилось на главной?
Ведь это же одни и те же блоки.

Или вообще убрать там этот фон.

URL

03.02.2010 в 18:47

Katze

Cogito ergo sum

Можно посмотреть, как это выглядит в дневнике?
Если конфиденциально - можно перейти в у-мыл.
Просто мне надо глянуть через Firebug (кстати, золотой плагин для Firefox, наглядно можно посмотреть прямо на странице, где какие коды, и что надо менять).

URL

03.02.2010 в 18:57

усы, лапы и хвост.

Почеши?

Можно конечно.
tishe-tishiny.diary.ru

А через Firebug смотрю как раз сейчас.
Это как раз и есть те блоки, которые я использовал.

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

UPD: А в общем-то, со всем разобрался. Просто были лишние блоки, названия которых я не знал.
Осталось только выровнять и всё, спасибо большое.

URL

03.02.2010 в 19:37

Katze

Cogito ergo sum

И что-то сделать с блоком #Stats a, потому что сейчас это огромное поле справа.
Разумно, имхо, будет ограничить его размером зайца. А для этого padding, конечно, ставить не 1000px, а гораздо меньше.
Двигай блоки не паддингами, а в координатах left-right.

URL

03.02.2010 в 21:00

усы, лапы и хвост.

Почеши?

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

Его можно сделать невидимым?

И тогда уж спрошу ещё: время в комментариях не умещается в мою маленькую бумажку.
Можно ли изменить формат отображения времени или же просто передвинуть его, независимо от времени на главной странице дневника?

URL

03.02.2010 в 21:30

Katze

Cogito ergo sum

1. Баннер можно перенести куда угодно. Смотришь код, делаешь блоком, задаешь координаты.
2. Можно уменьшить шрифт даты и времени (где-то среди .header span), тогда уместится.

URL


Запомнить

@CSS — стилизация дневников