Как сделать позицию div вне обертки относительно div внутри обертки?

Question

Мне нужна помощь. Я собираюсь в школу для графического дизайна и создаю веб-сайт в качестве услуги.

Я разработал шаблон в фотошопе, а затем разместил его через PSD2CSSOnline.com, который выплюнул код и сплайсировал изображения.

Я смог отредактировать HTML и CSS достаточно, чтобы получить две розовые линии сверху, чтобы растянуться по обозревателю, но я не знаю, как заставить нижние сделать то же самое, поскольку текст на разных страницах будет меняться, и я полагаю, что div должен находиться за пределами оболочки, чтобы растянуть 100% -ную ширину, поэтому моя проблема заключается в том, как это сделать И STILL MAKE IT RELATIVE для div внутри обертки?

Любая помощь приветствуется, я потратил часы, пытаясь понять это!

Для справки Я загрузил его, чтобы вы могли посмотреть исходный код и визуально увидеть, о чем я говорю. Чтобы посмотреть его, перейдите сюда: http://bellairo.com/anytime/

Answer 1

Я не очень хорошо знаком с программами psd-css, поэтому это немного сложно понять ... для пурпурных линий кажется, что у вас есть 2 изображения: 1 - 960 x 30px Layer-13.png, а затем есть 24 x 30px Layer-12-rx.png, который повторяется в бесконечность в обоих направлениях под ним. Кажется самым простым получить то же самое изображение png - Layer-12-rx .png, чтобы сделать то же самое в нижней части страницы - повторите этот образ под тем, который уже существует: Layer-7.png.

Что касается вашего вопроса о линиях, относящихся к вашему контенту: я замечаю, что почти у всех ваших div есть позиция: абсолютная применяется к ним. Будьте осторожны, потому что, когда этот атрибут применяется, он удаляет div из нормального потока, как css позиционирует вещи, а затем вы должны начинать указывать все, а не divs, следуя друг за другом естественно - что хорошо для вещей, таких как ваши нижние строки просто естественным образом позиционируются под вашим контентом, как бы там ни было. В div, в котором находятся ваши нижние колонтитулы, также есть эта позиция: абсолютная применимость к ней, а это означает, что вам всегда нужно будет точно сказать, где сидеть за каждой страницей. Начало состоит в том, чтобы изменить его на положение: относительное, а затем играть с левым и верхним значениями: до тех пор, пока оно не окажется в нужном месте. Затем он должен располагаться под текстом каждый раз. Хорошая рекомендация - школы W3 - для определения местоположения проверьте это: http://www.w3schools.com/css/css_positioning.asp