메뉴바길이에 대한 질문좀드릴게요.. 정보
메뉴바길이에 대한 질문좀드릴게요..본문
css질문좀 드릴게요...
배추빌더메인메뉴바부분을 http://topking.co.kr/ 사이트검은색 메뉴바처럼 좌우로 끝까지 가게 할려면.. 어케해야하는지좀 부탁드립니다...
<style type="text/css">
body { text-align:center; }
#mw-index { width:<?=$mw[config][cf_index_width]?>px; margin:10px auto 0 auto; text-align:left; }
#head { }
#head .logo { }
#head .groups { color:#ddd; font-size:10px; text-align:right; vertical-align:bottom; padding:0 5px 2px 0; }
#head .groups a { color:#555; font-weight:bold; margin:0 2px 0 2px; }
#head .line { background:url(<?=$mw_index_skin_head_path?>/img/mw_search_div.gif) top center no-repeat; height:3px; line-height:1px; font-size:1px; }
#head .shadow { background:url(<?=$mw_index_skin_head_path?>/img/mw_search_shadow.gif) top center repeat-x; }
#head .shadow { height:2px; line-height:1px; font-size:1px; width:<?=$mw[config][cf_index_width]-20?>px; margin:auto; }
#head .left-link { margin:10px 0 0 10px; }
#head .left-link a { color:#E2F6FF; font-weight:bold; }
#head .right-link { margin:10px 0 0 0; }
#head .right-link a { color:#E2F6FF; font-weight:bold; }
#head .quick-link { float:left; padding:0 5px 0 5px; }
#head .quick-link { font-family:dotum; color:#383D41; font-size:11px; }
#head .quick-div { color:#ddd; font-size:8pt; }
#head .mw-scrolls { height:25px; margin:5px 0 0 0; }
#head .keyword-scroll { float:right; width:196px; height:25px; text-align:left; margin:6px 0 0 0; }
#head .keyword-name { float:right; color:#004c7f; font-weight:bold; margin:12px 5px 0 0; }
#head .new-name { float:left; margin:5px 5px 0 5px; color:#004c7f; font-weight:bold; }
#head .new-name a { color:#004c7f; font-weight:bold; }
#head .new-scroll { float:left; height:25px; text-align:left; }
#head .mw-index-menu-bar { clear:both; height:36px; margin:10px 0 0 0; background:url(<?=$mw_index_skin_head_path?>/img/search_bar_bg.gif); }
#head .mw-index-menu-bar a:hover,
#head .mw-index-menu-bar a:link,
#head .mw-index-menu-bar a:active,
#head .mw-index-menu-bar a:visited
{ color:#fff; text-decoration:none; font-size:12px; }
#head .mw-index-menu-left { height:36px; float:left; }
#head .mw-index-menu-right { height:36px; float:right; }
#head .mw-index-menu-item { float:left; padding:12px 7px 0 7px; font-weight:bold; }
#head .mw-index-menu-div { width:10px; height:36px; float:left; background:url(<?=$mw_index_skin_head_path?>/img/search_bar_div.gif) center no-repeat; }
#head .mw-index-menu-select1 { height:28px; float:left; padding:0; margin:4px 5px 0 5px; background:url(<?=$mw_index_skin_head_path?>/img/search_select_bg.gif); }
#head .mw-index-menu-select2 { height:28px; float:left; background:url(<?=$mw_index_skin_head_path?>/img/search_select_left.gif) top left no-repeat; padding:0; margin:0; }
#head .mw-index-menu-select3 { height:28px; float:right; padding:7px 10px 0 10px; margin:0; background:url(<?=$mw_index_skin_head_path?>/img/search_select_right.gif) top right no-repeat; }
#head .mw-index-menu-select3 a:hover,
#head .mw-index-menu-select3 a:link,
#head .mw-index-menu-select3 a:active,
#head .mw-index-menu-select3 a:visited
{ color:#000; font-weight:bold; }
#head .search-button {
width:50px;
height:35px;
border:1px solid #5997D3; /* total color */
background-color:#6972F9; /* total color */
color:#fff;
font-weight:bold;
}
</style>
배추빌더메인메뉴바부분을 http://topking.co.kr/ 사이트검은색 메뉴바처럼 좌우로 끝까지 가게 할려면.. 어케해야하는지좀 부탁드립니다...
<style type="text/css">
body { text-align:center; }
#mw-index { width:<?=$mw[config][cf_index_width]?>px; margin:10px auto 0 auto; text-align:left; }
#head { }
#head .logo { }
#head .groups { color:#ddd; font-size:10px; text-align:right; vertical-align:bottom; padding:0 5px 2px 0; }
#head .groups a { color:#555; font-weight:bold; margin:0 2px 0 2px; }
#head .line { background:url(<?=$mw_index_skin_head_path?>/img/mw_search_div.gif) top center no-repeat; height:3px; line-height:1px; font-size:1px; }
#head .shadow { background:url(<?=$mw_index_skin_head_path?>/img/mw_search_shadow.gif) top center repeat-x; }
#head .shadow { height:2px; line-height:1px; font-size:1px; width:<?=$mw[config][cf_index_width]-20?>px; margin:auto; }
#head .left-link { margin:10px 0 0 10px; }
#head .left-link a { color:#E2F6FF; font-weight:bold; }
#head .right-link { margin:10px 0 0 0; }
#head .right-link a { color:#E2F6FF; font-weight:bold; }
#head .quick-link { float:left; padding:0 5px 0 5px; }
#head .quick-link { font-family:dotum; color:#383D41; font-size:11px; }
#head .quick-div { color:#ddd; font-size:8pt; }
#head .mw-scrolls { height:25px; margin:5px 0 0 0; }
#head .keyword-scroll { float:right; width:196px; height:25px; text-align:left; margin:6px 0 0 0; }
#head .keyword-name { float:right; color:#004c7f; font-weight:bold; margin:12px 5px 0 0; }
#head .new-name { float:left; margin:5px 5px 0 5px; color:#004c7f; font-weight:bold; }
#head .new-name a { color:#004c7f; font-weight:bold; }
#head .new-scroll { float:left; height:25px; text-align:left; }
#head .mw-index-menu-bar { clear:both; height:36px; margin:10px 0 0 0; background:url(<?=$mw_index_skin_head_path?>/img/search_bar_bg.gif); }
#head .mw-index-menu-bar a:hover,
#head .mw-index-menu-bar a:link,
#head .mw-index-menu-bar a:active,
#head .mw-index-menu-bar a:visited
{ color:#fff; text-decoration:none; font-size:12px; }
#head .mw-index-menu-left { height:36px; float:left; }
#head .mw-index-menu-right { height:36px; float:right; }
#head .mw-index-menu-item { float:left; padding:12px 7px 0 7px; font-weight:bold; }
#head .mw-index-menu-div { width:10px; height:36px; float:left; background:url(<?=$mw_index_skin_head_path?>/img/search_bar_div.gif) center no-repeat; }
#head .mw-index-menu-select1 { height:28px; float:left; padding:0; margin:4px 5px 0 5px; background:url(<?=$mw_index_skin_head_path?>/img/search_select_bg.gif); }
#head .mw-index-menu-select2 { height:28px; float:left; background:url(<?=$mw_index_skin_head_path?>/img/search_select_left.gif) top left no-repeat; padding:0; margin:0; }
#head .mw-index-menu-select3 { height:28px; float:right; padding:7px 10px 0 10px; margin:0; background:url(<?=$mw_index_skin_head_path?>/img/search_select_right.gif) top right no-repeat; }
#head .mw-index-menu-select3 a:hover,
#head .mw-index-menu-select3 a:link,
#head .mw-index-menu-select3 a:active,
#head .mw-index-menu-select3 a:visited
{ color:#000; font-weight:bold; }
#head .search-button {
width:50px;
height:35px;
border:1px solid #5997D3; /* total color */
background-color:#6972F9; /* total color */
color:#fff;
font-weight:bold;
}
</style>
댓글 전체
body { margin:10px 0 0 0; text-align: center;
font-family:Tahoma, Sans-serif; font-size:.75em; background:#fff; color:#000;
background-image: url(./skin/mw.builder/topking.1/img/white_bg-1.jpg); background-repeat: repeat-x;
}
해당사이트 body 부분에 보면 백그라운드 이미지를 주었죠. 가로로만 반복 가능하게 repeat-x 를 주었구요. 이와 같이 body 부분이나 상단메뉴 부분에 백그라운드 이미지로 적용하시면됩니다.
font-family:Tahoma, Sans-serif; font-size:.75em; background:#fff; color:#000;
background-image: url(./skin/mw.builder/topking.1/img/white_bg-1.jpg); background-repeat: repeat-x;
}
해당사이트 body 부분에 보면 백그라운드 이미지를 주었죠. 가로로만 반복 가능하게 repeat-x 를 주었구요. 이와 같이 body 부분이나 상단메뉴 부분에 백그라운드 이미지로 적용하시면됩니다.