테스트 사이트 - 개발 중인 베타 버전입니다

head부분 위치 조절방법? 채택완료

사회복지사 7년 전 조회 3,012

 

그누5에 있는 head.php를 그대로 사용하고 있으며 부분적으로 디자인을 수정하여 홈페이지를 만들었습니다. 그림에 보이는 것처럼 회원가입과 로그인 부분이 상단에 붙어 있는데 가운데로 이동할 수 있는 방법이 뭘까요? 소스 필요하실 것 같아 head.php에 있는 거 그대로 붙여 드립니다.

 

       
                                       
  • 관리자
  •                        
  • 정보수정
  •            
  • 로그아웃
  •                        
  • 회원가입
  •            
  • 로그인
  •                    

 

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
j
7년 전

  여기서 top:50 을 50보다 큰 숫자로 지정해보세요. 

top:50의 의미는 브라우저 최상단에서부터 거리입니다 (경우에 따라서 div를 감싸고 있는 다른 엘리먼트의 최상단 으로부터의 거리를 의미하기도 하지만 아마도 여기서는 브라우저 최상단일거예요)

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

사회복지사
7년 전
그건 해 보았습니다...;; 움직이질 않아서 그렇죠... 답변 감사합니다. 다른 방법이 없을까요?
j
janedoe
7년 전
그렇다면 css 가 생각보다 복잡한 것같네요. 해당링크를 올려주셔야 어느부분이 문제인 지 알것같아요. 답변 달아주시는 분들이 그누보드 기본형을 늘 보고있지는 않아서요..
사회복지사
7년 전
css 올려드려요~

댓글을 작성하려면 로그인이 필요합니다.

기본적인 문서의 흐름을 깨고 원하는 위치로 이동시키려면 position 을 이용해서 이동시키시면 됩니다.

해놓으셨는데,

으로 이동시키시면 됩니다.

이런코딩보단 default.css의 #tnb {} 스타일에 입력하는게 추천되는 방식이겠죠.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

사회복지사
7년 전
답글 정말 감사드립니다~ 새해 복 많이 받으시고요. 항상 행복만이 가득하시길 기도드립니다^^

댓글을 작성하려면 로그인이 필요합니다.

사회복지사

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개

j
janedoe
7년 전
css 만 가지고 알 수 있는 부분이 아닙니다. 저 엘리먼트를 감싸고 있거나 주변 html 태그와 그 클래스도 알아야 합니다... 노출이 불편하시다면 html 까지 같이 올려주셔야 하지요
사회복지사
7년 전
아닙니다. url올려드립니다! http://welfarestory.com
j
janedoe
7년 전
<div style="position:relative;top:80px;text-align:bottom; 이렇게 position:relative 를 추가해주시고 top 수치를 변경해보세요. top , left 값같은 css 사용하실때는 포지션이 있어야 작동이 됩니다
사회복지사
7년 전
감사합니다. 깊은 관심과 도움을 주셔서 너무 감사하네요. 2018년은 꼭 janedoe님의 해가 되시길 간곡하게 기도드립니다^^
j
janedoe
7년 전
아이고 송구합니다 ... 사이트 마무리 잘 하셔요 . 감사합니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인