Расширение границ

Question

У меня есть изображение, которое будет центрировано (слева и справа) в окне, левой границы нет, но есть правая граница.Мне было интересно, возможно ли, чтобы верхняя граница проходила от самого левого края страницы (мимо изображения) и заканчивалась у правой границы, а нижняя граница начиналась с левого края изображения и тянулась до самого правого края окна.Верхняя и нижняя границы сделаны из двух разных повторяющихся фонов, и при необходимости левая граница может быть такой же.

Я думал об этом некоторое время, но не мог придумать никаких решений ... Кто-нибудь может мне помочь?

Answer 1

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

Вы можете справиться с этим, используя фоновые изображения с background-position и техника раздвижных дверей, или вы можете использовать постороннюю разметку для создания макета fluid width в три столбца с вашим изображением в центре.

Это зависит от вас, но с помощью метода трех столбцов вы могли бы вставить свои дополнительные divs (или что бы вы хотели использовать) через JavaScript, чтобы у вас не было пустых контейнеров в вашем исходном коде, и используйте border-top и border-bottom вместо фоновых изображений (таким образом, сокращается время загрузки страницы).

Редактировать: И чтобы уточнить, вы хотите, чтобы это выглядело примерно как этот рисунок в формате Ascii:

_______________
               |img|_____________________

Редактировать:Для создания макета fluid width обратитесь к одному из многочисленных источников по CSS-макетам, вот краткое изложение:http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/

Затем в ваших левой и правой колонках вы бы сделали border-top и border-bottom соответственно (или используйте фоновые изображения, если вам нужны более причудливые границы), укажите границы вашего изображения и установите высоту ваших трех контейнеров так, чтобы границы совпадали друг с другом.Надеюсь, это поможет.