Jump to content
  • 0

в 3 колонки


folibis
 Share

Question

Помогите сверстать страницу вот такого примерно плана, что то типа 3-колоночного дизайна

plan.jpg

дизайн фиксированный по ширине.

1 - основной текстовый блок сайта

2 - это элементы с заданными размерами (по высоте и ширине).

3 - элемент за счет которого происходит растягивание по высоте. в зависимости от высоты текста в элементе 1 (background-repeat:repeat-y)

Никак не могу сделать. Пытылся даже таблицами но в Опере они не растягиваются по высоте.

а слоями даже и не знаю как сделать.

На самом деле мне нужно сделать что то типа рамки.

Если кто знает, намекните. Буду рад любой помощи

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Сделать такую рамку достаточно просто. Очень много сайтов сейчас так оформляются. Смотрите и делайте по аналогии.

Хотя можно чуть-чуть расписать... Ну смотрите. Вы указали 3 элемента. Верхний назовем Header, нижний - Footer. После BODY свтавляем блок-контейнер для всего содержимого: Wrap. Задаете wrap ширину и выравниваете его по центру окна. Дальше фотошоп. Т.к. ширина блока фиксированнаяЮ то можно просто вырезать нужные части рамки. Т.е. для Header'а вырезаете верхнюю часть изображения рамки (смотрим на ваше рисунок выше), а для Footer'а соответственно - нижнюю. Потом с середины вырезаете кусок высотой 1-2px и все.

Для Wrap'a ставите: background:url(bg-image.gif) center repeat-y;

Для Header'a: background:url(header-image.gif) top left no-repeat;

Для Footer'a: background:url(footer-image.gif) bottom left no-repeat;

Примерно структура HTML-документа должная быть как тут

Link to comment
Share on other sites

  • 0

Если вы не знаете как сверстать наймите человека который сделает это за вас, если вы хотите научится вы взяли неудачный пример, если вы хотите сделать по быстрому сайт (дешевым способом) возьмите готовые шаблоны страниц полностью сверстанных и свободных к распространению, зачем мучать себя.

Link to comment
Share on other sites

  • 0

Azadi: все дело в том что все 3 колонки должны быть равные по высоте. и растягиваться по высоте. т.е. элемент 3 повторяется по вертикали с помощью background-repeat:repeat-y а нижний элемент 2 уходит вниз.

Link to comment
Share on other sites

  • 0

в общем я нашел примерный способ как это сделать. вот

красный элемент это верхний левый элемент 2 а желтый - 3

если бы опять не одно но. в Firefox и в Opera выглядит замечательно а в IE для элемента #d4

надо добавлять margin-left:-200px; для правильного позиционирования

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy