2012-01-20 2 views
0

안녕하세요, 우리는 우리의 새로운 DIV 기반의 레이아웃에 테이블에 디자인 된 우리의 기존 웹 사이트에서 오래된 페이지를 가져 오는 과정에가져 오기 기존 HTML 테이블 디자인

. 우리의 사이트는 PHP include 시스템을 기반으로 구축되었으므로 페이지를 세 가지 구성 요소로 나누었습니다. 머리글, 본문 및 바닥 글. 이 오래된 페이지는 개정판 1.0 출시를 위해 가져와야하며 주름을 다 펴기 시작하면 다시 디자인 할 것입니다.

헤더 구성 요소가 제대로 작동하고 본문 내용이 표시되지만 불행히도 기존 바닥 글 요소가 테이블 아래쪽에 꽂습니다. 새로운 디자인을위한 바닥 글은 너비의 100 %까지 확장되지만 기존 테이블은 960px 너비 만 허용합니다. 따라서 우리의 꼬리말은 끊어지고 있습니다.

JavaScript를 사용하거나 페이지 크기에 동적으로 영향을주는 jQuery Attr() 호출을 사용하여 바닥 글을 페이지 가장자리까지 확장 할 수있는 동적 솔루션을 찾으려고 시도했지만 아직 시도한 모든 작업이 수행됩니다. overfow가 전혀 보이지 않도록 테이블 치수를 수정하지 마십시오.

다음은 내가 말하는 것을 보여주는 몇 가지 스크린 샷입니다.

사업부 레이아웃 : div

표 레이아웃 : 당신은 코드에서 들여다 봐도 싶은 경우에 enter image description here

, 당신이 내 Demo Page 볼, 그러나 다만이 데모 버전임을 알 수있다 PHP를 사용하여 구성 요소를 가져 오지 않습니다. 그 대안을 검색하는 데 사용하고있는 간단한 HTML/CSS 기반 레이아웃. (저는 PHP 녀석이 아닙니다.)

우리는 수백 개의 문서를 검토하고 그 아래에있는 꼬리말을 자르고 붙이거나 다른 코드를 수동으로 수정하지 않아도되도록 노력하고 있습니다. 해결 방법을 제시하는 CSS 또는 JavaScript 문서를 헤더에 포함시킬 수 있다면 이상적인 솔루션입니다.

+0

'병합'보기에 대해 마음에 들지 않는 것을 지적하는 그림을 포함하면 도움이 될 수 있습니다. – jmoreno

+1

내가 한 것처럼 느껴졌지 만, 다른 버전에 몇 가지 노트를 추가 할 것입니다 ... – robabby

+0

나쁜가, 주석 버전을 업로드했습니다 :) – robabby

답변

1

바닥 글 배경 - 내용과 아래와 구분하여 div를 만들 수도 있습니다. 요소 뒤에 'footer'와 같은 CSS 스타일로 div를 넣으십시오. 바닥 글의 배경 이미지 (footer_bg.jpg repeat-x)를 사용할 수 있습니다.

동일한 생각으로 만든 웹 사이트는 campdavidozarks.org를 참조하십시오.

+0

오늘 아침에 그 아이디어를 생각해 보았습니다. 그 아이디어가 가장 좋은 것으로 생각됩니다.하지만 모든 아이디어에 신선한 div를 코딩해야합니다. 기존 문서. 그러나 그렇습니다. 솔루션 목록에서 가장 중요한 항목이 될 것이라고 생각합니다. – robabby

1

표를 가운데에 배치하고 부모의 100 % 너비 요소에 동일한 바닥 글 배경을 사용합니다 (바닥 글에 맞추기 및 y에 no-repeat 사용). 끝난. 순수한 CSS 솔루션.

관련 문제