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

Тема: Помогите новичку с вёрсткой CSS

  1. #1

    Регистрация
    23.08.2005
    Сообщений
    6
    Представляю Вашему вниманию следующию задачу:
    есть макет страницы [attachment=930:attachment], которую с легкостью можно реализовать табличной версткой, но нужно это сделать при помощи CSS.
    У меня получился следующий код
    Код:
    <style>
    #m_body {
    ****width: 800px;
    ****position: absolute;
    ****top: 10px;
    ****left: 50%;
    ****margin-left: -400px;
    }
    #b1 {
     *width: 206px; height: 156px;
     *background-color: Aqua;
     *float: left;
    ****overflow: hidden;
    }
    #b2 {
     *width: 594px; height: 110px;
     *background-color: Blue;
     *float: left;
    ****overflow: hidden;
    }
    #b3 {
     *width: 189px; height: 46px;
     *background-color: Fuchsia;
     *float: left;
    ****overflow: hidden;
    }
    #b4 {
     *width: 185px; height: 270px;
     *background-color: Green;
     *float: right;
    ****overflow: hidden;
    }
    #b5 {
     *width: 220px; height: 270px;
     *background-color: Lime;
     *float: right;
    ****overflow: hidden;
    }
    #b6 {
     *width: 160px; height: auto;
     *background-color: Maroon;
     *float: left;
    }
    #b7 {
     *width: 235px; height: auto;
     *background-color: Navy;
     *float: left;
    }
    #b8 {
     *width: 405px; height: auto;
     *background-color: Olive;
     *float: left;
    }
    #b9 {
     *width: 800px; height: 75px;
     *background-color: Purple;
     *clear: left;
    ****overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div id="m_body">
    ****<div id="b1"><script>for (i=0; i<300; i++)document.write(&#39;b1 &#39;);</script></div>
    ****<div id="b2"><script>for (i=0; i<300; i++)document.write(&#39;b2 &#39;);</script></div>
    ****<div id="b3"><script>for (i=0; i<300; i++)document.write(&#39;b3 &#39;);</script></div>
    ****<div id="b4"><script>for (i=0; i<300; i++)document.write(&#39;b4 &#39;);</script></div>
    ****<div id="b5"><script>for (i=0; i<300; i++)document.write(&#39;b5 &#39;);</script></div>
    ****<div id="b6"><script>for (i=0; i<300; i++)document.write(&#39;b6 &#39;);</script></div>
    ****<div id="b7"><script>for (i=0; i<300; i++)document.write(&#39;b7 &#39;);</script></div>
    ****<div id="b8"><script>for (i=0; i<300; i++)document.write(&#39;b8 &#39;);</script></div>
    ****<div id="b9"><script>for (i=0; i<300; i++)document.write(&#39;b9 &#39;);</script></div>
    </div>
    </body>
    Но вся проблема, что высота колонок b6, b7 и b8 неизвестна.
    Вопрос: как выравнять высоту этих колонок?
    з.ы. Пробывал height=100% и указание нужных отступов, но у менея не работает (высота никак не хочет становиться 100%)

    Заранее спасибо

  2. #2

    Регистрация
    25.07.2005
    Сообщений
    39
    Почитай:
    [Только зарегистрированные пользователи могут видеть ссылки. ]

  3. #3

    Регистрация
    23.08.2005
    Сообщений
    6
    Я так понял нужно использовать фоновые изображения для заполнения всей доступной высоты., но как использовать я пока не совсем понимаю. И вообще я пока плохо представляю как работает вложенность DIV&#39;ов.
    Если кто может пусть кинет ссылку где про это можно почитать на доступном языке и желательно с пояснениями зачем делаем так а не иначе.

  4. #4

    Регистрация
    23.08.2005
    Сообщений
    6
    И всетаки у меня не получается сделать так что бы колонки заполняли все доступное пространство по высоте.

    Если можно покажите бедному начинающиму CSS верстальщику как делать правельно.

  5. #5
    Utyf, на дивах нереально. (прямым способом)
    Проблема в том, что если мы откинем футер, то не сможем разделить макет па отдельные части ни по горизонтали, ни по вертикали.

  6. #6

    Регистрация
    23.08.2005
    Сообщений
    6
    Кирилл, значит это тот из немногих пример, который легко выполнить в табличной верстке, а в блочной нереально??

  7. #7

    Регистрация
    17.08.2005
    Сообщений
    22
    Utyf, вам не нужно выравнивать высоту блоков, а визуально разднлить. Для этого и используется фоновое изображение.

    А сверстать это вполне реально, тем более, если все фиксированной ширины.

    Кстати, почему общая ширина равна 800 пикселей? В экран с разрешением 800×600 не влезет.

  8. #8
    Utyf, реально всё. Если ширина фикс, то можно сделать JS, который будет считать позиции для дивов с position: absolute. Но оно надо?

    kost, а если все 3 тянущиеся колонки имеют разный фон?

    Табличный каркас, а дальше дивы. И жизнь прекрасна.

  9. #9

    Регистрация
    09.02.2004
    Адрес
    Литва/Вильнюс
    Сообщений
    359
    Кирилл, даже если 3 колонки имеют разный фон это ничего не меняет сделать можно!

    Сверстать пример?

  10. #10

    Регистрация
    23.08.2005
    Сообщений
    6
    agat, да будь добр сверстай пожалуйста
    Я то у меня что то не получается

  11. #11
    agat, если без жабаскриптов и в ИЕ все дивы растянутся на пустое пространство по высоте, ты станешь моим кумиром. )

  12. #12

    Регистрация
    09.02.2004
    Адрес
    Литва/Вильнюс
    Сообщений
    359
    [Только зарегистрированные пользователи могут видеть ссылки. ] - воть.

    А тут - [Только зарегистрированные пользователи могут видеть ссылки. ] находится нормальная версия, такой, какой она должна быть на самом деле. IE без костылей лажается по полной

  13. #13
    agat, пожалел бы глаза мои... и не только мои, кстати.
    Сверстал отлично, но единственный момент... а если резина? Маргины и пэддинги сделать в процентах? Имхо не всегда прокатит...

  14. #14

    Регистрация
    09.02.2004
    Адрес
    Литва/Вильнюс
    Сообщений
    359
    Прокатит, если не делать всю ширину равной в сумме 100%, а чуть меньше 99,8% например.

    Оставлять безопасные края

  15. #15
    agat, а зачем?

  16. #16

    Регистрация
    23.08.2005
    Сообщений
    6
    Ндаа, впечетляет
    Сейчас буду разбирать все по полочкам. Надеюсь тогда пойму что да как.
    agat, ОГРОМНОЕ СПАСИБО !!!

  17. #17

    Регистрация
    09.02.2004
    Адрес
    Литва/Вильнюс
    Сообщений
    359
    Utyf, начинай с этого [Только зарегистрированные пользователи могут видеть ссылки. ]

    а потом посмотри на хаки в этом для осла [Только зарегистрированные пользователи могут видеть ссылки. ]

Похожие темы

  1. Помогите с версткой (кроссбраузерность)
    от pro-ger в разделе Дизайн сайтов
    Ответов: 4
    Последнее сообщение: 06.09.2012, 19:43
  2. Проблемы с версткой, помогите
    от kimalen в разделе Вёрстка сайта
    Ответов: 2
    Последнее сообщение: 29.08.2007, 16:14
  3. помогите с версткой пож :)
    от booka в разделе Вёрстка сайта
    Ответов: 6
    Последнее сообщение: 16.02.2007, 22:30
  4. Помогите с версткой.
    от h2so4 в разделе Вёрстка сайта
    Ответов: 16
    Последнее сообщение: 08.12.2006, 00:43
  5. помогите с версткой
    от MANIX в разделе Вёрстка сайта
    Ответов: 7
    Последнее сообщение: 25.06.2006, 15:47

Ваши права

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