그누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개 / 댓글 9개
<div style="top:50;text-align:bottom"> 여기서 top:50 을 50보다 큰 숫자로 지정해보세요.
top:50의 의미는 브라우저 최상단에서부터 거리입니다 (경우에 따라서 div를 감싸고 있는 다른 엘리먼트의 최상단 으로부터의 거리를 의미하기도 하지만 아마도 여기서는 브라우저 최상단일거예요)
답변에 대한 댓글 3개
기본적인 문서의 흐름을 깨고 원하는 위치로 이동시키려면 position 을 이용해서 이동시키시면 됩니다.
<div style="top:50;text-align:bottom"> 해놓으셨는데,
<div style="position: absolut; top: 원하는 숫자값px;"> 으로 이동시키시면 됩니다.
이런코딩보단 default.css의 #tnb {} 스타일에 입력하는게 추천되는 방식이겠죠.
답변에 대한 댓글 1개
사회복지사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}
답변에 대한 댓글 5개
답변을 작성하려면 로그인이 필요합니다.