резиновые страдания

[Протуберанец]

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

макет.

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

Edited January 12, 2011 by Протуберанец

[sigma77]

Протуберанец,

белый бекграунд в формате rgba? Для ИЕ использовать фильтр градиента.

2-й вариант background-attachment: fixed;

Edited January 13, 2011 by sigma77

[Протуберанец]

RGBA на бэкграунд не проходит валидацию CSS. Насчет аттачмента фиксед не очень понял смысл. Я как вообще пытался делать - сделал контейнер высота 100% ширина 75%, в него уже блоки: шапка, контент и подвал. На бэкграунд всего документа есть вот эти две полоски, а на бэкграунд контента картинка эта светлая. Вот, видимо, из нее нужно вырезать кромки и верхнюю полоску, расставить по местам, а внутри уже бэкграунд из светлых полосок будет, чтоб резина была-то. Так проблема в том как эти два бэкграунда (всего документа и контента) соотнести чтоб полоски совпадали, они ж не зависят друг от друга. Или я не по тому пути пошел, не знаю. Вообще возникло чувство, что для первого в жизни макета ставлю слишком мудренные задачи, я еще не знаю как более простые вещи работают. Взялся по-проще макет делать, но к этой задаче вернусь обязательно.

[psywalker]

RGBA на бэкграунд не проходит валидацию CSS

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

[Протуберанец]

Ну и что дальше? Кому она нужна, эта валидация, что она даст?

Валидация нужна заказчику.

[sigma77]

Протуберанец,

Ну rgba это css3, если проверять в соответствии с этой спецификацией, то валидацию пройдет

Как альтернативный вариант - использовать аналогично полупрозрачную картинку. Т.е. Залить её белым цветом (либо, возможно, подобрать другой) и назначить ему соответствующую прозрачность.

С фиксед фишка в следующем. В соответствии со спецификацией начальной точкой заливки будет верхний левый угол окна браузера. Поскольку начальная точка одинаковая, то фоны будут совпадать. Единственно, это вроде не работает в ИЕ6.

[psywalker]

Валидация нужна заказчику.

Значит он нихера не разбирается в вёрстке, поэтому ты должен взять на себя эти обязанности и объяснить ему всё, чтобы не паниковал зря.

Запомни, на серьёзных проектах всем вообще похрену на валидацию, если она не портит кашу.

[Протуберанец]

sigma77, ок, будем пробовать. Спасибо .

psywalker, мотаю на ус! Спасибо .

[eVErl@Sting]

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

[Протуберанец]

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

[eVErl@Sting]

А что мешает края блока сделать отдельными картинками в отдельных блоках

Смотри, верхнюю черную полоску делаешь поверху в отдельном блоке. Дальше вырезаешь стороны центрального контента и углы, делаешь для них отдельные блоки, блокам по сторонам даешь высоту 100%, блоку с верху ширину 100%, зеленым обозначен центральный блок, делаешь ему фон прозрачной гиф картинкой синего блока, ну просто белый полупрозрачный фон как там на рисунке. Теперь мы видим что на скрине градиент идет, вырезаем его полоской как желтым цветов показано, вставляем отдельным бэкграундом в диве поверх с повторением по горизонтали, блоку ширину 100% и выравниваем поверху..теперь у нас будет с верху в низ градиентный переход..ну а весь контент что будет в нутрии зеленого блока ставим поверх этого всего..

Edited January 13, 2011 by eVErl@Sting

[Протуберанец]

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

[eVErl@Sting]

Смотри выше я скрин и текст добавил

[Протуберанец]

Офигеть ты расписал . Будем разбираться. С первого прочтения мало что понятно.

[eVErl@Sting]

Просто макетик тебе дали ооочень не простой, я так понял это для проверки способностей и навыков, вообще там видно что делали Флэш версию сайта, а тебя попросили на html сверстать? Вообще очень потрясающий макет для оценки навыков верстальщика.

[Протуберанец]

Ну мне его не давали, я сам вызвался. По фрилансу ходил, наткнулся. Заказчик там взял уже опытного за деньги верстать, я ему написал типа попробую сверстать за отзыв для портфолио, он мне ответил ну типа пробуй, если получится запишу вторым исполнителем и отзыв напишу. Там же как бы прилагается не только макет, а все картинки уже нарезаны как надо и уже что-то раскидано, по тому что сделано видно, что фикса ему за глаза, там средняя светлая часть около тысячи пикселей как раз. Ну и идея сидеть подгонять до пикселя меня не увлекла и сразу решил пробовать резину делать, вот попробовал) Навыков верстальщика 0,01%, первый макет мой.

Само задание так звучит:

Всем здрасти. Нужно сделать кроссбраузерную вёрстку. Сайт уже раскидан в div и все картинки сжаты и разрезаны, у меня не получается сделать footer по нижнему краю и фон чтоб совпадал с линиями картинками.

Ваша задача чтобы всё выглядело как на макете, желательно без использования <table> css вынести в отдельный файл, вобщем всё как положено.

Верстка должна проходить валидатор css+html

Лого посредине и флаги языков должны быть ссылками, меню должно предзагружаться и менять картинку например about.png на about2.png

[eVErl@Sting]

http://www.rabotaomsk.ru/vacancy_org.php?account_id=24115

[Протуберанец]

http://www.rabotaomsk.ru/vacancy_org.php?account_id=24115

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

[eVErl@Sting]

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

[Протуберанец]

Вот адрес проекта на фрилансе, вся инфа, что была дана - там.

[psywalker]

Вот адрес проекта на фрилансе, вся инфа, что была дана - там.

Слушай, ты на фотке прям бычара, фанат какой-то команды)))

[Протуберанец]

Я с 13-ти лет периодически занимаюсь тяжелой атлетикой . К фанатам и прочим эсктремистам не имею отношения, просто мирный футбольный болельщик, стадиону предпочитаю уютный просмотр по ящику . Но это уже флуд.

*эКСтремистам. опечатка.

Edited January 15, 2011 by Протуберанец

[psywalker]

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

Да, но ты не похож на верстальщика, ИМХО, тебе нужно чё нить придумать с этим, очки хотя бы одень)))

[Протуберанец]

Блин, ну я не виноват, что у меня плечи широкие и что нравится быть в форме, так сказать . Пусть привыкают к здоровым верстальщикам, очки фтопку .

Edited January 15, 2011 by Протуберанец

[psywalker]

Блин, ну я не виноват, что у меня плечи широкие и что нравится быть в форме, так сказать . Пусть привыкают к здоровым верстальщикам, очки фтопку .

Согласен.