За последние 24 часа нас посетил 26641 программист и 1511 роботов. Сейчас ищут 940 программистов ...

Давайте изобретём идеальную резину!

Тема в разделе "HTML и CSS", создана пользователем Freakmeister, 20 мар 2012.

  1. Freakmeister

    Freakmeister Активный пользователь

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Что-то меня запарила эта вёрстка. Под каждый проект приходится верстать индивидуально, 100% кроссбраузерно фиг сделаешь - везде находятся "особенности". Уже какой месяц бьюсь, пытаясь изобрести идеальную резину, но так ничего толкового и не вышло. Народ, предлагаю объединить усилия. Давайте уже соберёмся и перевернём нафиг привычные представления о вёрстке! Сверстаем шедевр, которым потом будут пользоваться не одно поколение программистов. Собственно, озвучиваю требования по порядку:

    1. 2 фиксированных сайдбара и резиновый центр. Фиксированные по высоте футер и хидер.
    2. Обтекание больших картинок центральным блоком, то есть макет должен уметь "разъезжаться" шире окна браузера.
    3. Футер прижат к низу страницы, а при высоком контенте страница тянется вниз.
    4. Возможность сделать header и footer прозрачными, и чтобы под ними не было фона колонок (есть пара идей как это можно сделать).
    5. Все 3 колонки одинаковой высоты, и им можно задать background-image (их можно попробовать эмулировать псевдо-колонками, например).
    6. Без таблиц, ибо с ними в IE глюков будет ещё больше, чем с блоками.
    7. Без JS.
    8. Полная кроссбраузерность, так что тестировать лучше сразу на IE6 и 7.
    9. На количество элементов абсолютно пофиг, ибо с такими запросами уже не до этого.


    Я начну, пожалуй, по порядку. Сегодня с самого утра возился со 2 пунктом - обтекание картинки. Результат сейчас выглядит так:
    http://maestro-magnifico.ru/testdir/2012-03-20/test2.html
    Столкнулся с багом в IE 6 и 7, который не могу пофиксить - margin-right у #center-col (который нужен для компенсации #right-col), отсчитывается от края окна браузера, а не от края содержимого. Если контент шире окна браузера, то margin-right толкает текст в #center-col. Кстати, из-за этого же поведения IE6 и 7 я прижал левую и правую колонки к бокам через position: absolute. float: right точно так же прижимает блок к правому краю окна браузера, а не к правому краю контента.
     
  2. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
  3. Freakmeister

    Freakmeister Активный пользователь

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Ты хоть один готовый макет с такими характеристиками встречал? Я изучил уже гору готовых решений, и знаком с кучей разных вариантов "финтов ушами", которые применяются для реализации отдельных пунктов из первого поста. Но весь этот список в комплексе ещё никому не удавалось реализовать. Для меня это настоящий чалендж, и я обратился на этот форум не для того чтобы мериться пиписьками, а чтобы найти людей, которые разделяют мой энтузиазм.

    З.Ы, Мозг офф, грамматика не к чёрту.
     
  4. NeoXidant

    NeoXidant Активный пользователь

    С нами с:
    8 фев 2010
    Сообщения:
    121
    Симпатии:
    1
    а зачем?
     
  5. Freakmeister

    Freakmeister Активный пользователь

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Чтобы забыть про головные боли, связанные с верстанием. На основе такого макета можно будет реализовать дизайн вообще любой сложности. Блин, вы помогать будете, или только ворчать?)
     
  6. NeoXidant

    NeoXidant Активный пользователь

    С нами с:
    8 фев 2010
    Сообщения:
    121
    Симпатии:
    1
    это никому не нужно

    к тому же, есть http://html5boilerplate.com/

    а "забыть про головные боли" можно, если научитесь нормально верстать и с опытом соберете свой набор наиболее часто используемых хаков
     
  7. Freakmeister

    Freakmeister Активный пользователь

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    И что ты мне тычешь своим html5boilerplate.com? Ещё один горе-конструктор для тех, кто не умеет делать самостоятельно. Я умею верстать, у меня есть и опыт и свой "набор хаков". Просто я всегда стремлюсь сделать чуточку лучше чем есть. В отличии от всяких штамповщиков, которым даже футер прижать лень. Короче, кому эта тема не интересна - я вас сюда не звал.
     
  8. Your

    Your Старожил

    С нами с:
    2 июл 2011
    Сообщения:
    4.074
    Симпатии:
    7
    Уже изобрели, если ты не знал, заказывай =)
    Везде работает ie6 и т.д. все на своих местах все одинокого и ничего не ведет.
     
  9. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    2 фиксированных сайдбара и резиновый центр. Фиксированные по высоте футер и хидер. Это делаетс табличкой
    Футер прижат к низу страницы, а при высоком контенте страница тянется вниз. Это думаю и так известно правда неизвестно еще до конца если футер разной высоты, через js скрипт легко по сути можно
    5. Все 3 колонки одинаковой высоты, и им можно задать background-image (их можно попробовать эмулировать псевдо-колонками, например). По момему тоже особо придумывать не стоит для чего таблицы....
    В ие 7 все идеально работает коглда таблицыы да и в ие6 думаю более менее норм..... Ие отлично поддерживает таблицы а фигово стили.... А смотреть на ие6 это не уважать себя от него все давно отказались