div padding 값 왜 이리 속을 썩이나요? ㅠㅠ

div padding 값 왜 이리 속을 썩이나요? ㅠㅠ 정보

div padding 값 왜 이리 속을 썩이나요? ㅠㅠ

물한모금 홈페이지 자기소개 아이디로 검색 회원게시물 (211.♡.♡.141)
2010.03.12 13:24:49
2,837

본문

li 안에 div 두 개를 넣고 위 아래로 배치했는데......
div padding 값을 주면 자꾸 옆으로 삐죽삐죽 나오네요.ㅠㅠ




저래 맞게 나와야 하는데,
글자를 들여쓰려고 패딩값을 주면




한놈이 삐죽 나오네요.ㅠㅠ
그런데, 이상한 건 위엣놈에게도 똑같은 패딩값을 주었는데, 위엣놈은 안나오더라는 거죠.;;
초하수에게는 미스터~리, 불가사~리......

익스에서는 padding, border 값이 전체 width 값에 포함되니까 그런 현상이 없는데,
표준계열 브라우저들이 아주 속을 썩이네요.ㅠㅠ

이거 가지고 며칠 동안 고민했다고 하면 고수님들 배꼽 잡고 웃으시겠지요.
예, 저 하수 맞고요.......ㅠㅠ

끙끙 앓다가 방금 전 width 값을 auto로 주니까 더이상 삐죽거리지는 않는데.....
고수님들은 이런 경우 어떻게 맞춰 주시나요?

기본부터 제대로 알아야겠습니다. 저를 정석의 길로 인도해 주세요!

댓글 7개

물한모금 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

(211.♡.♡.141)

10.03.12 13:31:12

.guide_main { margin:10px 0 0 0; padding:0; border:0; font-family:gulim; } /*ul 스타일*/

.guide_main li { width:100%; line-height:30px; margin:4px 0 12px 0; }

.guide_main li .title { height:30px; padding-left:10px; background-color:#DADADA; border:1px solid #FFF; font-size:12px; color:#333; }

.guide_main li .content { height:auto; margin-top:2px; padding-left:10px; background:#FFF; background-color:#FAFAFA; border:1px solid #FFF; }

이랬더니, 아랫넘(.content)이 삐죽거렸습니다.ㅠㅠ
그래서 .content에 width:auto;를 주었더니 바로 잡히네요.

아이고 기초가 부실하니 이 모양이에요.

오누리 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

(211.♡.♡.67)

10.03.12 14:01:46

저도 저런현상땜에 고생한적이 있었더랬죠.
방법은 여러가지가 있는데,
아래처럼 dtd 선언하구 넓이 값에 padding이랑 마진등의 공백을 포함해서 계산하면 되더군요.

단 요놈 선언하면 심하게 요동치는 (?) 소스가 있을 수 있어서 다 잡아줘야됨.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

물한모금 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

(211.♡.♡.141)

10.03.12 14:12:19

으악... dtd ㅠㅠ dtd 선언은 개별 php 페이지에 못하지 않나요?
으흑... 언젠가는 dtd도 공부해야 하는데, 좋은 팁 주셨습니다.
감사드립니다. (__)

아미가 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

(218.♡.♡.140)

10.03.12 14:12:50

DTD 선언만으로 해결 안 되는 경우도 많습니다.
소스에 따라서는 DTD가 선언되면 자바스크립트가 엉망이 되거나 스타일시트가 엉망이 되는 경우도 있죠.(이것 동적 페이지 제작할 때 발생하는 문제입니다. 단순 익스 전용 스크립트는 배제한 내용이지요.)
경우에 따라서는 부득불 iframe 을 쓰기도 하는데 지금 고민하시는 것은 가장 기초적인 고민입니다.
이미지로 버무린 제 사이트는 처음엔 고생 꽤나 했지요.
지금은?
거의 주요 브라우저에서 동일한 것처럼 보입니다.(동일 못하는 이유가 있는데 완벽히 패딩값과 마진값을 일치시키기 어렵다는 것인데 틀이 깨지거나 이상하게 틀어지는 현상은 다 잡았습니다.)
방법은?
표준 브라우저에 맞추어 작업을 해놓고 익스는 버전에 따라 핵을 먹입니다. 그나마 8은 말을 잘 듣는데 6은 꽝이지요. 그래서 주로 6에 맞추어 핵을 먹이면서 하나씩 잡아 갑니다.
말은 쉬운데 실행에 옮길려면 머리털 다 짜지지요.
그나마 게시판이 제일 쉬웠고 갤러리 게시판이 가장 어려웠던 것으로 기억합니다. 테이블처럼 퍼센트에 맞추어 알아서 가운데 정렬을 못하는 브라우저가 많더군요.
div 와 css 를 만나는 순간 혼란과 짜증의 세계로 들어오신 것이라 생각하시면 정답일 듯 합니다.
시간을 절약하시려면 관련 책을 구입해 보셔야 할 듯...
전 혼자 독학하려다 아까운 시간 많이 소비했습니다.