CSS 컨텐츠 부분 상단이 밀리는 현상이 있네요. 채택완료
홈페이지 작업중인데요.
컨텐츠부분 상단이 일정하지 못하게 밀리는 현상이 있습니다.
CSS에 대한 이해도가 거의 제로에 가깝다 보니 어떻게 손봐야 될지를 모르겠네요.
현상은 링크 참조 부탁드리구요.
css상에서 컨텐츠 부분을 제어하는 #container 에서 padding 위쪽값이 0인데도
상단 여백이 모든 컨텐츠 화면마다 조금씩 안맞고 밀리는 현상이 있습니다.
가르침 부탁드립니다. ^^;
헤드화일의 마지막 부분인 사이드 메뉴부분 css 내용입니다.
</span></p><p><span style="font-size: 10pt; line-height: 1.5;"></span>/* ====================== SIDE MENU ====================== */</p><p>/* Tutorial CSS */</p><p>#menu-slider {</p><p>padding: 15px; </p><p>margin-bottom: 20px;</p><p>margin-left:-10px;</p><p>}</p><p> </p><p>/* Required */</p><p>#list-images, #list-images li {</p><p>height: 240px; </p><p>width: 170px; </p><p>display: block;</p><p>}</p><p>#list-images {</p><p>float: left;</p><p>overflow: hidden; /* Required to hide the inactive slides */</p><p>border: 0px solid #ccc;</p><p>}</p><p>#list-images li {</p><p>position: relative;</p><p>top:20px;</p><p>left:0px;</p><p>}</p><p> </p><p>#list-images li img {</p><p>background: #fff; </p><p>position: absolute; </p><p>top: 20; </p><p>left: 0;</p><p>}</p><p> </p><p>/* Image captions */</p><p>#list-images li span {</p><p>background: url(../images/grid1.png) repeat 0 0; </p><p>position: absolute; </p><p>bottom: 0; </p><p>left: 0; </p><p>width: 250px; </p><p>display: block; </p><p>padding: 14px 20px; </p><p>font: bold 20px; </p><p>font-family:'Nanum Gothic', 'malgun gothic', 'dotum';</p><p>color: #fff; </p><p>height: 20px; </p><p>line-height: 20px;</p><p>}</p><p> </p><p>/* Menu text links */</p><p>#list-links {</p><p>width: 170px; </p><p>float: left;</p><p>}</p><p>#list-links li {</p><p>padding: 0 15px 0 0;</p><p>}</p><p>#list-links li a {</p><p>font: normal 12px; </p><p>font-family:'Nanum Gothic', 'malgun gothic', 'dotum';</p><p>color: #222; </p><p>padding: 8px 5px 8px 8px; </p><p>border-bottom: 1px solid #ccc; </p><p>font-weight: bold; </p><p>font-size: 13px; </p><p>display: block;</p><p>}</p><p>#list-links li.hover {</p><p>background: url(../images/tab_current.png) no-repeat 100% center;</p><p>}</p><p>#list-links li.hover a, #list-links li.hover a:hover {</p><p>color: #fff; </p><p>background: none; </p><p>border-bottom: none; </p><p>padding-bottom: 9px;</p><p>}</p><p>#list-links li.last a {</p><p>border-bottom: none;</p><p>}<span style="font-size: 10pt; line-height: 1.5;"> </span></p><p>
그리고 컨텐츠 부분 css 내용입니다.
</p><p>/* 중간 레이아웃 */</p><p>#wrapper {z-index:5;margin:0 auto;width:960px;border:0px;zoom:1}</p><p>#wrapper:after {display:block;visibility:hidden;clear:both;content:""}</p><p> </p><p>#aside {float:left 0px;margin:0 0 0 -1px;width:210px;border:0px;}</p><p> </p><p>#container {z-index:4;position:relative;float:left;padding:0px 16px 15px 40px;width:730px;min-height:100%;height:auto !important;height:100%;border:0px;font-size:1em;zoom:1}</p><p>#container:after {display:block;visibility:hidden;clear:both;content:"";overflow:hidden;}</p><p>#container_title {margin-bottom:20px;font-size:1.2em;font-weight:bold} </p><p>
답변 4개
그런데 적용하신 사이드 메뉴 css를 보면... 210px이 넘는 값이 보이네요.<br />
패딩값 포함하여 210px로 맞추세요.<br />
skin/outlogin의 style.css를 참고하세요.
답변에 대한 댓글 4개
css가 이렇게 어려울거라곤 상상도 못했습니다.
답변 주신부분은 다시한번 감사말씀 드립니다.
패딩값들도 다시 살펴보시구요.
고민하고 있었네요 ^^ㅋ
다시한번 찾아봐야겠습니다. 감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
css의 세계는 참으로 어렵습니다. ㅎ
답변 감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
게시판의 에디트를 이용하여 이미지를 넣으셨네요.
게시물 수정 들어 가셔서 게시판 에디트를 html모드로 바꾸신후 해당 이미지 소스위의 모든 코드를 지워보시기 바랍니다.
가끔 이런경우도 있어서요 ^^
답변에 대한 댓글 3개
게시판 에디트를 이용해서 이미지를 넣은건 아니구요.
모든 소스는 에디트플러스 하나만 사용하고 있습니다.
게시글때문에 생기는 현상은 아닌것 같아서요.
에디트 플러스로 어떻게 저렇게 이미지를 올리시나요? ^^ 글쓰기 모드에서 이미지를 올리면 그 이미지가 보여질 때 링크가 위처럼 되거든요.
또
<section id="bo_v_atc">
<h2 id="bo_v_atc_title">본문</h2>
<div id="bo_v_img">
</div>
<div id="bo_v_con"><center><img src="http://zzangkil.godohosting.com/data/editor/1410/2040740523_1413547036.41.gif" width="765" alt="2040740523_1413547036.41.gif" /></center></div>
</section>
색션 안에 <div id="bo_v_img"></div> 이코드는 아무 의미가 없는데 소스에 포함하고 있네요.
어쩌면 bo_v_img의 id값안에 무엇인가 설정이 되어 공간을 잡고 있는것이 아닌가 생각 됩니다.
그리고 <h2 id="bo_v_atc_title">본문</h2> 이부분을 사용하실일은 거의 없을듯 한데 삭제하셔도 무방할듯 합니다.
일종의 게시글인셈이지요.
또한 <section id="bo_v_atc"> 이하 소스는 해당 html 게시판 자체 소스입니다.
현재의 증상과는 관련이 없는 내용이에요. ^^
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
저는 계속 bottom값만 찾아다니고 있었네요.
냉큼 찾아서 210에 맞춰봐야겠습니다. ^^;