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