묻고답하기

헤어 아래의 여백을 없애려면 어딜 손봐야 하는걸까요?-디폴트레이아웃

2014.07.28 01:03

쫑효다컴

안녕하세요 디폴트레이아웃 사용중인데요

http://rburger.cafe24.com/xe/

헤더 밑의 내용들과 붙이려면 어떻게 해야 하나요?

메뉴 배경 아래쪽과 슬라이드가있는 부분을 붙이려고 하는데요

css 어디를 봐야 하는걸까요?

default.layout.css 의 내용입니다.

--------------------------- 아 래---------------------------------------

@charset "utf-8";
/* Reset */
html,body{min-height:100%}
body{margin:0}

/* Skin to content */
.skip{margin:0}
.skip>a{display:block;text-align:center;line-height:28px;height:1px;overflow:hidden}
.skip>a:focus{height:auto}

/* Layout */
.container,
.footer>p{width:960px;margin:0 auto}
.header{ padding-bottom:opx;position:relative;z-index:2;zoom:1;margin:0px 0px 0px 0px}
.header>.side{position:absolute;z-index:2;right:0;bottom:57px;zoom:1}
.visual{position:relative;z-index:1;overflow:hidden;width:100%;margin:0 0 20px 0}
.body{position:relative;z-index:1}
.header:after,
.body:after{content:"";display:block;clear:both}
.content{padding:0 0 40px 0;zoom:1}
.content>*:first-child{margin-top:0}
.content img{max-width:100%;height:auto}

/* Header */
.header>h1{display:inline-block;*display:inline;zoom:1;margin:19px 400px 0px}
.header>h1>a,
.header>h1 img{display:block}
.header>h1>a{font-size:32px;text-decoration:none;color:#333 }

/* Footer */
.footer{padding:25px 0 80px 0;background:#f8f8f8;border-top:1px solid #f4f4f4;color:#666}
.footer p{font-size:12px}
.footer a{text-decoration:none;color:#666}
.footer a:hover,
.footer a:focus{text-decoration:underline}

/* Login */
.account{margin-right:15px !important}

/* Search */
.header .search{display:inline-block;*display:inline;zoom:1;vertical-align:top;margin:0}
.header .search>input{font-size:12px;vertical-align:top;border-radius:2px}
.header .search>input[type="text"]{background:#e5e6e8;border:1px solid #dedede;height:21px;line-height:21px;padding:0 4px;margin:0 -6px 0 0;width:126px}
.header .search>input[type="submit"]{background:#484d51;border:1px solid #272b30;color:#fff;height:23px;line-height:23px;padding:0 15px;margin:0;cursor:pointer;box-shadow:0 1px 0 #6d7174 inset}

/* GNB */
.gnb{position:relative;z-index:1; font-size:13px;height:35px;clear:both;background-color:#080808;background:-webkit-linear-gradient(top, #2e2d32, #0c0c0e);background:-moz-linear-gradient(top, #2e2d32, #0c0c0e);background:-o-linear-gradient(top, #2e2d32, #0c0c0e);background:-ms-linear-gradient(top, #2e2d32, #0c0c0e);background:#000;}
.gnb:before{content:"";display:block;background:#3e3e40;width:100%;height:1px}
.gnb ul{margin:0;padding:0;list-style:none}
.gnb a{text-decoration:none;white-space:nowrap}
.gnb>ul{position:absolute;top:29px;left:0px;right:0px;background:#e1e1e1; border-top:3px solid #ff0000;opacity:.99;filter:alpha(opacity=99);height:0}
.gnb>ul{height:auto;border-bottom:0px solid #333}
.gnb>ul:after{content:"";display:block;clear:both}
.gnb>ul>li{position:relative;top:-32px;float:left;margin:0 50px -8px 0}
.gnb>ul>li>a{display:block;border-left:0px solid #3e3e40;border-right:0px solid #3e3e40;line-height:27px;padding:0 20px;color:#fff;position:relative}
.gnb>ul>li>a:after{content:""; position:absolute;width:0px;height:100%;right:0;top:0;background:#080808;overflow:hidden}
.gnb>ul>li.active>a,
.gnb>ul>li.hover>a{ color:#000;border-top:0px solid #4a505c; border-right:0px;line-height:34px;padding-bottom:0px;background-color:#e1e1e1;background:-webkit-linear-gradient(top, #e1e1e1, #e1e1e1);background:-moz-linear-gradient(top, #e1e1e1, #e1e1e1);background:-o-linear-gradient(top, #e1e1e1, #e1e1e1);background:-ms-linear-gradient(top, #e1e1e1, #e1e1e1);background:linear-gradient(top, #e1e1e1, #e1e1e1)}
.gnb ul ul{display:block;position:relative;z-index:2;padding:0 20px;margin:0 0 0 -1px;border-left:0px solid #424856;height:0;overflow:hidden}
.gnb ul ul{margin-top:6px}
.gnb ul ul:before{content:"";position:absolute;left:0;top:0;width:0px;height:100%;background:#4b5265}
.gnb ul ul{padding:13px 20px;height:auto}
.gnb>ul>li:first-child>ul{border:0}
.gnb>ul>li:first-child>ul:before{content:normal}
.gnb ul ul a{display:block;line-height:20px;font-size:12px;color:#000}
.gnb ul ul a:hover,
.gnb ul ul a:focus{text-decoration:underline}

/* Visial */
.visual>.list{position:relative;width:300%;left:-100%;z-index:1}
.visual>.list:after{content:"";display:block;clear:both}
.visual>.list.total1{width:auto;left:0}
.visual img{display:block;max-width:100%;height:auto;margin:0 auto}
.visual a{display:block;float:left;position:relative;color:#fff;text-decoration:none;font-family:Corbel,Arial,Helvetica,sans-serif}
.visual a[href=""]{cursor:default}
.visual .total1 a{float:none}
.visual .total2 a,
.visual .total3 a{width:33.33%;}
.visual a>p{margin:-24px 0 0 0;padding:0 100px;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:47px;letter-spacing:-1px;line-height:1}
.visual.sub a>p{font-size:32px;text-align:left}
.visual>button{zoom:1;border:0;background:url(blank.gif);cursor:pointer;width:100px;position:absolute;z-index:2;top:0;bottom:0;margin:0;padding:0;color:#fff}
.visual>button:hover,
.visual>button:focus{background-color:rgba(0,0,0,.25)}
.visual>button>i{position:absolute;top:50%;left:50%;width:25px;height:50px;background:url(slideNav.png) no-repeat;margin:-25px 0 0 -12px;zoom:1}
.visual>.prev{left:0}
.visual>.next{right:0}
.visual>.prev>i{background-position:0 0}
.visual>.next>i{background-position:-25px 0}

/* LNB */
.body.sub .lnb{float:left;width:210px;margin:0 0 40px 0}
.body.sub .content{float:right;width:720px}
.body.sub .lnb>h1{margin:0;position:relative;z-index:2}
.body.sub .lnb>h1>a{display:block;line-height:36px;padding:0 18px;border-radius:3px;color:#fff;text-decoration:none;font-size:14px;border:1px solid #939395;background-color:#19191b;background:-webkit-linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);background:-moz-linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);background:-o-linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);background:-ms-linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);background:linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);zoom:1}
.body.sub .lnb ul{list-style:none;margin:0;padding:0}
.body.sub .lnb ul a{display:block;text-decoration:none;color:#333;font-size:13px}
.body.sub .lnb>ul{position:relative;z-index:1;border:1px solid #dcdcdc;padding:1px;margin:-1px 0 0 0;border-radius:3px}
.body.sub .lnb>ul>li>a{line-height:36px;padding:0 10px 0 18px;border-top:1px solid #eee}
.body.sub .lnb>ul>li.active>a,
.body.sub .lnb>ul>li>a:hover,
.body.sub .lnb>ul>li>a:focus{background:#f5f5f5;color:#3192d7}
.body.sub .lnb>ul>li:first-child>a{border-top:0}
.body.sub .lnb ul ul{padding:10px 0;border-top:1px solid #eee}
.body.sub .lnb li li>a{line-height:20px;padding:0 10px 0 25px}
.body.sub .lnb li li.active>a,
.body.sub .lnb li li>a:hover,
.body.sub .lnb li li>a:focus{background:#f5f5f5;color:#3192d7}

#wingbanner{position:absolute;width:95px;left:50%;top:277px;}
#wingbanner.fixed{position:fixed;top:10px !important;}
#wingbanner a{display:block;float:left;width:100%;}

이 게시물을

SeungXE

2014.07.28 01:20

jQuery(function($){
// GNB
	var $gnb = $('.gnb');
	var $gnb_li = $gnb.find('>ul>li');
	var $gnb_a = $gnb.find('>ul>li>a');
	var $gnb_sub = $gnb.find('ul ul');
	// IE 7 debug
	if($.browser.msie && $.browser.version == "7.0"){
		$gnb_a.each(function(){
			$(this).width($(this).width());
		});
	}

	/*
	if($gnb_sub.length){
		$gnb.mouseover(function(){
			$gnb.addClass('open');
		});
		$gnb.mouseleave(function(){
			$gnb.removeClass('open');
			$gnb_li.removeClass('hover');
		});
	}
	*/
	$gnb_a.mouseover(function(){
		$(this).parent('li').addClass('hover').siblings('li').removeClass('hover');
	});
	$gnb_a.focus(function(){
		$(this).trigger('mouseover');
	});
	$gnb.find('a').focusout(function(){
		setTimeout(function(){
			if($gnb.find('a:focus').length == 0){
				$gnb.trigger('mouseout');
			}
		}, 100);
	});

// Visual Slide
	var $visual = $('.visual');
	var $visual_list = $visual.find('>.list');
	var itemNum = $visual_list.find('>.item').length;
	$visual_list.addClass('total'+itemNum);
	var $last_item = $visual_list.find('>.item:last-child');
	// Paragraph position
	$visual.find('p').each(function(){
		var $this = $(this);
		$this.css('marginTop', Math.round(- $this.height()/2));
	});
	// Invalid href
	$visual.find('a[href=""]').click(function(){return false});
	// Item num
	if(itemNum===1){
		$visual.find('>button').remove();
	} else if(itemNum===2){
		$last_item.clone().prependTo($visual_list);
	} else if(itemNum===3) {
		$last_item.prependTo($visual_list);
	}
	// Prev
	var $vpn = $('.visual, .visual>button');
	$(window).load(function(){
		$vpn.height($visual_list.find('>.item:eq(1)').height());
	});
	$visual.find('>.prev').click(function(){
		$visual_list.animate({
			left: '+=100%'
		},400,function(){
			var $last_item = $visual_list.find('>.item:last-child');
			if(itemNum===3){
				$last_item.prependTo($visual_list);
			} else if(itemNum===2) {
				$last_item.remove();
				$visual_list.find('>.item:last-child').clone().prependTo($visual_list);
			}
			$visual_list.css('left','-100%');
			$vpn.height($visual_list.find('>.item:eq(1)').height());
		});
	});
	// Next
	$visual.find('>.next').click(function(){
		$visual_list.animate({
			left: '-=100%'
		}, 400, function(){
			var $first_item = $visual_list.find('>.item:first-child');
			if(itemNum===3){
				$first_item.appendTo($visual_list);
			} else if(itemNum===2) {
				$first_item.remove();
				$visual_list.find('>.item:first-child').clone().appendTo($visual_list);
			}
			$visual_list.css('left','-100%');
			$vpn.height($visual_list.find('>.item:eq(1)').height());
		});
	});

	if($visual.length){
		$('.visual').css('margin-top', $('#gnb').children('ul').height()-3);
	} else {
		$('#content').css('margin-top', $('#gnb').children('ul').height()-3);		
	}

	var center = ($('.body').width()/2) + 10;
	var wingbanner_height = $('#wingbanner').height();
	$('#wingbanner').css('margin-left', center);
	$('#wingbanner').data('top-css', $('#wingbanner').css('top'));

	window.onscroll = function(){
		if($(window).scrollTop() >= 277){
			if( ($(document).height() <= $(window).scrollTop() + wingbanner_height + 222) ) {
				$('#wingbanner').removeClass('fixed').css('top', $(document).height() - 172 - wingbanner_height);
			} else {
				$('#wingbanner').addClass('fixed');
				$('#wingbanner').css('top', $('#wingbanner').data('top-css'));
			}
		} else {
			$('#wingbanner').removeClass('fixed');
		}
	}
});

파일에서 표시된 부분 수정해서 해보세요. 직접 테스트한게 아니라 이론적으로 작성한거라^^;; 테스트 하시고 리댓주세요~

좋아요 댓글 신고

쫑효다컴

2014.07.28 09:40

SeungXE 님

너무 감사합니다.

알려주신 위치를 바꾸니 조절이 됩니다. 더운 날씨에 시원한 한방 날려주셨습니다. 감사합니다.

꾸벅 꾸벅

한가지만 더 여쭙겠습니다.
빵조각이라고 하던데요

현재페이지위치라고 하나요? 그걸 서브페이지의 메뉴 아래에 한줄로 넣으려면
layout.html 을 수정해야 할까요?
빵조각이 사용되닌 다른 레이아웃의 소스를 살짝 불러와보니 안되던데요
한번 여쭈어 봅니다.
이런 부분이 작업의뢰를 해야 하는 부분이라면, 정식으로 의뢰게시판에 올리겠습니다.
그러한 부분이 아니라면 문의 드립니다.

빠른 답변에 ^______^

감사합니다.

------------------------------ 아래 --layout.html 소스--------------------------------------------------
<load target="default.layout.css" />
<load target="default.layout.webfont.css" cond="$layout_info->WEB_FONT == 'YES'" />
<load target="../../common/js/respond.min.js" targetie="lt IE 9" />
<load target="default.layout.js" type="body" />
<div class="container">
<p class="skip"><a href="#content">{$lang->skip_to_content}</a></p>
<header class="header">
<h1>
<a href="{geturl('')}" id="siteTitle">
<img src="siteTitle.png" alt="XpressEngine" cond="!Context::getSiteTitle() && !$layout_info->LOGO_IMG && !$layout_info->LOGO_TEXT">
<block cond="Context::getSiteTitle() && !$layout_info->LOGO_IMG && !$layout_info->LOGO_TEXT">{Context::getSiteTitle()}</block>
<img src="{$layout_info->LOGO_IMG}" alt="{$layout_info->LOGO_TEXT}" cond="$layout_info->LOGO_IMG">
<block cond="!$layout_info->LOGO_IMG && $layout_info->LOGO_TEXT">{$layout_info->LOGO_TEXT}</block>
</a>
</h1>
<div class="side">

<img widget="login_info" skin="default" />


<form action="{getUrl()}" method="get" class="search">
<input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />

</form>

</div>

<nav class="gnb" id="gnb">
<ul>
<li loop="$GNB->list=>$key1,$val1" class="active"|cond="$val1['selected']">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul>
</li>
</ul>
</nav>

</header>

<div class="visual main"|cond="$layout_info->LAYOUT_TYPE=='MAIN_PAGE'" class="visual sub"|cond="$layout_info->LAYOUT_TYPE=='SUB_PAGE'" cond="!$layout_info->VISUAL_IMAGE_1 && !$layout_info->VISUAL_IMAGE_2 && !$layout_info->VISUAL_IMAGE_3 && $layout_info->VISUAL_USE=='YES'">
<div class="list">
<a href="{geturl('','module','admin','act','dispAdminConfigGeneral')}" class="item i1" cond="$layout_info->LAYOUT_TYPE=='MAIN_PAGE'">
<img src="visual.main.1.jpg" alt="" />
<p>Click, to change<br> the site title.</p>
</a>
<a href="{geturl('','module','admin','act','dispMenuAdminSiteMap')}" class="item i2" cond="$layout_info->LAYOUT_TYPE=='MAIN_PAGE'">
<img src="visual.main.2.jpg" alt="" />
<p>Click, to change<br> the site navigation.</p>
</a>
<a href="{geturl('','module','admin','act','dispLayoutAdminInstanceList','layout','default')}" class="item i3" cond="$layout_info->LAYOUT_TYPE=='MAIN_PAGE'">
<img src="visual.main.3.jpg" alt="" />
<p>Click, to change<br> the site visual image.</p>
</a>
<a href="{geturl('','module','admin','act','dispLayoutAdminInstanceList','layout','default')}" class="item i1" cond="$layout_info->LAYOUT_TYPE=='SUB_PAGE'">
<img src="visual.sub.jpg" alt="" />
<p>Click, to change the site visual image.</p>
</a>
</div>
<button type="button" class="prev" title="Prev"><i></i></button>
<button type="button" class="next" title="Next"><i></i></button>
</div>

<div class="visual main"|cond="$layout_info->LAYOUT_TYPE=='MAIN_PAGE'" class="visual sub"|cond="$layout_info->LAYOUT_TYPE=='SUB_PAGE'" cond="($layout_info->VISUAL_IMAGE_1 || $layout_info->VISUAL_IMAGE_2 || $layout_info->VISUAL_IMAGE_3) && $layout_info->VISUAL_USE=='YES'">
<div class="list">
<a href="{$layout_info->VISUAL_LINK_1}" class="item i1" cond="$layout_info->VISUAL_IMAGE_1">
<img src="{$layout_info->VISUAL_IMAGE_1}" alt="" />
<p>{$layout_info->VISUAL_TEXT_1}</p>
</a>
<a href="{$layout_info->VISUAL_LINK_2}" class="item i2" cond="$layout_info->VISUAL_IMAGE_2">
<img src="{$layout_info->VISUAL_IMAGE_2}" alt="" />
<p>{$layout_info->VISUAL_TEXT_2}</p>
</a>
<a href="{$layout_info->VISUAL_LINK_3}" class="item i3" cond="$layout_info->VISUAL_IMAGE_3">
<img src="{$layout_info->VISUAL_IMAGE_3}" alt="" />
<p>{$layout_info->VISUAL_TEXT_3}</p>
</a>
</div>
<button type="button" class="prev" title="Prev"><i></i></button>
<button type="button" class="next" title="Next"><i></i></button>
</div>

<div class="body main"|cond="$layout_info->LAYOUT_TYPE=='MAIN_PAGE'" class="body sub"|cond="$layout_info->LAYOUT_TYPE=='SUB_PAGE'">

<nav class="lnb" cond="$layout_info->LAYOUT_TYPE == 'SUB_PAGE'">
<h1 loop="$GNB->list=>$key1,$val1" cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></h1>
<ul loop="$GNB->list=>$key1,$val1" cond="$val1['selected'] && $val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
<ul cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']"><a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a></li>
</ul>
</li>
</ul>
</nav>


<div class="content" id="content">
{$content}
</div>

</div>
<div id="wingbanner">
{$layout_info->wingbanner_content}
</div>
</div>
<footer class="footer">
<p cond="!$layout_info->FOOTER">Powered by <a href="http://xpressengine.com/">XE</a>.</p>
<p cond="$layout_info->FOOTER">{$layout_info->FOOTER}</p>
</footer>
-------------------------------------//--------------------------------------------------------------

좋아요 댓글 신고
SeungXE

2014.07.29 03:12

정확히 어느 위치에 넣고 싶은지 이미지 등으로 답변주세요ㅎㅎ 지금 사이트 들어가서 살짝 봤는데, 위치상으로 어디에 넣고 싶으신 것인지 모르겠네요. 그러니까 메뉴와 인삿말 같이 이미지로 들어간 페이지 사이에 출력하고 싶으시다는 의미인가요?

좋아요 댓글 신고
SeungXE

2014.07.29 03:13

아, 그리고 XE 게시판에서 닉네임을 호출하실 땐 @SeungXE 와 같이 입력해주셔야 알림이 갑니다. 지금 다른 자료 찾아보려다가 이제야 댓글을 봤네요^^

좋아요 댓글 신고

글쓴이	제목	최종 글
XE	공지 글 쓰기,삭제 운영방식 변경 공지 [16]	2019.03.05 _by 남기남
moon	좌측메뉴 하단에 붙인 배너는 나오는데 좌측메뉴가 안나와요ㅠ
kuki8888	게시판 설치주소에 대하여.. [1]	2014.07.29 _by YJSoft
dskurrkdfdr74	평점매길수잇는 게시판은 없나요?
88비타	마젠토에 게시판을 달았는데, 로그인 연동을 할 수 있을까요? [1]	2014.07.29 _by SeungXE
쫑효다컴	헤어 아래의 여백을 없애려면 어딜 손봐야 하는걸까요?-디폴트레이아웃 [4]	2014.07.29 _by SeungXE
비누남어	메가메뉴 위젯?모듈 [1]	2014.07.29 _by SeungXE
black_soft	SketchBook5 자기소개 뜨게하기 [2]	2014.07.29 _by black_soft
Cheeta	게시판 컴포넌트가 보이질 않습니다.. [1]	2014.07.29 _by SeungXE
xe초보자	쿡래빗 레이아웃 설정이요 [5]	2014.07.28 _by 로이조52
Nanamins	스케치북 스킨 댓글 표시 문의드립니다. [1]	2014.07.28 _by SeungXE
PlanB	로고 세로사이즈 변경 [7]	2014.07.28 _by SeungXE
500원짜리	다국어 페이지 전환과 관련 [1]	2014.07.28 _by sejin7940
안엉어웅넌223	플래시관련 질문있습니다 [1]	2014.07.28 _by 안엉어웅넌223
shinming	글쓰기 할 때 반응이 없는 경우 [28]	2014.07.28 _by 안엉어웅넌223
어부Sims	msg_make_directory_failed 707을 755로 바꿔도 안됩니다.
@pple	레이아웃 증식현상 [2]	2014.07.28 _by @pple
레드윈드2	XE에 네이버 맵 API 를 올리려고하는데요 [8]	2014.07.28 _by 레드윈드2
레몬바나나	최근글 추출하는 위젯에서 첨부이미지 말고 링크이미지 출력할 수 있나요?
준jun	회원가입 문구 수정 문의드립니다. [2]	2014.07.28 _by 준jun
화랑529	뻘글, 성인 도배 차단 방법 좀.. [2]	2014.07.28 _by 몽실아빠
emskek2834	연속 글 등록 제한 방법? [20]	2014.07.28 _by 애니즌
DJKain	XE Core ver. 1.7.5.6 을 사용중인데 에드온설치가 안됩니다 [2]	2014.07.28 _by DJKain
sasaki911	보안서버 파일첨부 관련 오류
나만의너	첨부파일 버튼 swf를 onclick으로 바꿀 수 없을까요?
Sydneylove	게시판 부분 문제 입니다. 한번 봐주세요 고수님들
나만의너	페이지 오류에 이런 문구가 떠있는데.. 뭔지 아시면 답변 좀 부탁드립니다. [4]	2014.07.28 _by 애니즌
xe마스터하는그날까지	위젯색상 [1]	2014.07.28 _by jake
clovermedia	레이아웃 편집이 안되네요..(스샷첨부) [3]	2014.07.28 _by jake
쫑효다컴	안녕하세요 - 디폴트레이아웃에 빵조각 사용하려면 [1]	2014.07.28 _by jake
xe마스터하는그날까지	xe와드림위버 [4]	2014.07.28 _by jake

태그 쓰기

묻고답하기

헤어 아래의 여백을 없애려면 어딜 손봐야 하는걸까요?-디폴트레이아웃

댓글 4

SeungXE

쫑효다컴

SeungXE 님

SeungXE

SeungXE

About

Get involved

Blog

Download

Support

Showcase