묻고답하기
메인 레이아웃 CSS 질문입니다.
2010.10.07 09:09
http://www.tpgkorea.com.au 가셔서 Register 누르시면 이해 가실겁니다.
회원가입, 회원정보 보기를 하면 content 부분이 좁아져서 사이트가 꼬이는데,
memeber 모듈은 CSS에서 어떤 부분을 고쳐야하는지 도저히 모르겠습니다.
가능하시다면, 아래 코드에서 간단하게 주석 달아주시면 감사하겠습니다.
/* ----- Fixed 1 Column Layout ----- */
.fixed .c #body .e1{ display:block; margin-right:-30px;}
.fixed .c #body .e1 .section{ float:left; width:300px; margin-right:30px;}
/* ----- Liquid 1 Column Layout ----- */
.liquid .c #body .e1{ display:block; margin-right:-3.4%;}
.liquid .c #body .e1 .section{ float:left; width:30%; margin-right:3.3%;}
/* ----- Hybrid 1 Column Layout ----- */
.hybrid .c #body .e1{ display:block; margin-right:-30px;}
.hybrid .c #body .e1 .section{ float:left; width:240px; margin-right:30px;}
/* ----- Fixed 2 Column Layout ----- */
.fixed .ce #body .e1,
.fixed .ec #body .e1{ width:220px;}
.fixed .ce #body #content,
.fixed .ec #body #content{ width:720px;}
.fixed .ce #body #content{ float:left;}
.fixed .ec #body #content{ float:right;}
.fixed .ce #body .e1,
.fixed .ec #body .e1{ display:block;}
.fixed .ce #body .e1{ float:right; clear:right;}
.fixed .ec #body .e1{ float:left; clear:left;}
/* ----- Liquid 2 Column Layout ----- */
.liquid .ce #body .e1,
.liquid .ec #body .e1{ width:23%;}
.liquid .ce #body #content,
/*.liquid .ec #body #content{ width:75%;}*/
.liquid .ec #body #content{ width:750px;}
.liquid .ce #body #content{ float:left;}
.liquid .ec #body #content{ float:right;}
.liquid .ce #body .e1,
.liquid .ec #body .e1{ display:block;}
.liquid .ce #body .e1{ float:right; clear:right;}
.liquid .ec #body .e1{ float:left; clear:left;}
/* ----- Hybrid 2 Column Layout ----- */
.hybrid .ce #body{ padding-right:280px;}
.hybrid .ec #body{ padding-left:280px;}
.hybrid .ce #body .e1,
.hybrid .ec #body .e1{ width:260px;}
.hybrid .ce #body #content,
.hybrid .ec #body #content{ width:100%;}
/*.hybrid .ce #body #content{ float:left;}*/
/*.hybrid .ec #body #content{ float:right;}*/
/*.hybrid .ce #body .e1,*/
/*.hybrid .ec #body .e1{ display:block;}*/
.hybrid .ce #body .e1{ float:right; clear:right; margin-left:-260px; right:-280px;}
.hybrid .ec #body .e1{ float:left; clear:left; margin-right:-260px; left:-280px;}
/* ----- Fixed 3 Column Layout ----- */
.fixed .cee #body .e1,
.fixed .cee #body .e2,
.fixed .ece #body .e1,
.fixed .ece #body .e2,
.fixed .eec #body .e1,
.fixed .eec #body .e2{ display:block; width:200px;}
.fixed .cee #body #content,
.fixed .ece #body #content,
/*.fixed .eec #body #content{ width:520px;}*/
.fixed .eec #body #content{ width:520px;}
.fixed .cee #body #content{ float:left; margin-right:20px;}
.fixed .ece #body #content{ float:left; margin-right:-100%; left:220px;}
.fixed .eec #body #content{ float:right;}
.fixed .ece #body .e1,
.fixed .eec #body .e1{ float:left; margin-right:20px;}
.fixed .cee #body .e1,
.fixed .eec #body .e2{ float:left;}
.fixed .cee #body .e2,
.fixed .ece #body .e2{ float:right;}
/* ----- Liquid 3 Column Layout ----- */
.liquid .cee #body .e1,
.liquid .cee #body .e2,
.liquid .ece #body .e1,
.liquid .ece #body .e2,
.liquid .eec #body .e1,
.liquid .eec #body .e2{ display:block; width:20%;}
.liquid .cee #body #content,
.liquid .ece #body #content,
/*.liquid .eec #body #content{ width:56%;}*/
.liquid .eec #body #content{ width:56%;}
.liquid .cee #body #content{ float:left; margin-right:2%;}
.liquid .ece #body #content{ float:left; margin-right:-100%; left:22%;}
.liquid .eec #body #content{ float:right;}
.liquid .ece #body .e1,
.liquid .eec #body .e1{ float:left; margin-right:2%;}
.liquid .cee #body .e1,
.liquid .eec #body .e2{ float:left;}
.liquid .cee #body .e2,
.liquid .ece #body .e2{ float:right;}
/* ----- Hybrid 3 Column Layout ----- */
.hybrid .cee #body .e1,
.hybrid .cee #body .e2,
.hybrid .ece #body .e1,
.hybrid .ece #body .e2,
.hybrid .eec #body .e1,
.hybrid .eec #body .e2{ display:block; width:220px;}
.hybrid .cee #body{ padding-right:480px;}
.hybrid .ece #body{ padding-left:240px; padding-right:240px;}
.hybrid .eec #body{ padding-left:480px;}
.hybrid .cee #body #content,
.hybrid .ece #body #content,
.hybrid .eec #body #content{ width:100%;}
.hybrid .cee #body #content,
.hybrid .ece #body #content{ float:left; margin-right:-100%;}
.hybrid .eec #body #content{ float:right;}
.hybrid .ece #body .e1,
.hybrid .eec #body .e2{ float:left; left:-240px; margin-right:-220px;}
.hybrid .eec #body .e1{ float:left; left:-480px; margin-right:-220px;}
.hybrid .cee #body .e1,
.hybrid .ece #body .e2{ float:right; left:240px; margin-left:-220px;}
.hybrid .cee #body .e2{ float:right; left:480px; margin-left:-220px;}
댓글 2
-
SeklutZ
2010.10.07 12:52
-
my5082
2010.10.07 13:32
http://www.tpgkorea.com.au 가셔서 Register 누르시면 메인 컨텐츠 부분이 작아지는걸 보실수 있습니다. 감사합니다. -
my5082
2010.10.07 13:33
http://www.tpgkorea.com.au 가셔서 Register 누르시면 메인 컨텐츠 부분이 작아지는걸 보실수 있습니다. 감사합니다.
적어주신 CSS는 레이아웃의 구획을 나누는 것 뿐으로, 이것만으로는 문제를 해결할 수 없습니다.
사이트 URL과 test id가 있다면 고수분들이 문제를 확인하고 해결법을 알려 주실 수 있을 것입니다.