좌우 사이즈 맞추기 ??
본문
이전꺼는 복잡한거 같고, 다른 것들과도 문제가 있어서 이거로 변경했는데요..
http://sir.co.kr/bbs/board.php?bo_table=g5_skin&wr_id=2661&sca=%EC%B5%9C%EC%8B%A0%EA%B8%80&page=2
<-- 이 스킨 맨 아래에 있는 부분...
안에 css 부분에서 이미자 사이즈나 좌우, 중간 공백등 변경할만한거 해서 좌측이나 이미지 개수등은 다 맞춘거 같은데, 오른쪽이 또 비더군요 ;;
<-- 메인 페이지 상단 부분 입니다.
오른쪽 맞추려면 어디를 좀 봐야 할까요?
좌우 사이즈 맞추는게 참 힘드네요 ;;
답변 5
http://mandeulgo.net/example/ex3.html
이미 간격이 맞는겁니다.
http://mandeulgo.net/example/ex4.html
이걸원하신다면
#wrapper {border:1px solid #000;padding:0 15px;}
이렇게 컨텐츠 내용을 변경하면됩니다.
http://mandeulgo.net/example/ex5.html
디자인을 잘 보세요.
컨텐츠의 여백 배치와 상단의 가로폭.. 일관성이 결여되었기때문에 발생하는 "착시"현상일뿐입니다...
에효;; 수정했다 원상복구 시켰는데, 아예 망가졌네요..
작동을 안하네요 ㅠㅠ
쉽게 해결될게 아닌가 보네요.
감사합니다. 따로 적어놓고 봐야 겠네요.
슬라이더 중간에 br이 들어가네요 빼세요 -0-
앗 감사합니다.
찾았습니다. 그게 영향이 있는지 몰랐네요 ;;
억지로 줄 맞추려고 하다보니 ;;;
default.css 에서 #container 오른쪽 패딩값을 0으로 해보세요.
#container {z-index:4;position:relative;float:left;padding:15px 16px 15px 0px; ~~ }
감사합니다. 알려주신데로 뒤에 15px --> 0px로 변경하였으나, 변화가 없네요 ;;
css체크해보시면
#wrapper 의 가로폭이 980 에 margin 0 auto
bx-wrapper(슬라이더 wrap div) 는 950에 margin 0 auto 입니다.
둘다 중앙 정렬이므로 사실 지금 중앙정렬이 된 상태입니다.
wrapper 의 컨테이너 부분에 좌우측 패딩 15px이 들어가서 슬라이더가 좌측으로 쏠려 보이는겁니다.
원칙적으로 #wrapper 내부에 보이는 컨텐츠 내용들(좌측 15px를 뺀 965px) 과 슬라이더의 폭을 맞추기 위해서는
심플하게는 div.wrap_bot > div.bx-wrapper {padding-left:7.5px;} 를 넣으시면 되겠습니다.
(.... 기본적으로 디자인을 다시 고려해보심이 맞는거 같습니다.)
(추천 css)
1. #container 의 좌우 padding을 삭제한다.
2. #container 와 aside 의 간격은 aside 의 좌측 padding이나 container 의 우측 마진으로 처리한다.
3. 슬라이더를 div로 한번 감싸고 980px margin 0 auto 를 준다.
4. 슬라이더가 표현되는 이미지의 간격을 (가로폭 또는 margin) 맞춘다.
해당글에서 설명했던 소스 중에서 아래 부분만 'css/default.css'의 '#wrapper' 아래에 넣어줍니다.
.wrap_main{width:100%;margin:0 auto;background:#f2f2f2;}
.section_main{padding:15px;width:970px;margin:0 auto;zoom:1;}
.section_main:after{visibility:hidden;content:"";display:block;clear:both}
.section_main .main{float:left;width:968px;border-right:1px solid #dde4e9;border-left:1px solid #dde4e9}앞에서도 말씀드렸지만... 스킨의 문제보다는 default.css에서 제대로 규정하지 못한 때문으로 생각합니다.
<div class="wrap_main">
<div class="section_main">
<div class="main"><?php echo latest("section_bot", "게시판 아이디", "10", "30");?></div>
</div>
</div>
예시 : http://liberta1980.co-story.net
'콘텐츠 안에 넣으려면... <div id="wrapper"> 아래에 넣어줍니다.
'css/default.css'에 삽입하는 소스는... 아래와 같이 padding 값만 '0'로 수정합니다.
.wrap_main{width:100%;margin:0 auto;background:#f2f2f2;}
.section_main{padding:0px;width:970px;margin:0 auto;zoom:1;}
.section_main:after{visibility:hidden;content:"";display:block;clear:both}
.section_main .main{float:left;width:968px;border-right:1px solid #dde4e9;border-left:1px solid #dde4e9}아~ 폭을 980px로 수정하셨다면...
위 소스에서...
970 → 980
968 → 978
로 바꾸세요.
문제는 wrapper 안의 좌측 컨텐츠 부분에 padding-left 값이 있고 aside 에 우측 padding 이 없으므로
사실상 wrapper의 컨텐츠가 눈에 보이는 부분은 width:965px;padding-left:15px; 이 됩니다..
따라서 가운데 정렬(margin:0 auto) 에 근간하여 화면 가운데를 기준으로 490px이 좌우로 나오는 구조에서
눈에 보이는건 좌측으로 475px 우측으로 490px이 보이는거지요.
이는 상단 slider의 지금 가로폭 950px 을 기준으로 답변자님의 css대로 할 경우 slider의 가로폭이 978이 되므로
가운데 정렬하면 좌측 489px 우측 489px이 되고 슬라이더가 해당 영역내에서 가운데 정렬일때 좌우 여백이 15px이라고
가정하면 좌측은 맞을지 모르나 우측이 15px오차가 생기게 될겁니다...
따라서 wrapper 안의 contents와 aside 의 여백을 수정하거나
디자인적으로 wrapper 를 답변자님 예시 사이트처럼 라인을 그어 영역을 눈에 보여주는게 가장 나은 방법일 겁니다..
아, 정말 감사합니다.
알려주신데, 다 했는데, 맞지를 않네요 ;; 아래의 width 값도 변경했구요..
소스는 head 부분에
우측페이지나온 </ul> </div>
밑에 메뉴 부분
아래에 넣었습니다.
</div>
<!-- } 상단 끝 -->
위에 소스 바로 윗부분요..
셈플페이지 보니까 정말 잘하셨던데, 제가 하려던게 저건데 ㅠ
그런데, 오른쪽에 이미지가 좀 짤리네요 ?
그리고 상단에 '더보기' 버튼이 있으면 좋을거 같은...
다시 보니...
문제는 슬라이드 갤러리가 아니라
본문의 container와 aside 부분을 라인을 삭제한다거나 기타 임의로 수정하신 사항이 있기 때문이네요.
원본으로 돌아갔다가 다시 조금씩 수정하는 편이 낫겠습니다.
