Большая фотография

[Чудной Лис]

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

Всё работает на IE6, FF2, O9, на других не проверял.



Идея состоит вот в чём. Как бы мы ни старались, фотография всё равно не будет видна на главной - там показывается пересжатая уменьшенная копия. Поэтому мы её меняем на прозрачную, которая и весит мизер, и не видна А настоящую нашу картинку мы указываем фоном для этой области. Единственно, необходимо указывать значение высоты (выделена жирным) для каждой картинки отдельно. В моем случае для картинки высотой в 280пх использовано значение 260пх.



1. В качестве фотографии нам нужно закачать прозрачную, вот такую:

2. А также, ннам понадобится картинка, которую мы хотим вместо фотографии.

3. Вводим такой код:



#thisDiaryInfo

{

background:url('путь к картинке на замену');

background-repeat:no-repeat;

background-position:top 100%;

}

#thisDiaryPhoto

{

height: 260px;

}

Comments

[Space.Cat]

Не катит... Фота все равно маленькая((

[Space.Cat]

к тому же закрывает название днева...

[шкурка дохлого енота.]

спасибо безразмерное!! х) в ходе экспериментов всё получилось, заказчик доволен

вы мне оччень помогли, благодарствую)

[Чудеснов]

Space.Cat а вот это уже другая история (хотя решение копеечное)

[Space.Cat]

Alex.Chudd и какое? куда вам копейку перечислить за решение? )))

[Чудной Лис]

Space.Cat

Какую укажете, такая и будет

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



Куська.

[Чудеснов]

Space.Cat надо картинку такую взять, чтобы у нее сверху была область ок. 20 пикселей в высоту прозрачная.

[Space.Cat]

Alex.Chudd да уже давно все сделала

Спасибо больше

[Чудеснов]

Да я вроде этот коммент целых две недели назад отправлял

[Space.Cat]

Alex.Chudd

[Riya Schaf]

а можете написать код для отступа сверху позязя? ^^

[Чудной Лис]

~.MYV.~

Отступа сверху от чего?

[Riya Schaf]

Чудной Лис

от названия дневника)

а то фотография его перекрывает оО

[Riya Schaf]

Чудной Лис

ой, уже сделала))

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

потому что у меня она находится в верхнем левом углу..

[Чудной Лис]

~.MYV.~

Вы имеете ввиду фотографию или её замену по моему способу? Если последнее, то пропишите туда background-position: x y; и поиграйтесь с ним

[Riya Schaf]

Чудной Лис

смотрите, вот так она расположена сейчас -

невооруженным глазом видно, что она расположена в верхнем левом углу))



вопрос: как сделать, чтобы она располагалась в центре, м? : )

[Чудной Лис]

background-position: 50% 50%;

думаю, получится.

[Riya Schaf]

Чудной Лис

во! получилось! только там нужно было везде по 50% ставить)))

пасибочки большое : )))))

[fuehrer Adolf Hitler]

а вот у меня получается вот такая вещь:

О_о

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

[StarAnastasy]

Абель

Возможно, неправильно задан height или не задан вообще

проверь, что там в коде

[Чудной Лис]

Абель кошечка мяу

Всё правильно! Я же написал, что надо загрузить в фотографию "прозрачный пиксель" А иначе будет вот так.

[fuehrer Adolf Hitler]

Чудной Лис

я сделал, а все равно не получается... о___О

[Чудной Лис]

Абель

Если не получается, значит сделал что-то не так. Либо пользуешься "левым" броузером.

[fuehrer Adolf Hitler]

Чудной Лис

хрень какая-то*)

либо я что-то не могу понять с этим прозрачным пикселем... О_о



у меня Опера и ФФ.

[Чудной Лис]

Абель

Надо вместо фотографии загрузить картинку 1х1 с прозрачным пикселем. Под Оперой и ФФ работает 100%.

[fuehrer Adolf Hitler]

Чудной Лис

ах вон оно что*)

все, теперь понял, я просто дубина х)

Так как сделать отступ сверху..не изменяя фотки. А то названия не видно

[~Takanori]

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

[Riya Schaf]

~Takanori
и что не получается? оО
вставляешь код

#thisDiaryInfo
{
background:url('путь к картинке на замену');background-repeat:no-repeat;background-position:top 100%; background-position: 50% 50%;}
#thisDiaryPhoto{height: 260px;}

у меня так, и все работает ><

[~Takanori]

Ща поглядаю