묻고답하기

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

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 남기남
강동환	웹서버 질문입니다. [1]	2007.08.10
박용진	폼메일을 만들려고 하는데요... [1]	2007.08.10
신비스런변태	[플래시] 버튼에 마우스 올리면 손모양 화살표모양이 번갈아가면서 나와요. [2]	2007.08.10
이경진	securtyCRT 나 ttssh 프로그램 다운 받을 수 있는 곳 좀.. [2]	2007.08.10
이상민	이런 오류메시지가 왜 뜨는지 모르겠습니다. [2]	2007.08.10
윤홍준	이 폰트 이름이 무엇이죠?? 알려주세요 찾아봐도 모르겠어요..ㅜ.ㅜ [1]	2007.08.10
매드니스	체크박스 배경색에 대하여... [2]	2007.08.10
정성미	my sql 설치 했는데요 관리자 모드 한글로 번역된거 구할 수 없을까요?
황규만	다른 사이트의 게시판 최근등록글을 ............. [1]	2007.08.10
연정흠	테이블이 깨져여~~~~~~~~~ [1]	2007.08.10
박효근	게시판 글을 쭉 저장할수 있는 방법을 찾습니다. [1]	2007.08.10
☆으뉴™	인터넷창 제목이 이상하게 떠요. 엉엉~ㅠ_ㅠ [2]	2007.08.10
『L4L7Kary』	이미지에 마우스올려놓으면 보이는 설명에대한질문입니다.. [1]	2007.08.10
임찬환	배경말인데요 ^-^*.. [1]	2007.08.10
임찬환	배경말인데요 ^-^*.. [1]	2007.08.10
권혁진	제로카운터의 시간을 스페인시간으로 바꿀려면??
박기현	onMouseOver에 두가지 실행명령을 만들 수 있나요? [1]	2007.08.10
박선옥	이런것두 가능한가요?? [2]	2007.08.10
여상한	관리자 id, pw를 잊어버렸어요. 알수 있는 방법 [1]	2007.08.10
쩝~	제로보드노프레임 에서 title에..
CityBoys-Life	저장된 정보를 수정하기 위한 문법해결좀.. [1]	2007.08.10
yz	만들고 싶은 게시판 스타일은 있는데 ...
오유석	급해요....제발... [2]	2007.08.10
이차열	www.aaa.com을 bbb.ccc.com 으로 리다이렉션 할려면 어떻게 해줘야 하나요?? [1]	2007.08.10
하루사메(春雨)	노프레임 홈을 제작하려면... [3]	2007.08.10
울산사람	웹페이지에 암호입력해야 볼수 있게 할려면...?
김정훈	설문조사 추출 하는거 좀 갈켜 주세여
서정현	iframe 관련 질문입니다. [1]	2007.08.10
산나라	답변형 게시판에서...원본글 번호에 디폴트값이 들어가버립니다 ㅠ_ㅠ [1]	2007.08.10
김성목	동영상 복사 못하게 하는 소스좀 알려주세요

태그 쓰기

묻고답하기

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

댓글 4

SeungXE

쫑효다컴

SeungXE 님

SeungXE

SeungXE

About

Get involved

Blog

Download

Support

Showcase