Блог Webmolot раздает подарки

Новый год на носу, время делать подарки!

Задавайте наболевшие вопросы по верстке, которые мучили Вас долгое время!

С 1 по 31 декабря — я отвечу на все Ваши вопросы, помогу решить косяки и баги совершенно бесплатно.

Комментарии

milax 01 декабря 2008 года, 7:19 #

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

webmolot 01 декабря 2008 года, 8:01 #

Интересный способ эмуляции position: fixed предлагают в студии Лебедева, хотя в 2-х проследних крупных проектах (еще в разработке) я использовал свой способ, о котором хочу написать в ближайшее время в блоге.

Если кратко, создаем div c id=»wrapper» с шириной и высотой 100%, т.е. на все окно браузера и задаем для него position:fixed. Внутри этого блока позиционируем другой блок (обычно это форма залогинивания, регистрации или форма заказа, как у меня на сайте) при помощи position:relative. Для body удаляем прокрутку и делаем ее для wrapper. Таким обазом, форма будет всегда располагаться относительно блока-обертки, который фиксированный относительно body. Минус этого способа — необходимость применения хака для IE.

У меня нет гуру, которым бы я поклонялся. Хороших верстальщиков много, но надеяться приходится только на себя. Если возникают затруднения на помощь приходит 2 друга, яндекс и гугл. Они меня еще никогда не подводили :)

Ежедневно не получается, но с определенной периодичностью посещаю:
http://www.artlebedev.ru/tools/technogrette/
http://habrahabr.ru/tag/css/
http://pepelsbey.net/
и др.

Алексей 01 декабря 2008 года, 8:08 #

А если зададут такой вопрос, на который не сможешь дать ответа? ))

webmolot 01 декабря 2008 года, 8:41 #

Придется искать решение. А кто ищет, тот всегда найдет :)

Алексей 01 декабря 2008 года, 9:36 #

Где можно скачать ие1, заказчик просит сверстать под него, панике!!11 :D

webmolot 02 декабря 2008 года, 1:07 #

Заказчик Ваш, по видимому, 13 лет в коме лежал :)

Пожалуйста, Алексей, качайте IE 1.0 , только Вам придется Windows 95 установить, чтобы работать с этой версией браузера.

Алексей 02 декабря 2008 года, 4:29 #

Пле О_о где ты его достал? )
А вот 95 винду не могу поставить, машина не потянет (
Винда 3.х нормально работает, доволен

webmolot 02 декабря 2008 года, 4:45 #

Билл Гейтс по почте прислал, могу 2, 3 и 4-ю выложить.

Yuriy Drozdov 02 декабря 2008 года, 6:20 #

Какой самый сложный макет приходилось верстать?

webmolot 02 декабря 2008 года, 7:03 #

Чем дальше, тем макеты сложнее. Так и вышло, что последний мой заказ технически оказался самый сложный для меня, т.к. в нем нашлось сразу несколько элементов, с которыми я не сталкивался до этого. К сожалению, ссылку на проект здесь не могу дать, т.к. он сейчас в разработке, к тому же, заказчик попросил не выкладывать его в портфолио. Могу сказать только, что заказчик — известный сотовый оператор.

milax 02 декабря 2008 года, 7:06 #

А где можно посмотреть твое полное портфолио?

webmolot 02 декабря 2008 года, 7:18 #

У меня на локальном диске D в папке portfolio ;)

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

В ближайшее время дополню портфолио новыми интересными работами (5-6)

Андрей Лось 03 декабря 2008 года, 8:15 #

Недавно верстал страницу с большой (1400х1000px) фотографией на фоне (то есть вставлена в div за счет свойства background).

Фотография была сохранена в формате jpg со свойством progressive — хотелось, чтобы она подгружалась с постепенным улучшением качества.

При локальном тестировании страницы проблем при отображении не возникало. При попытке просмотра той же страницы, висящей в интернете через IE и Firefox возникал странный эффект — фотография фона не загружалась с первого раза. После обновления страницы в браузере фотография показывалась (поскольку загружулась из кэша), но вот при первом просмотре и чистом кэше загрузки не происходило.

Проблема решилась после того, как я сохранил фотографию без progressive.

Вопрос — есть ли какое-то техническое ограничение на использование progressive джипегов в background? Или это было волшебное совпадение, а до сути проблемы я так и не дошел? :)

webmolot 04 декабря 2008 года, 2:14 #

IE не поддерживает формат сохранения Progressive! Если Вы сохранили картинку в Progressive, то в IE она будут отображаться подобно формату Baseline, т.е. только после полной загрузки файла. Что касается FF, то в нем должно все работать.

Андрей Лось 04 декабря 2008 года, 7:07 #

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

p.s. странно, почему-то FF тоже вел себя некорректно.

Parkim 05 декабря 2008 года, 13:05 #

Вопрос: в википедию сами себя запиарили? (=

зы -> outline и resize портит ваш чудесный дизайн.

Shivadasa 06 декабря 2008 года, 10:28 #

а что у тебя за диз? сам верстал?

Imprudance 07 декабря 2008 года, 14:18 #

У меня один маленький вопросик?
Как сверстать 3 колонки дивами так, чтобы правая и левая колонки имели фиксированную ширину (ну например 240 и 120px) а центральная занимала всю оставшуюся ширину. Верстка должна корректо отображаться в ie (5,6,7), mozilla(1,2) и opera(8,9).

webmolot 08 декабря 2008 года, 1:26 #

Parkim
Ответ: сам, по рекомендации друзей и знакомых.
при resize в IE7 футер себя ведет некорректно, работаю над этим. ( p.s. Сделал! ) Если Вы еще заметили что-то, что портит мой чудесный дизайн, буду благодарен, если поделитесь.
outline — Вы имеете ввиду формы в браузерах Safari и Chrome?

Shivadasa
у меня такое чувство, что ты спамер, странные вопросы задаешь )

Imprudance
я уже писал про это, Никита задавал вопрос

Спрашивайте — отвечаю | PublicWeb.ru 09 декабря 2008 года, 3:12 #

[...] аналогии c Webmolot’ом, который раздает новогодние подарки в виде ответов на [...]

Beremour 09 декабря 2008 года, 5:42 #

Все же еще раз по поводу верстки типа:
|—–200px—–|———-Резиновый блок———|—–200px—–|

в вашем совете sidebar_left и sidebar_right находятся в разметке выше content, что (как можно понять из статей) считается не очень хорошим раскладом. Может есть «более другой» другой вариант, где вспомогательная информация убрана по разметке вниз ?

webmolot 10 декабря 2008 года, 1:27 #

html код:

<div id="content"><p>центральная колонка</p></div>
<div id="sidebar_left"><p>левая колонка</p></div>
<div id="sidebar_right"><p>правая колонка</p></div>

css код:

#content{float: left;width: 100%}
#content p{margin: 0 200px; padding:10px}
#sidebar_left{float: left;width: 200px;margin-left: -100%}
#sidebar_left p{padding:10px; margin:0}
#sidebar_right{float: left;width: 200px;margin-left: -200px}
#sidebar_right p{padding:10px; margin:0}

смотрим пример

Beremour 10 декабря 2008 года, 2:06 #

этот пример в IE6 выглядит так

webmolot 10 декабря 2008 года, 2:22 #

необходимо установить минимальную ширину для страницы, и все будет ОК
можно так же прописать свойство overflow со значением hidden для #content
смотрим пример в ie6

lyaven 11 декабря 2008 года, 6:16 #

Привет!
Сегодня обнаружил для себя баг в IE6.
IE6 съедает стили border и background (то, что я успел заметить) при переходе блока из visibility:hidden; в visibility:block; (выпадающее меню)
Сталкивался? Как решаешь эту проблему?
(display:none/block; не предлагать)

Алексей 11 декабря 2008 года, 6:39 #

Нужна помощь гуру ))) Переехал с поста о футере
Есть пример , который нормально выглядит в IE и FF, но в Opera 9.24 (а также Safari) Появляется зазор между центральной и третьей колонкой!
Заранее спасибо! ;-)

Ademaro 11 декабря 2008 года, 7:11 #

Есть почти готовый каркас:
http://adus.ru/test/
С ним есть два вопроса:
1.Как сделать, что бы левая “балка” раздвигалась на всю высоту?
2.(необязательно) В IE6 div id=”header” не прибивается к левому краю, почему?
Заранее спасибо.

webmolot 11 декабря 2008 года, 10:27 #

Алексей, ты столкнулся с проблемой прыгающих блоков (в разных браузерах по разному округляются пиксели). Эту проблему очень подробно разбирали в студии Лебедева, они предложили 3 способа ее решения. Все эти способы далеко не универсальны и имеют много недостатков.
Предлагаю свое решение. Чуть выше в комментах похожий пример писал для Beremour, но там боковые колонки фиксированные. Смотрим пример резиновой страницы с 3-мя колонками и футером, прижатым к низу.

webmolot 12 декабря 2008 года, 2:46 #

lyaven, свойство visibility имеет 3 значения: visible | hidden | collapse. Значения block нет!
Но даже эти значения работают частично в IE.

webmolot 12 декабря 2008 года, 3:18 #

Ademaro, ваши 2 проблемы решатся, если примените следующий каркас.
К тому же, вы решите проблему с прижатием футера к низу страницы и контент центральной колонки в html коде будет всегда вверху страницы (что очень круто для SEO).

Алексей 12 декабря 2008 года, 4:42 #

Пример отличный,-лучшее решение! Спасибо,Webmolot’у! ;-)

p.s. Пользователи Firefox версии 2.0 и выше, добавьте для #sidebar_left и #sidebar_right объявление position:relative.

Ademaro 16 декабря 2008 года, 0:06 #

Да, всё бы классно, но! Правая часть тоже должна тянуться до низа, как и левая, а на предложенном каркасе правая (фиолетовая) часть ограничена по высоте контентом….

webmolot 16 декабря 2008 года, 1:01 #

Ademaro, открою Вам маленький секрет. На предложенном макете левая часть так же ограничена контентом, она не тянется вниз, это обман зрения, иллюзии, как хотите называйте :). Смотрим на следующий макет и любуемся имитацией тянущейся правой колонки.

Алексей 16 декабря 2008 года, 1:19 #

Какой DOCTYPE нужно использовать,дабы добиться наилучшей кроссбраузерности?

webmolot 16 декабря 2008 года, 3:12 #

Алексей
Кроссбраузерности можно добиться при использовании любого DOCTYPE или без его указания. Назначая DOCTYPE для веб-страницы, мы говорим браузеру согласно какому стандарту ее необходимо отображать. В этом случае верстка должна соответствовать этому стандарту.
Я использую XHTML 1.0 Transitional.

Ademaro 16 декабря 2008 года, 4:10 #

webmolot, всё бы замечательно, да и про «секрет» тоже всё ясно. Только вместо border должен быть именно background. Для body он уже назначен — туда нельзя, т.е. нужен ещё один див на всю высоту, а куда его пихнуть — пока не понимаю…
p.s.: спасибо за ответы, сразу видно: человек разбирается в своём деле.

INOK 16 декабря 2008 года, 9:28 #

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

INOK 16 декабря 2008 года, 9:37 #

хм, извините, код не прописался корректно

INOK 16 декабря 2008 года, 9:39 #

правая колонка (или левая) если они длиннее вылазят внизу за футером

webmolot 16 декабря 2008 года, 13:52 #

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

webmolot 17 декабря 2008 года, 12:23 #

Ademaro, ты все усложняешь и усложняешь задание )
Но я все же сделал и этот вариант, правда пришлось использовать хаки для IE6 (их нужно вынести в отдельный файл). В общем, смотрите, если есть вопросы, спрашивайте.

Шаповал Дмитрий 17 декабря 2008 года, 12:45 #

1. Сколько времени вы занимаетесь версткой?
2. Как достигли таких успехов? (в двух словах)
3. У меня 4 месяца сплошной практики, но пора бы уже учить теорию.
4. Начал искать и читать кучу блогов, но везде столько разного пишут, огромное кол-во способов решения задачи (на работе дают самое лучшее сразу и всё), а когда начали возникать вопросы и я начал искать самостоятельно решение, то по началу теряюсь. Не подскажите советов как выбрать верное решение проблем при верстке?
5. Снова о блогах: не подскажете ли несколько самых-самых ресурсов по темам:
— css
— xhtml
— jss
— jquery
6. И хотел бы узнать Ваше мнение об одной из последних работ:
http://www.germanlotto.ru/ — время: около 10 часов, опыт: чуть больше 3-х месяцев.

Спасибо за ранее! Успехов в Новом 2009 году:)

Ademaro 18 декабря 2008 года, 1:40 #

position:fixed — отличный вариант! Вы — мастер. Спасибо за помощь и интересную реализацию.

p.s.: Вот только, если для body у меня уже есть background (я писал про это), то в ie это работать не будет?

webmolot 18 декабря 2008 года, 3:41 #

Шаповал Дмитрий, отвечаю по пунктам:
1) ~ 5 лет
2) профильное образование (10% знаний и навыков), самообразование (90%). Можете почитать мою заметку “Путь к успеху. 3Д стратегия верстальщика.
3) согласен с Вами, пора :)
4) методом “проб и ошибок”, побольше экспериментировать.
5) css, xhtml, js — читаем спецификацию
jquery — сюда
6) Многие просят сделать рецензию их работ. Такой сервис я еще не открыл, но в планах есть. На подобие того, что сделал Ярослав Бирзул, только он специализируется в дизайне.
Если в 2-х словах: меню и списки необходимо делать списками (ul) а не абзацами, а там где нужны абзацы (p) не забывать про них (например, здесь: “Вам представляется уникальная возможность…”). При отключеной графике немного теряется функционал сайта. Табличку с чередованием фона строк лучше делать при помощи jquery, а не задавать классы. В IE6 плывет страница Регистрация. В сайдбаре внизу обнаружены неопознанные объекты :). В общем для 3-х месяцев очень даже неплохой результат.

Спасибо! Вам так же успехов и творческих побед.

webmolot 18 декабря 2008 года, 20:02 #

Ademaro. Будет работать и для IE6!
Если Вы заметили, в первой строчке стилей background задается для html и для body, во второй строчке при помощи хака мы переопределяем background для body в IE6 (левой колонки). Background для html (всей страницы) останется.

Julia 19 декабря 2008 года, 0:04 #

Здравствуйте! Я не так давно занимаюсь профессиональной версткой, поэтому вопрос мой будет, возможно, смешной и глупый, но я его самостоятельно решить не могу.. :( Дело в следующем…
Есть див-контейнер с каким-то красивым бэкграундом, прибитый к самому верху страницы (margin-top: 0;). В нем есть див с текстом и/или картинкой, у которого прописан отступ от верхнего края. У меня почему-то всегда при этом див-контейнер отскакивает от верха страницы на этот самый отступ……. Решается эта проблема почему-то прописыванием однопиксельного бордера у дива-контейнера, но физику этого явления я понять не могу.. :( И не всегда это удобно и красиво..

_________________
|       ___________       |
|       |                           |      |
|       |   text, img     |      |
|       |__________|      |
|________________|

Подскажите, пожалуйста, в чем тут дело и как грамотно это решить?

almaz 19 декабря 2008 года, 2:48 #

Юля, замените верних маргин у внутренного блока на верхний паддинг у внешнего блока и не будет проблемы…

vic 19 декабря 2008 года, 4:33 #

В поле ввода в форме использую фоновое изображение (border:0). Так в IE при заполнении поля длинным выражением (больше ширины поля) фон убегает вместе с текстом. В FF, Opere и Chrome все нормально. Если фоновое изображение сделать fixed, то в IE все становиться на свои места, а в остальных — наоборот — фон вообще пропадает (фон фиксируется относительно окна браузера, а не контейнера). Как кроссбраузерно решить данную проблемму?
Спасибо!

Julia 19 декабря 2008 года, 5:02 #

Спасибо, almaz! А что делать, если в контейнере не один блок с текстом/картинкой (display: inline; float: left;), а несколько и у каждого свой отступ от верха?

almaz 19 декабря 2008 года, 5:09 #

Юля: попробуйте вложить их в ещё один контейнер и действуйте как действовали до моего первого совета, должно помочь.

almaz 19 декабря 2008 года, 5:11 #

Vic: присваивайте фон не инпутам, а доп.блоку, в котором и будет лежать input. Давно известное решение.

webmolot 19 декабря 2008 года, 7:02 #

Almaz, спасибо за помощь :)
Как заметил almaz, можно поставить padding для блока-контейнера. Но, если в блоке-контейнере находится еще один блок (плавающий), который должен быть прижат к верху, то padding не подойдет.
В этом случае я назначаю для блока-контейнера определение display:table или overflow:hidden.
Можно также использовать однопиксельный padding или border сверху (снизу) контейнера.

Julia, такое поведение блоков не является проблемой! Блоки в “правильных” браузерах ведут себя так как описано в спецификации. Такое поведение называется схлопыванием полей. На эту тему есть хорошая статья у Эрика Мейера и ее вольный перевод у Ивана Сагалаева.

vic, almaz Вам ответил на вопрос, я делаю так же.

almaz 19 декабря 2008 года, 7:18 #

Опишу ещё одну свою проблему. Касается она ПНГ.

в header.css есть класс:

#h-logo { left: 77px; top: 89px; position: absolute; width: 254px; height: 38px; background: url(”../images/h-logo.png”) no-repeat; }

соответственно в ie6.css присутствует след. код:

#h-logo { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=”../images/h-logo.png”, sizingMethod=”image”); }

но есть следующая проблема: все подстраницы я должен делать в подпапке относительно главной страницы. То есть уровень вложения для AlphaImageLoader меняется. Как избежать создания задвоенных класов для указания уровня вложения для конткретной страницы? JS, jQuery, pngfix — не предлагать.

Спасибо!

Julia 19 декабря 2008 года, 7:24 #

Спасибо вам всем гогромное! Все гениальное, как в очередной раз оказалось, просто! :) Но я все равно не понимаю, _почему_ это лечится именно однопиксельным бордером? Как он может влиять на поведение контейнера? Кстати, мне иногда помогает overflow: hidden; если не принципиально, что происходит за пределами этого дива.. Хотя, я тоже не могу понять, почему оно так работает.. Ну да это, наверно, метафизика.. Непереводимая игра слов. :) Спасибо еще раз! Ваш сайт — единственное место, где я смогла получить _реальную_помощь_, а не предположения, почему оно так отрабатывает, и, может быть, это руки у меня растут не по феншую. :) Спасибо за ссылку на статью, пойду почитаю…

almaz 19 декабря 2008 года, 7:31 #

И ещё:) Что по Вашему лучше: налепить кучу классов и потом тулить их везде или описывать один глобальный блок, а уже в нём без классово изменять стилевые параметры дескрипторов?

webmolot 19 декабря 2008 года, 7:37 #

Успехов, Julia!
Совсем забыл написать про overflow: hidden.
Поля (margin) схлопываются при соприкосании. При добавлении padding и border соприкосания не происходит — вот такое простое объяснение. А hidden отсекает поля друг от друга.

webmolot 19 декабря 2008 года, 8:21 #

almaz, а чем pngfix не устраивает? Если картинок прозрачных не много ( судя по названию идентификатора вы с логотипом работаете ) expression не будет напрягать.

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

Ademaro 22 декабря 2008 года, 1:41 #

Только сейчас обнаружил глюк примера http://webmolot.com/new_year/line3.html (связанный, с position:fixed) в опере 8.5
Есть лекарство какое-нть?

webmolot 22 декабря 2008 года, 3:16 #

Спасибо, полечил.
z-index все расставил на свои места. Пришлось для #content прописать position: relative, чтобы z-index сработал. Т.к. IE7 некорректно масштабирует блоки с position:relative, отменяем при помощи хака это определение.

milax 22 декабря 2008 года, 6:32 #

Есть такого вида пагинация:

Каким образом ее лучше сверстать? Вся пролема в шляпке, которая есть у текущей страницы. Она должна быть всегда посредине сверху. Верстал-верстал, зашел в тупик. В ФФ все нормально, в ИЕ7 немножко плывет, в ИЕ6 вообще ужос. Код приводить не буду, т.к. считаю его плохим. Может быть предложите какое-то нормальное кроссбраузерное решение этой проблемы?

milax 22 декабря 2008 года, 6:58 #

Упс, картинка схавалась.
Даю ссылку: http://publicweb.ru/images/publicweb/pagination.gif

webmolot 22 декабря 2008 года, 7:46 #

Решение довольно простое и красивое, соблюдена семантика и 100% кроссбраузерно. Пользуемся на здоровье!

ps. я такой добрый до Нового года, акция закрывается и всё, никому ничего не скажу :)

milax 22 декабря 2008 года, 7:54 #

Спасибо большое! Все работает. Не догадался я сразу сделать списком…

>ps. я такой добрый до Нового года, акция закрывается и всё, никому ничего не скажу :)
значит надо побольше успеть спросить )

Павлик 23 декабря 2008 года, 3:19 #

Не уверен, что это вопросы по верстке, скорее просто к Вебмолоту, но я попробую.

1. В портфолио у вас почему так мало работ? Когда планируется пополнение?

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

3. Проект flingie: если не секрет, кто был заказчиком? Наши или буржуи?

4. Можно ли вас нанять на постоянную работу (полный рабочий день)? Хотя бы сезонно (например, на 3 месяца, полгода)?

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

6. Если бы не было верстки, чем бы занимались?

milax 23 декабря 2008 года, 3:26 #

Каким способом любишь на формах отмечать обязательные поля? Есть ли пример?

milax 25 декабря 2008 года, 6:59 #

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

webmolot 25 декабря 2008 года, 8:28 #

Павлик
1. Да, не много. После Нового года будет больше.
2. Бывает и довольно часто. Как правило, серьезные заказчики не хотят, чтобы их работы выкладывались в портфолио. Стучите в аську.
3. К сожалению, я не могу распространять какую-либо информацию о своих Заказчиках. Как вы понимаете, это конфиденциально. Могу лишь сказать, что на меня выходил русскоязычный представитель конечного Заказчика, с которым было очень приятно работать.
4. Можно. Главное заинтересовать ;)
5. Скажу честно, сейчас у меня довольно много заказов. К сожалению, я не могу выполнять каждый заказ просто физически, зато у меня есть возможность выбирать. Если я переведу сайт на другие языки, скорее всего, заказов будет еще больше, но не будет времени на их выполнение. Перевод сайта на английский в планах у меня есть, но не могу сказать точно когда я буду это осуществлять.
6. Уделял бы больше времени танцам (сальса) :)

webmolot 25 декабря 2008 года, 8:33 #

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

webmolot 25 декабря 2008 года, 13:28 #

milax
Выравниваем блок с неизвестной шириной по центру страницы.

Юрий 25 декабря 2008 года, 14:27 #

WEBMOLOT привет!
только собирался спросить тебя механизм этого меню:
http://elle.ru/
……………………
Юрий

Юрий 25 декабря 2008 года, 14:32 #

А фактически это оно и есть:
http://webmolot.com/recipe/menu-s-navorotami/
ТАК? :))

Юрий 25 декабря 2008 года, 14:36 #

Когда у вас будет золото?
Мне кажется вот над чем вам надо поработать:
http://www.cys.ru/
А пока только бронза.

milax 25 декабря 2008 года, 15:09 #

webmolot, спасибо! Классное и элегантное решение.

webmolot 25 декабря 2008 года, 23:31 #

Юрий, не доверяю я оценке кибераналитиков, мне как то ближе человеческая оценка. Пока только положительные отзывы о сайте. И 8-е место на webhitech.ru тоже неплохой показатель.

Меню сделано не так как у меня в примере. Во первых — картинками, во вторых таблицами. Дальше пропало желание смотреть. Второе меню на флэше.

ps. отключите картинки на сайте http://elle.ru/ и посмотрите, что получится.

milax 26 декабря 2008 года, 6:46 #

Извини, может я тебя уже и замучал своими вопросами :-[
Есть к примеру текст какой-то. И надо, чтобы всегда в самом конце текста была картинка. Как можно сделать, чтобы картинка не переносилась на новую строку? Т.е. текст, если его много, и картинка не помещается в той же строке, вытесняет ее на следующую строку и она там одиноко торчит. Возможно ли как-то «привязать», к примеру, к последнему слову, чтобы они вместе перепрыгивали?

webmolot 27 декабря 2008 года, 1:20 #

milax
Заключаем слово и картинку в span с white-space: nowrap. После этого картинка будет переноситься но новую строчку вместе со словом.

Алексей 28 декабря 2008 года, 5:04 #

возник давно наболевший вопрос, есть действующий метод вставки png фона в ie6 с параметрами фона background:repeat, то есть чтобы фон дублировался а не размазывался как делает pngfix. Заранее спасибо)

Добрый 28 декабря 2008 года, 15:03 #

Алексей, посмотри тут http://www.twinhelix.com/test/ IEPNGFix v2.0 Alpha

Только советую сильно много не использовать повторяющихся пнг элементов, потому что ие6 может подвиснуть нереально (((

Алексей 28 декабря 2008 года, 16:49 #

Огромное спасибо за совет) И возник еще 1 вопрос: здесь говорилось про чередование фона строк при помощи jquery можете подсказать где об этом можно почитать? И можно ли чередовать не только строки таблиц но и div?

webmolot 30 декабря 2008 года, 2:35 #

Добрый, спасибо за помощь :)
Алексей, чередовать можно все что угодно, в том числе и вложенные дивы. Но на практике дивы мне не приходилось чередовать, т.к. они чаще всего применяются для разметки страниц. Чередование же позволяет наглядно представлять данные, для этого лучше всего подойдут списки и таблицы.

Алексей 30 декабря 2008 года, 4:43 #

Огромное спасибо. Можно сказать что год удался)
Удачи вам в новом году.

Добрый 31 декабря 2008 года, 0:43 #

webmolot, нема за шо, всегда рад помочь ^_^
Уже 31 декабря показывай дизайн который выбрал =)

webmolot 31 декабря 2008 года, 1:18 #

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

webmolot 31 декабря 2008 года, 14:45 #

Ура, товарищи!

31 декабря и я с облегчением могу вздохнуть. Целый месяц мне приходилось отвечать на Ваши вопросы, решать запутанные задачи и капаться в “страшной” спецификации по html/css. Бессонные ночи, сонные дни, все было…

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

Поздравляю всех, кто в < ТЕМЕ /> c наступающим Новым годом! Желаю всем нам, чтобы наша ТЕМА жила и процветала, приносила нам массу удовольствия и всяческих благ :)

ashykoshka 31 декабря 2008 года, 14:59 #

Спасибо…
Успехов тебе и дальнейшего роста в новом году!=)

milax 31 декабря 2008 года, 16:06 #

webmolot, спасибо тебе большое! За то что с профессиональным ростом твои человеческие качества не идут на спад, что частенько бывает у некоторых. Спасибо за то, что никогда не отказываешь в помощи. Удачи в Новом году!

Кольдяев Дмитрий 15 января 2009 года, 5:19 #

Проблема с Оперой:

Есть див.container с фиксированной шириной, в нем еще один .container_inner, для которого ширина задана как auto и есть паддинги справа и слева. Во внутреннем находится контент с заголовком.

Фишка в том, что заголовок должен быть такой же ширины, как и .container, т.е. выступать справа и слева за границы контента .content_inner

Все вышеперечисленное сделано хорошо, валидно и правильно. Прекрасно работает даже в ИЕ6, но…

…Но в Опере ширина .content_inner растягивается по контенту. Соответственно ширина заголовка на всю ширину не растягивается, фон ломается и все становится плохо :(

Задача в двух словах: нужно сделать див шириной 100% минус паддинги. Сделать валидно, кроссбраузерно и т.д.

Вариант использовать маргинов для внутреннего блока не подходит, поскольку ИЕ6 не понимает overflow:visible.

Заранее спасибо.

webmolot 15 января 2009 года, 7:59 #

Дмитрий, спасибо за вопрос!
Но подарки я уже не раздаю, как-никак уже 15 число нового года, а акция длилась 1 по 31 декабря.
Если Вы делали через отрицательные margin’ы для заголовка, то должно все работать и в Opera, если не делали, то сделайте именно так :)
p.s. и не забудьте прописать для заголовка position:relative

Webmolot не раздает подарки! 02 февраля 2009 года, 3:42 #

[...] отвечаем на каверзные вопросы по верстке. Отличие от новогодней акции в том, что сейчас мы играем за вознаграждение. Любой из [...]

Nord 03 февраля 2009 года, 20:44 #

Приветствую!

Столкнулся сейчас неожиданно с такой проблемой:

в бекграунд для body прописываю широкую картинку (1350px)

как обычно — background: url() top center no-repeat;

в ie7, ff все нормально, а вот в ie6 страница почему-то расползается до ширины этой фоновой картинки. Не могу понять в чем проблема.

webmolot 03 февраля 2009 года, 21:07 #

Nord, по тем данным, что вы сказали, все должно быть ОК. Что-то другое мешает и растягивает IE. Бэкграунд не может растягивать блок, даже в глупом «ослике».
Кстати, этот раздел закрыт и на вопросы я не отвечаю здесь.

Запустилась следующая акция!

гавр 27 декабря 2011 года, 10:10 #

скажи как сделать сайт с помощью css и что бы он был резиновый?

admin 27 декабря 2011 года, 10:19 #

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

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com