head부분 위치 조절방법?
본문
그누5에 있는 head.php를 그대로 사용하고 있으며 부분적으로 디자인을 수정하여 홈페이지를 만들었습니다. 그림에 보이는 것처럼 회원가입과 로그인 부분이 상단에 붙어 있는데 가운데로 이동할 수 있는 방법이 뭘까요? 소스 필요하실 것 같아 head.php에 있는 거 그대로 붙여 드립니다.
<div style="top:50;text-align:bottom">
<ul id="tnb">
<?php if ($is_member) { ?>
<?php if ($is_admin) { ?>
<li><a href="<?php echo G5_ADMIN_URL ?>"><b>관리자</b></a></li>
<?php } ?>
<li><a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=<?php echo G5_BBS_URL ?>/register_form.php">정보수정</a></li>
<li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>
<?php } else { ?>
<li><a href="<?php echo G5_BBS_URL ?>/register.php">회원가입</a></li>
<li><a href="<?php echo G5_BBS_URL ?>/login.php"><b>로그인</b></a></li>
<?php } ?>
</ul>
</div>
답변 3
<div style="top:50;text-align:bottom"> 여기서 top:50 을 50보다 큰 숫자로 지정해보세요.
top:50의 의미는 브라우저 최상단에서부터 거리입니다 (경우에 따라서 div를 감싸고 있는 다른 엘리먼트의 최상단 으로부터의 거리를 의미하기도 하지만 아마도 여기서는 브라우저 최상단일거예요)
그건 해 보았습니다...;; 움직이질 않아서 그렇죠... 답변 감사합니다. 다른 방법이 없을까요?
그렇다면 css 가 생각보다 복잡한 것같네요. 해당링크를 올려주셔야 어느부분이 문제인 지 알것같아요. 답변 달아주시는 분들이 그누보드 기본형을 늘 보고있지는 않아서요..
css 올려드려요~
기본적인 문서의 흐름을 깨고 원하는 위치로 이동시키려면 position 을 이용해서 이동시키시면 됩니다.
<div style="top:50;text-align:bottom"> 해놓으셨는데,
<div style="position: absolut; top: 원하는 숫자값px;"> 으로 이동시키시면 됩니다.
이런코딩보단 default.css의 #tnb {} 스타일에 입력하는게 추천되는 방식이겠죠.
답글 정말 감사드립니다~ 새해 복 많이 받으시고요. 항상 행복만이 가득하시길 기도드립니다^^
css 소스입니다!
/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:dotum}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:dotum}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
#hd ul, nav ul, #ft ul {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-family:dotum;font-size:1em}
button {cursor:pointer}
textarea, select {font-family:dotum;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {color:#000;text-decoration:none}
a:hover, a:focus, a:active {color:#000;text-decoration:none}
/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;width:970px;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con {}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}
/* 상단 레이아웃 */
#hd {z-index:4;position:relative;min-width:1000px;background:#fff}
.hd_zindex {z-index:10 !important}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_wrapper {position:relative;margin:0 auto;padding:0px 0;width:1000px;zoom:1}
#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#logo {float:left;padding:0px 0 0}
/* 전체 검색 */
#hd_sch {float:left;margin:0 0 0 840px;padding:0;border:1px solid #c3c6ca}
#hd_sch legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#hd_sch #sch_stx {padding-left:5px;width:110px;height:24px;border:0;background:#fff;line-height:1.9em !important;line-height:1.6em}
#hd_sch #sch_submit {padding:0 5px;height:26px;border:0;background:#e2e6eb;color:#333;cursor:pointer}
/* 텍스트 크기 조절 */
#text_size {float:left;margin:0 0 0 10px;letter-spacing:-3px}
#text_size button {margin:0;padding:1px 2px;border:1px solid #c3c6ca;background:transparent;vertical-align:middle;cursor:pointer}
.ts_up {font-size:1.167em !important}
.ts_up2 {font-size:1.3em !important}
/* 상단 회원가입 등 링크 */
#tnb {float:right;margin:0;padding:0;list-style:none;zoom:1}
#tnb:after {display:block;visibility:hidden;clear:both;content:""}
#tnb li {float:left;margin:0 0 0 10px}
#tnb a {display:inline-block;padding:0 10px;height:28px;color:#333;letter-spacing:-0.1em;line-height:2.4em}
#tnb a:focus, #tnb a:hover, #tnb a:active {text-decoration:none}
#tnb img {margin-right:0px}
/* 메인메뉴 */
#gnb {position:relative;margin:0px 0 0;border-top:0px dotted #dde4e9;border-bottom:0px solid #dde4e9;background:#1F50B5}
#gnb h2 {position:absolute;font-size:0;;font-color:#ffffff;line-height:0;overflow:hidden}
#gnb_1dul {margin:0 auto !important;padding:0;width:1000px;zoom:1}
#gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1dli {z-index:10;position:relative;float:left}
.gnb_1da {display:inline-block;padding:0 40px 0 10px;height:35px;background:url('../img/gnb_bg00.gif') center right no-repeat;font-weight:bold;line-height:2.95em;text-decoration:none; color:#FFF !important; }
.gnb_1da:focus, .gnb_1da:hover {background:url('../img/gnb_bg00.gif') #333 center right no-repeat;text-decoration:none}
.gnb_1dli_air .gnb_1da {background-color:#333;color:#fff}
.gnb_1dli_on .gnb_1da {background-color:#333;color:#fff}
.gnb_2dul {display:none;position:absolute;top:35px;width:180px}
.gnb_2da {display:block;padding:13px 10px;text-align:left;text-decoration:none}
.gnb_1dli_air .gnb_2da {background-color:#333;color:#fff}
.gnb_1dli_on .gnb_2da {background-color:#333;color:#fff}
.gnb_2da:focus, .gnb_2da:hover {background:#666;text-decoration:none}
.gnb_1dli_over .gnb_2dul {display:block;left:0;background:#fff}
.gnb_1dli_over2 .gnb_2dul {display:block;right:0;background:#fff}
#gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2em}
#gnb_empty a {text-decoration:underline}
css 만 가지고 알 수 있는 부분이 아닙니다. 저 엘리먼트를 감싸고 있거나 주변 html 태그와 그 클래스도 알아야 합니다... 노출이 불편하시다면 html 까지 같이 올려주셔야 하지요
아닙니다. url올려드립니다! http://welfarestory.com
<div style="position:relative;top:80px;text-align:bottom; 이렇게 position:relative 를 추가해주시고 top 수치를 변경해보세요. top , left 값같은 css 사용하실때는 포지션이 있어야 작동이 됩니다
감사합니다. 깊은 관심과 도움을 주셔서 너무 감사하네요. 2018년은 꼭 janedoe님의 해가 되시길 간곡하게 기도드립니다^^
아이고 송구합니다 ... 사이트 마무리 잘 하셔요 . 감사합니다