Расширение границ - PullRequest
       4

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

0 голосов
/ 02 февраля 2009

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

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

1 Ответ

0 голосов
/ 02 февраля 2009

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

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

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

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

_______________
               |img|_____________________

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

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

...