Как сверстать div'ами

Тема в разделе "Веб-дизайн", создана пользователем Acden, 26 фев 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Acden

    Acden

    Регистр.:
    12 янв 2008
    Сообщения:
    200
    Симпатии:
    12
    [​IMG]

    Как сверстать такую часть макета?
    (Сверху header резиновый на всю ширину)

    Вёрстка должна быть кроссбраузерная, желательно валидная.

    1. Самое сложное для меня. Посоветуйте, кто может: как и куда прилепить этот куст справа?
    2. нижний блок планирую разделить на три части.
    3. Если разделю нижний на три части, не понятно, к чему будет относиться куст?
    4. Если разделю нижний на три части, получится для верхнего нужны будут другие параметры div, т.к. раздел логин смещён чуть левее середины?
     
  2. sotee

    sotee Создатель

    Регистр.:
    10 июл 2008
    Сообщения:
    17
    Симпатии:
    5
    Я бы поставила куст фоном для блока с логином. Нижний блок при помощи отрицательного margin подняла вверх, что бы они пересекались. Порядок наложения блоков задается z-index.
     
  3. Acden

    Acden

    Регистр.:
    12 янв 2008
    Сообщения:
    200
    Симпатии:
    12
    Нет, отошёл уже от таблиц. Да и чем в данном случае таблицы проще? Те же проблемы с этим растением.

    А насчёт отрицательного margin и z-index, отличная идея. Жду ещё вариантов.

    А кто бы на какие блоки разрезал?
    (Подсказка: левый блок уже имеет background-image, которая продолжается в header. Впрочсем этот блок у меня на всю ширину. Планирую к нему справа float-логин делать, а кнопки слева ещё надо подумать)
     
  4. nuke333

    nuke333 Создатель

    Регистр.:
    8 дек 2008
    Сообщения:
    47
    Симпатии:
    12
    имхо, куст можно разрезать на две части (можно не разрезая, через клипы из одной картинки два дива сделать) и абсолютами кинуть с разными z-index'ами
     
  5. Acden

    Acden

    Регистр.:
    12 янв 2008
    Сообщения:
    200
    Симпатии:
    12

    А вот про абсолют тоже отличная идея.

    А как не разрезая, через клипы? Что это значит?:ah:
     
  6. euheni

    euheni Постоялец

    Регистр.:
    6 сен 2007
    Сообщения:
    118
    Симпатии:
    21
    1. куст - отдельная картинка с прозрачным фоном в png или gif
    2. margin
     
  7. Acden

    Acden

    Регистр.:
    12 янв 2008
    Сообщения:
    200
    Симпатии:
    12
    margin для какого элемента? (вёрстка резиновая)
     
  8. ant1-pa

    ant1-pa

    Регистр.:
    3 ноя 2007
    Сообщения:
    448
    Симпатии:
    95
    когда появляются такие сложные вещи, то встает вопрос, нужен ли этот куст =)
    если такой вопрос не возникает, то сделай его фоном в диве логина и пароля.
     
  9. Acden

    Acden

    Регистр.:
    12 янв 2008
    Сообщения:
    200
    Симпатии:
    12
    А как реализовать другое:


    Я хочу чтобы этот куст всегда был на этом месте при резиновой верстке. А вот окно с логином попадало всегда в правый край окна.

    Появилась мысль - сделать 2 дива друг под другом, один логин, другой цветок фоном. Есть идеи порациональнее, как это сделать?
     
  10. vadoru

    vadoru Постоялец

    Регистр.:
    28 янв 2007
    Сообщения:
    122
    Симпатии:
    46
    А что мешает куст сделать фоном абсолютно позиционированного дива с размерами куста и смещать этот див относительно body куда угодно.
     
Статус темы:
Закрыта.