/ Register

Вопрос по вёрстке html (css)

Discussion in 'WEB-ресурсы' started by Digger, Mar 1, 2009.

  1. Mar 1, 2009 #1
    Digger

    Digger Активный участник

    3,840
    56
    Сильно не пинать, в это я совсем не силён и "прокачиваться" не собираюсь, область интересов лежит в другом, так что сайт - чсугубо статика.
    Есть страничка, есть к ней css вида: (привожу часть)

    .page {
    Font-Family: Verdana, Arial, SANS-SERIF;
    Font-size: 12px;
    Text-indent: 20px;
    Text-align: justify;
    Margin-right: 50px;
    Margin-left: 50px;
    Padding-top: 10px;
    Padding-right: 25px;
    Padding-bottom: 10px;
    Padding-left: 25px;
    color: BLACK;
    BackGround-color: #999966;
    }


    Ну и в html, соответственно, используется <div class="page">

    Так вот, ширина "page" задаётся параметрами Margin-right: 50px; Margin-left: 50px; (задаются отступы от краёв)
    Нет ли простого способа задать ширину этого поля в виде "отступ по 50 пикселов с краёв, но если ширина поля выше 1000 пикселов (широкоформатный монитор, например), то отступы такие-то и такие-то).

    Сумбурно конечно изложил, но вопрос, имхо, понятен. :)
     
  2. Mar 2, 2009 #2
    LovelAss

    LovelAss Новичок

    2
    0
    Задай отступы в процентном соотношении, например {margin: 0 5%}, тогда при разрешении 1024px отступы будут по 51px слева и справа, а скажем при разрешении в 1600px будут уже по 80px. И не растягивай ты так стили, паддинги все объедини и марджины тоже div.page{margin:0 5%;padding:10px 25px;} - так намного короче и удобнее.
     
  3. Mar 2, 2009 #3
    хочу_вот_сказать

    хочу_вот_сказать Активный участник

    8,374
    18
    Это из разделов основ резиновой вёрстки. При желании решение находится в гугле за несколько секунд.

    Нам как-то необходимо задать минимальную (min-width) и максимальную (max-width) ширину страницы, на которую тянется "резина".

    Фишка в том, что IE не поддерживает (шестой, по-крайней мере) таких атрибутов. Использовать expression() (читай js внутри css) не рекомендуется, т.к. при ресайзе (ручном, т.е. мышкой) окна с сайтом IE зависает.

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

    Для этого необходимо...

    1. воспользоваться условным комментарием:


    2. создать файл layout.js со следующим содержанием:


    3. изменить твой файл стилей:


    4. Изменить сам макет страницы:
    Так как класс page мы удалили а вместо него объявили стили для объекта с id = "page", то мы должны внести соответствующие изменения в html-макет страницы.

    Класс мы заменили на id дабы проще было получать этот объект через DOM.

    Там, где раньше было class="page" теперь необходимо указать id="page".

    всё.

    ps. на правах рекламы: вэб-разработка с оплатой затраченного времени - 25$ в час (команда из двух программистов со стажем работы 4 и 5 лет).
     
  4. Mar 14, 2009 #4
    Digger

    Digger Активный участник

    3,840
    56
    Маржины в процентах конечно хорошо, но проблемы не решают...
    Привязываясь к этому примеру, в 1600 желательно не 80, а 180px..
    Жаль, что нет простого (для меня) способа.
     
  5. Mar 14, 2009 #5
    pm

    pm Активный участник

    787
    0
  6. Mar 15, 2009 #6
    Digger

    Digger Активный участник

    3,840
    56
    Это же css3... Кто его сейчас поддерживает?..
     
  7. Apr 2, 2009 #7
    Светозор

    Светозор Новичок

    12
    0
    Если нужно просто сделать блок по центру, то нужно сделать:
    Margin-right: auto;
    Margin-left: auto;
     
рх 6600 купить | речной круиз Самара – Казань – Самара с 01.08.2025 по 03.08.2025 | стол обеденный стеклянный | Любая интеграция за 5 минут в Альбато: flexbe rss - Интеграции это просто! | мужской букет из сухофруктов