LINUX.ORG.RU

[HTML] Трехколоночный макет с резиновой серединой и прозрачными краями

 


0

1

Понадобился мне сабж. Нагуглил много рецептов для трехколоночного шаблона с резиновой серединой, в частности такую штуку. Их вариант и взял за основу. Но во всех примерах в качестве фона исользуют заливку цветом, а у меня картинка с прозрачным краем. В итоге по краям получилась такая кака.

Куски css и html:

#content { clear: both; width: 100%; position: relative; height: 200px;}
#content_left { float: left; position: relative; margin-left: -100%; width: 19px; height: inherit; background-image: url('../img/left_border.png'); }
#content_right { float: left; position: relative; margin-left: -19px; width: 19px; height: inherit; background-image: url('../img/right_border.png'); }
#content_container { float: left; width: 100%; overflow: hidden; }
#content_middle { padding: 0 19px 0 19px; background-image: url('../img/paper_bg.png'); }

<div id="content">
  <div id="content_container"><div id="content_middle">{% block content %}{% endblock %}</div></div>
  <div id="content_left"></div>
  <div id="content_right"></div>
</div>

Можно ли как-нить это победить? Сам придумал лишь одно: отказаться от текстуры для background у body и использовать просто цвет, убрав прозрачность у соответствующих элементов.

★★

1) зачем тебе текстура у body?

2) что тебя не устроило в полученном результате?

wfrr ★★☆
()
Ответ на: комментарий от wfrr

1) Так красивее 2) То, что текстура content_middle видна из под content_right (я понимаю, что так и должно быть в данном случае. Вопрос в том, как сделать так, чтобы не торчало)

kulti ★★
() автор топика
Ответ на: комментарий от kulti

сделай ей margin\padding по размерам колонок слева и справа, так как колонки у тебя плавающие то остальной контент игнорирует их наличие.

wfrr ★★☆
()
Ответ на: комментарий от wfrr

Заменил padding на margin - завелось.

kulti ★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.