Вёрстка № 2 для портфолио

[gordi]

gordi

Как и обещал, держи тебе пример и архив сразу с папкой:

1) http://psywalker.ru/Forum/5-Frash.rar

2) http://psywalker.ru/Forum/5-Frash/main.html

К сожалению, нет времени разбираться в вашей разметке.

Тем более что одновременное использование position:fixed и position:absolute в разметке web-страницы, считаю не правильным.

Поэтому принципиально position:fixed не использую и рекомендую всем от него отказаться.

Вполне достаточно для фиксации блоков на странице абсолютного позиционирования.

На многие вопросы, почему именно так, а не иначе вы найдете ответы на http://fixed.name

Разметка с фиксированным header, может быть такой:

Все колонки имеют плавающую ширину с ограничением по min-width и его эмуляцией для IE6.

Чтобы оценить работоспособность макета, необходимо смотреть его на разных разрешениях, сам каркас страницы адаптирован под разрешение 1024*768.

Также для оценки поведения разметки все блоки имеют border, что дает более полное представление, что и как при тестировании.

Edited October 7, 2009 by gordi

[Clayton]

psywalker

Посмотрел,

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

[psywalker]

psywalker

Посмотрел,

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

Ну вот в том то и минус. А если вдруг мне понадобятся допустим блоки с полупрозрачными углами ПНГ24, что тогда мне делать? Вот тут то уже мой способ как раз работает безотказно! Предложи мне свой способ, который занимает меньше элементов и кода, буду рад увидеть!

[Clayton]

идеи есть... я не пробовал позиционировать бифор и афтер... надо подумать...

[psywalker]

идеи есть... я не пробовал позиционировать бифор и афтер... надо подумать...

Вот очень будет интересно на это посмотреть, правда интересно!

[Clayton]

как вариант вот так http://www.ivblog.ru/test/png_test/sq.html

[psywalker]

как вариант вот так http://www.ivblog.ru/test/png_test/sq.html

слушай, вообще ничтяк, мне нравится, тока ты не мог бы починить всё это дело под ИЕ6-7 плиз для полного эффекта

[mishka]

слушай, вообще ничтяк, мне нравится, тока ты не мог бы починить всё это дело под ИЕ6-7 плиз для полного эффекта

Да и для мозилы 3.0.13

Наверное для ие6-7 это небудет работать так как они непонимают :after :before

[psywalker]

Да и для мозилы 3.0.13

Наверное для ие6-7 это небудет работать так как они непонимают :after :before

1) Чё, неужели в ФФ не работает?

2) Конечно же не будет, я поэтому его отдельно и попросил сделать для ИЕ6-7, там нужен скрипт, он вкурсе

[mishka]

Но идея отличная

[psywalker]

Но идея отличная

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

[Clayton]

слушай, вообще ничтяк, мне нравится, тока ты не мог бы починить всё это дело под ИЕ6-7 плиз для полного эффекта

В ие-7 всё очень просто, с помощью скрипта. А вот в ие6 будут проблемы, с реализацией пнг, ведь позиционируемые родительские элементы, содержащие пнг, делают некликабельными своих детей. Нужно придумать в этом направлении что-то...

Ты как реализуешь прозрачность в 6-м ие?

Да и для мозилы 3.0.13

Наверное для ие6-7 это небудет работать так как они непонимают :after :before

как уже выше говорили, скриптом, отлично работает, а в мозиле, помогает в свойствах бифор и афтер указывать font-size:1px;

или залейте мне куда-нить дистрибутив этой мозилы... у меня какая-то другая стоит

3.5.3 ща вот посмотрел)

[mishka]

как уже выше говорили, скриптом, отлично работает, а в мозиле, помогает в свойствах бифор и афтер указывать font-size:1px;

font-size:1px не помогло... Возможно потому что

При добавлении after к встроенному элементу, значение display ограничено аргументами inline и none. Все остальное будет восприниматься как inline.

http://htmlbook.ru/css/after.html

Я так понял "встроенный" - имеется ввиду "инлайновый"

И еще замечание по хакам для ие6:

*html ... - невалидно

* html ... - валидно

Edited October 10, 2009 by mishka2

[mishka]

http://www.ivblog.ru/test/sq_test/sq.html

Работает отлично

[Clayton]

хаки я не люблю) а бифор и афтер, в ие лечится ява-скриптом)

мысль о фонт-сайзе здесь была http://www.ivblog.ru/test/coder/coder2.htm - во всех браузерах, поначалу было норм, кроме мозилы... мозила, почему-то элементы из content:url пыталась втюхать вначало пункта, вместо маркера списка.

довайте дистрибутив вашей мозилы - поставлю на виртуальную машинку, посмотрим что там не так)

[psywalker]

Clayton

1)

Ты как реализуешь прозрачность в 6-м ие?

Я значит предлагаю следующее: Если в конце-концов вариантов в этом браузере не будет, значит делаем спецом для него:

1. Углы на ПНГ-8

2. Углы на Гиф

2) И давай всё же сделаем этот способ рабочий и в Мозиле и в ИЕ7

[mishka]

хаки я не люблю)

Да кто же их любит? Но есть несколько ситуаций когда без них никак(либо очень сложно). Например абсолютное позиционирование по правому краю или по низу, в ие6 баг на 1px. Если дизайн не строгий то можна пропустить.

Либо использование легенды в форме: баг в ие6-7 на 7px. Либо резиновый контент, когда левому блоку флоат лефт, а правому просто оверфлов хидден: баг в ие6 на 3px. Вот в таких случаях (ИМХО) проще хак написать.

довайте дистрибутив вашей мозилы

Да я же говорю 3.0.13 официальная... так что в инете можна найти. Я вот попытался залить на файлообменник, но с такой скоростью инета как у меня... через 15минут заливания слетело.

Я значит предлагаю следующее: Если в конце-концов вариантов в этом браузере не будет, значит делаем спецом для него:

1. Углы на ПНГ-8

2. Углы на Гиф

2) И давай всё же сделаем этот способ рабочий и в Мозиле и в ИЕ7

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

Может в будующем, когда все браузеры это будут понимать то такой способ станет стандартом верстки пнг блоков с круглыми углами , Clayton патентовать надо

[psywalker]

Clayton патентовать надо

Сначала нужно до ума довести, а потом уже можно делать что угодно

[Clayton]

Clayton

1)

Я значит предлагаю следующее: Если в конце-концов вариантов в этом браузере не будет, значит делаем спецом для него:

1. Углы на ПНГ-8

2. Углы на Гиф

2) И давай всё же сделаем этот способ рабочий и в Мозиле и в ИЕ7

Ну а в ие7 проблема отпадает, ибо кликабельность ссылок в ие6 пропадает, у меня, когда я подключаю бихэвиор, для того что б он пнг24 понимал. При том, кликабельность пропадает, именно в тех случаях, когда элементы позиционируешь, и в них есть пнг. Если же не позиционировать, то и в ие6 всё отображается как надо.

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

В ие7 соответственно, прозрачность пнг работает, по этому и проблем в нем нет.

Ну а с гиф и подавно проблем нет.

Да кто же их любит? Но есть несколько ситуаций когда без них никак(либо очень сложно). Например абсолютное позиционирование по правому краю или по низу, в ие6 баг на 1px. Если дизайн не строгий то можна пропустить.

Либо использование легенды в форме: баг в ие6-7 на 7px. Либо резиновый контент, когда левому блоку флоат лефт, а правому просто оверфлов хидден: баг в ие6 на 3px. Вот в таких случаях (ИМХО) проще хак написать.

Да я же говорю 3.0.13 официальная... так что в инете можна найти. Я вот попытался залить на файлообменник, но с такой скоростью инета как у меня... через 15минут заливания слетело.

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

Может в будующем, когда все браузеры это будут понимать то такой способ станет стандартом верстки пнг блоков с круглыми углами , Clayton патентовать надо

ие 8 уже все понимает, а под 6-7 яву подвязать совсем нетрудно.

попробую мозилку найти, чето не получилось просто с первого раза. На офф сайта архива версий вроде нед...

[mishka]

попробую мозилку найти, чето не получилось просто с первого раза. На офф сайта архива версий вроде нед...

Я вобщет ставил 3.0.7 (давно еще), а потом обновил

[Clayton]

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

[mishka]

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

http://www.mozilla.com/en-US/firefox/all-older.html

[Clayton]

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

Насколько актуальна эта версия сейчас?

[mishka]

Firefox 3.5 17.65%

Firefox 3.0 12.76%

Не так сильно уступает, так что еще актуальна

[psywalker]

Так, значит как я вижу, есть проблемы с ФФ, далее я не увидел решения для ИЕ6-7. Следовательно кроссбраузерного решения данного примера нет, а жаль, очень мне он понравился всё же. Эээх, придётся своим способом делать, надёжным, но большим