메뉴를 클릭하면 들썩거리는데, 고정시킬 수 있는지요?
관련링크
본문
어제부터 메뉴때문에 골치 아프네요.
어제 글자 크기를 맞추는것은 도움을 받아 잘 되었는데, 몇가지 문제가 계속 따르네요.,
https://yoriyo.com/ 상단 메뉴를 클릭하면 갤러리, 맛집, 동영상은 고정되어 문제가 없는데
아래와 같이 php로 따로 css를 지정한 랜덤메뉴 만 클릭하면 상단이 들썩거립니다.
https://yoriyo.com/theme/yoriyo/food.php
이것만 들어가면 메뉴가 흔들리네요.
아마 food.php에 쓰는 css와 테마의 css 충돌 때문인것 같은데 어디가 문제인지 알 수 없네요.
메뉴가 고정되도록 도움주시면 감사하겠습니다.
아래는 food.php 에 쓰는 css 입니다.
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@charset "utf-8";
/* 초기화 */
html {overflow-y:scroll;height:100%;min-width:320px}
body {margin:0;padding:0;font-size:0.813em;;height:100%;font-family: 'Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;}
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}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
input, button {margin:0;padding:0;font-size:1em;font-family: 'Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;}
button {cursor:pointer}
input[type=text], input[type=password], input[type=submit], input[type=image], button {font-size:1em;-webkit-appearance:none}
textarea, select,button {font-size:1em;font-family:'Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;}
textarea {border-radius:0;-webkit-appearance:none}
select {margin:0;background:none}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}
ul,li,dl,dt,dd{padding:0;margin:0}
ul{list-style:none;}
*, :after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* 상단 레이아웃 */
#hd_wrapper{margin:0 auto;
margin-top: -15px !important;}
.gnb_1da {position:relative;float:left;line-height:45px;margin:20px 0;font-size:1.5em;font-weight:bold}
/* Reset */
*, *::before, *::after {
box-sizing: border-box;
}
ul[class], ol[class] {
padding: 0;
}
ul[class], ol[class] {
list-style: none;
}
a:not([class]) {
text-decoration-skip-ink: auto;
}
img {
max-width: 100%;
display: block;
}
article > * + * {
margin-top: 1em;
}
input, button, textarea, select {
font: inherit;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-play-state: paused !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
header {
width: 100vw;
height: 60px;
background: #222;
color: #fff;
padding: 15px;
}
.sidebar {
background: #f0f0f0;
box-shadow: -10px 0 20px inset rgba(37, 40, 42, 0.2);
}
.sidebar img {
border-radius: 5px;
margin: 15px 0;
}
.sidebar h3 {
margin: 0 15px 15px;
}
.sidebar ul {
list-style-type: none;
font: bold 16px/1.25 Arial, Helvetica, sans-serif;
padding: 0;
margin: 15px;
}
.sidebar ul li {
margin-bottom: 15px;
}
.content {
padding: 15px;
}
.content h2 {
margin: 0 0 15px;
}
.content ol {
list-style: none;
counter-reset: step-counter;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.content ol li {
counter-increment: step-counter;
display: flex;
width: 100%;
font-size: 16px;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #f0f0f0;
}
.content ol li::before {
content: "0" counter(step-counter);
color: #d0d0d0;
font-weight: bold;
font-size: 36px;
margin-right: 24px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
margin: 30px 0;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.polaroid {
background: #fff;
display: inline;
float: left;
margin: 0 10px 27px 10px;
width: auto;
padding: 10px 10px 15px;
text-align: center;
font-family: "Marker Felt", sans-serif;
text-decoration: none;
color: #333;
font-size: 18px;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
-webkit-transform: rotate(-2deg);
-webkit-transition: -webkit-transform 0.15s linear;
-moz-transform: rotate(-2deg);
}
답변 4
다른것들과 css가 다르네요
예, 이것을 margin-top을 똑 같이 주면 food.php 상단 메뉴가 밑으로 떨어져서 위로 당기다보니 값을 -15px변경했습니다. 이렇게 하지 않으면, 메뉴가 밑으로 떨어지더라고요....
food.php도 나머지 bbs 밎 인덱스와 같은 head로 묶으면 처리되지 않을까 생각되네요
왜 분리하신지는 모르겠지만..
제가 분리하고 싶어 한것이라기 보다는 다른 곳의 소스를 받아다가 합치다 보니 그리되었습니다.
여기저기 소스를 긁어다 모아 이리 되었습니다.
아직도 들썩이는 메뉴는 고치지 못하고 있습니다.
말씀주신 것도 한번 시도해보도록 하겠습니다.
친절한 댓글에 감사드립니다.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.5.0/modern-normalize.min.css'>
이 가능성이 있어 보입니다.
한번 빼보고, 변화가 없다면.. 해당파일에만 추가된 css 를 하나씩 차례로 빼보면서 테스트를 해볼 수 있을 듯 합니다.
알려주신대로 위 css를 제거하고 ctrl F5를 누르고, 크롬에서 쿠키 삭제 했음에도 들썩거리는 것은 그대로입니다. 뭔가 충돌이 있는것 같은데 정말 알 수 없네요. 도움 말씀에 감사드립니다.
조금 무식한 방법으로는.. (저도 아주 가끔씩은 쓰는 방법입니다.)
다른 공통페이지들과 다르게..
해당 페이지에서만 추가적으로 들어간
<script ~>
<css ~ >
부분을 모두 뺀 다음..
하나씩 넣어가면서 테스트해서.. 문제 css 또는 스크립트를 찾는 방법입니다.
커스텀 페이지가 조금 안맞게 생성된 것으로 보입니다.
다음글을 참고하여 새로 만들어보는 것을 추천하겠습니다.
=>
http://www.gnuwiz.com/bbs/board.php?bo_table=gnu_study&wr_id=13
현재 페이지 경로가 /theme/yoriyo/food.php 인데..
/sub 폴더를 생성하여 /sub/food.php 로 만드는 것을 추천하겠습니다.
/theme/yoriyo/food.php 로 하는 경우에는..
common.php 인클루드 경로를 include_once('../../common.php');로 수정되어야 합니다.
자문자답입니다.
메뉴가 들썩이고 흔들리는 것이 헤더의 패딩값이 주어졌기에 그러했네요.
padding 값은 0으로 주니 메뉴가 흔들리지 않습니다.
댓글로 친절하게 여러모로 도움말씀 주신 회원님께 감사드립니다.
header {
width: 100vw;
height: 60px;
background: #222;
color: #fff;
padding: 0px;
}
