Показано с 1 по 20 из 20

Тема: фон на флоутных колонках

  1. #1

    Регистрация
    14.04.2007
    Сообщений
    136
    Добрый день. Есть такая задача. Есть три колонки. две боковые - статичные, средняя растягивается. Нужно снизу колонок повешать фон без повторений, а незаполненое пространство одного цвета залить. НО, низ колонок должен определятся на высотой колонки, а высотой самой страницы (метод ложных колонок и удлинения вниз тоже). Как быть?
    З.Ы. Как вы рисуете страницы? к примеру как тут[Только зарегистрированные пользователи могут видеть ссылки. ]

  2. #2

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Во-первых, мы их здесь не рисуем, а верстаем. Во-вторых, вот как написано на иллюстрации Ивана Григорьевича – так и верстаем... В-третьих (отвечаю на первый вопрос), многое зависит в Вашем примере от наличия/отсутствия хидера и/или футера...

  3. #3

    Регистрация
    14.04.2007
    Сообщений
    136
    НУ первых два ответа - это к З.Ы. которые по теме не связаны.
    На третий вопрос - хидер есть (общий), а футера нет.
    Связи не вижу. Объясните пожалуйста

  4. #4

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by KukMan@Jul 27 2007, 04:52
    НУ первых два ответа - это к З.Ы. которые по теме не связаны.
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    В самом деле? Вообще-то все, что "по теме не связано" – это оффтоп. Видимо, придется Вам за него получить официальное предупреждение... А "по теме" будет, наверное, теперь уже только днем.

  5. #5
    ну так,а в чем проблема? как основу используй метод ложный колонок...

  6. #6

    Регистрация
    14.04.2007
    Сообщений
    136
    Извините, Aykroyd, вы правы. Не хочу с вами спорить, потому что вы модератор, а я простой пользователь.
    Метод ложных колонок тут не подойдет потому что, средняя колонка растягивается.
    Ну можно поэксперементировать и пробовать делать дополнительный бокс и цеплять два фона (один на первую колонку, второй на вторую), как в статьи [Только зарегистрированные пользователи могут видеть ссылки. ] (способ 2)

  7. #7

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Скажу Вам по секрету, "способ 2" работает некорректно. Как минимум – в Опере. Вы бы показали свой макет целиком, может там все намного проще решить можно. Вот взять хотя бы эти боковые колонки – в них текст будет? Или только два медведя внизу? ) Если текст будет, будет ли он "залазить" на медведей? Если, например, НЕ будет – можно повесить абсолютно спозиционированный прозрачный футер внизу body. И уже на него навесить фоновых медведей...

  8. #8

    Регистрация
    14.04.2007
    Сообщений
    136
    Вот весь макет. т.к. макет должен быть резиновым по вертикали и по горизонтали, я решил, чтобы боковые колонки были синими, а в конце них сделать фоном полоски с картинкой. Форму подписки думал сделать абсолютным позиционированием. Табличку с календарем тоже. Ваше мнение?

  9. #9

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by KukMan@Jul 27 2007, 17:12
    Вот весь макет. т.к. макет должен быть резиновым по вертикали и по горизонтали, я решил, чтобы боковые колонки были синими
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Простите, но цвет никак не связан с "быть резиновым по вертикали и по горизонтали". Суть – хоть серобуромалиновыми...

    Originally posted by KukMan@Jul 27 2007, 17:12
    а в конце них сделать фоном полоски с картинкой.
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Ну вот видите, текст на эти картинки в колонках НЕ заходит. Можете в футер их фоновыми изображениями засунуть. Можете их расписать в коде внутри колонок, но при этом спозиционировать абсолютно относительно body (по его низу). Вариантов масса...

    Originally posted by KukMan@Jul 27 2007, 17:12
    Форму подписки думал сделать абсолютным позиционированием. Табличку с календарем тоже. Ваше мнение?
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Совсем не обязательно. Подойдет и прямой поток внутри колонок...

  10. #10
    Originally posted by KukMan@Jul 27 2007, 12:12
    Форму подписки думал сделать абсолютным позиционированием. Табличку с календарем тоже. Ваше мнение?
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]

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

  11. #11

    Регистрация
    14.04.2007
    Сообщений
    136
    Можете в футер их фоновыми изображениями засунуть.
    Извините за тупость, а как это сделать? тут же нет футера (подвала). Только хидер и три колонки.

  12. #12

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Так создайте его (футер)

  13. #13

    Регистрация
    14.04.2007
    Сообщений
    136
    Допустим у нас будет футер. Его привязываем к низу окна (абсолютным позиционированием).
    Но у нас ширина окна заранее неизвестна. Как поставить фон и для левой и для правой колонки?

  14. #14

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Левый фон – фон самого футера. Правый фон – фон какого-нибудь вложенного в футер другого блока...
    Но в приведенном Вами примере можно и без футера обойтись... Создаем блоки с нужными фонами внутри колонок и позиционируем их абсолютно относительно body... Должно получиться...

  15. #15

    Регистрация
    14.04.2007
    Сообщений
    136
    ок. спасибо. буду мучать.
    и еще вопрос не по теме но по макету выше. Как сделать такую форму, как на макете? кроме указания border&#39;a еще нужно что-то указывать?
    (как в списках list-style:none?

  16. #16
    Originally posted by KukMan@Jul 27 2007, 13:24
    ок. спасибо. буду мучать.
    и еще вопрос не по теме но по макету выше. Как сделать такую форму, как на макете? кроме указания border&#39;a еще нужно что-то указывать?
    (как в списках list-style:none?
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    background-color:transparent

  17. #17

    Регистрация
    14.04.2007
    Сообщений
    136
    Мне пришла мысль. Вполне рабочая.
    Если сделать один большой бокс. Растянуть его по всей ширине. Высота определяется содержимым.
    В нем делаем еще два бокса - один на лева флоутим, второй направо. Ставим им высоту в 100%. В родительском боксе делаем отсупы по бокам для колонок и туда пишем контент. получится типа того.
    <div id="content">
    <div id="column1"> </div>
    <div id="column2"> </div>
    Тут контент блаблабла
    </div>.

    #content {width:100%;margin:0 200px;}
    #column1 {width:200px;height:100%;float:left;background:#ff f url(&#39;images/medved.gif&#39 left bottom no-repeat;}
    #column1 {width:200px;height:100%;float:right;background:#f ff url(&#39;images/medved.gif&#39 right bottom no-repeat;}


    Кто что думает по этому поводу?

  18. #18

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by KukMan@Jul 27 2007, 19:33
    Кто что думает по этому поводу?
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Думаю, что шибко Вы размечтались, однако... ))

  19. #19

    Регистрация
    14.04.2007
    Сообщений
    136
    Ачо? не будет работать? я так сделал в хидере - работает

  20. #20

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Ну-ну) У хидера тогда указание явной высоты в CSS уберите... и посмотрим, что и как у Вас там заработает...

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •