묻고답하기
레이아웃 CSS 한번봐주세요..
2010.12.25 10:38
레이아웃이 오래되어.. 최신브라우져에서 문제없도록 갱신하고싶습니다.. 한번봐주세요..
참고로 IE6 에서는 제대로 보이지 않아요.. IE7, IE8 은 현재 문제없구요..
@charset "utf-8";
/* myham's third layout : 2sidevars */
* {margin:0; padding:0;}
#bodyWrap {width:100%; height:100%;}
#bodyWrap2 {position:relative; width:980px; margin:0 auto;}
.line {width:980px; height:30px; border-top:3px solid #262626; _margin-bottom:-7px;}
.maskL {width:200px; height:5px; background:#ffffff; display:block;}
.maskR {width:180px; height:5px; background:#ffffff; display:block;}
/* 익스플로러 6 */
* html .maskR {width:210px; height:5px; background:#ffffff; display:block;}
#top {position:relative; width:980px; padding:2px 0 0; background:#E5E5E5; margin-bottom:15px; z-index:1004;}
#top .menu {position:absolute; float:right; top:2px; right:5px;}
#top .menu li {display:inline; padding:0 .2em 0 .5em; background:url(../images/vrType1.gif) no-repeat left center;}
#top .menu li.first-child {background:none;}
#top .menu li a {text-decoration:none; font:.9em "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#666666;}
#top .menu li a:hover,
#top .menu li a:focus {color:#000000; text-decoration:underline;}
#language {position:relative; text-align:right; margin-bottom:2px; left:5px; z-index:1004; width:130px;}
#language strong { color:#5c5c5c; font:.75em Tahoma; margin-right:3px;}
#language a img { vertical-align:-5px;}
#language ul { position:absolute; top:15px; right:0; display:none; border:1px solid #d9d9d9; background:#ffffff; z-index:99;}
#language ul li { list-style:none; }
#language ul li a { display:block; width:61px; padding:3px 8px; font:9px Tahoma; color:#5c5c5c; text-decoration:none;}
#language ul li a:hover { background:#f4f4f4;}
#selectLang {margin:0; padding:0;}
#header {position:relative; width:980px}
#header .logo {margin-bottom:5px;}
#mainMenu {position:relative; height:30px; background:#4B4B4B;}
#mainMenu .login {position:absolute; top:-30px; right:0;}
/* 익스플로러 6 */
* html #mainMenu .login {position:absolute; top:-30px; right:0; padding:0 0 0 500px;}
#isSearch {position:absolute; top:36px; right:2px; width:147px; height:17px;}
#isSearch .inputText {vertical-align:middle; padding:3px 3px 1px 3px; width:94px; height:13px; color:#000000; border:1px solid #B0B0AF; background-color:#FFFFFF; }
#isSearch .inputText:hover,
#isSearch .inputText:focus { border:1px solid #8E8E8D; background-color:#FFFFFF; }
#isSearch .submit {vertical-align:middle;}
#mainMenu {position:relative; z-index:1000; margin:0; padding:0;}
#mainMenu li {position:relative; float:left; font-size:12px; font-size:12px; font-weight:bold; list-style:none;}
#mainMenu li.on .menu1st {font-weight:bold; color:#FAFAB4;}
#mainMenu li a{display:block;text-decoration:none; padding:7px 10px; color:#F9F6ED;}
#mainMenu li a:focus,
#mainMenu li a:hover {color:#DCCA97;}
#mainMenu li table {position:absolute; width:150px; border-collapse:collapse; margin:0; padding:0; top:28px; z-index:1000; font-weight:normal; border:0; border-bottom:3px solid #262626;}
#mainMenu li table td {white-space:nowrap; width:150px; padding:4px 4px 0; background:#4B4B4B;}
#mainMenu li table td p {position:relative; width:100%; padding:0; margin:0; padding-bottom:4px; white-space:nowrap;}
#mainMenu li table td p.on .menu2nd {font-weight:bold;}
#mainMenu li table td p a {color:#FBFAF5; height:16px; margin:0; padding:3px 8px 3px 5px; .padding:4px 8px 2px 5px;}
#mainMenu li table td p img {position:absolute; margin:0; padding:0; top:7px;}
#mainMenu li table td p a:hover,
#mainMenu li table td p a:focus {cursor:pointer; color:#262626; background:#FBFAF5; padding:3px 8px 3px 5px; .padding:4px 8px 2px 5px;}
#mainMenu li table td p .mRight {float:right; clear:right; position:relative;}
#mainMenu li table td p .mRight table {position:absolute; left:-5px; top:-26px; .top:-27px; z-index:1000; border:0;}
#mainMenu li table td p .mRight table td {border-top:1px solid #262626; border-left:1px solid #262626; border-right:1px solid #262626; border-bottom:3px solid #262626;}
#mainMenu li table td p .mRight table p.on .menu3rd {font-weight:bold;}
#mainMenu li table td p .mRight table p .mRight table p.on .menu4th {font-weight:bold;}
#mainMenu li table td p .mRight table p .mRight table p .mRight table p.on .menu5th {font-weight:bold;}
#mainMenu li table td p .mRight table p .mRight table p .mRight table p .mRight table p.on .menu6th {font-weight:bold;}
#lnb {position:relative; margin:0; padding:5px; line-height:0; border:1px solid #E1E1DD; background-color: #F9F9F9;}
#lnb p {height:18px; _height:18px; _overflow-y:hidden; margin:0; padding:0;}
#lnb li {position:relative; list-style:none;}
#lnb li a {position:relative; top:-4px; color:#3e3e3e; text-decoration:none;}
#lnb li a:hover,
#lnb li a:focus {font-weight:normal; color:#de4332;}
#lnb li.on a {font-weight:bold;}
#lnb li.on a:hover,
#lnb li.on a:focus {font-weight:bold;}
#lnb li.on ul li a {font-weight:normal;}
#lnb li.on ul li a:focus,
#lnb li.on ul li a:hover {font-weight:bold;}
#lnb li.on ul li.on a {font-weight:bold;}
#lnb li.on ul li.on a:focus,
#lnb li.on ul li.on a:hover {font-weight:bold !important;}
#lnb li.on ul li.on ul li a {font-weight:normal;}
#lnb li.on ul li.on ul li a:focus,
#lnb li.on ul li.on ul li a:hover {font-weight:bold;}
#lnb li.on ul li.on ul li.on a {font-weight:bold;}
#lnb li.on ul li.on ul li.on a:focus,
#lnb li.on ul li.on ul li.on a:hover {font-weight:bold !important;}
#lnb li.on ul li.on ul li.on ul li a {font-weight:normal;}
#lnb li.on ul li.on ul li.on ul li a:focus,
#lnb li.on ul li.on ul li.on ul li a:hover {font-weight:bold;}
#lnb li.on ul li.on ul li.on ul li.on a {font-weight:bold;}
#lnb li.on ul li.on ul li.on ul li.on a:focus,
#lnb li.on ul li.on ul li.on ul li.on a:hover {font-weight:bold !important;}
#lnb li.on ul li.on ul li.on ul li.on ul li a {font-weight:normal;}
#lnb li.on ul li.on ul li.on ul li.on ul li a:focus,
#lnb li.on ul li.on ul li.on ul li.on ul li a:hover {font-weight:bold;}
#lnb li.on ul li.on ul li.on ul li.on ul li.on a {font-weight:bold;}
#lnb li.on ul li.on ul li.on ul li.on ul li.on a:focus,
#lnb li.on ul li.on ul li.on ul li.on ul li.on a:hover {font-weight:bold !important;}
#contentWrap {position:relative; overflow:hidden; width:980px; margin:0; padding:0; background:#ffffff;}
#contentWrap .left {float:left; width:200px; padding:5px 0 0;}
#contentWrap .center {float:left; width:580px; padding:5px 10px; overflow:hidden;}
#contentWrap .right {float:right; padding:5px 0 0; width:180px;}
/* 익스플로러 6 */
* html #contentWrap .right {float:right; padding:5px 0 0; width:150px;}
/*익스 플로러 7 */
*+html #contentWrap .right {float:right; padding:5px 0 0; width:180px;}
#footer {clear:both; text-align:center; height:70px; _margin-top:7px; margin-bottom:10px; padding:5px; border-top:1px solid #ADADAD; border-bottom:1px solid #ADADAD; background:#EEEEEE;}
#footer p {line-height:140%; color:#262626;}
#footer a {color:#262626; text-decoration:none;}
#footer a:focus,
#footer a:hover {text-decoration:underline;}
#footer ul {margin:0; padding:0;}
#footer ul li {display:inline; padding:0 .2em 0 .5em; background:url(../images/vrType1.gif) no-repeat left center;}
#footer ul li.first-child {background:none;}