CSS질문입니다.
/*
이 CSS코드는 아이폰,아이팟 외 스마트폰환경에서 적절하게 사용할수있도록 게시된 소스입니다.
강좌를 보며 W-RN이 제작했습니다.
*/
body
{
background-color:#FFFFFF;
margin-top:-0px;
margin-left:-0px;
}
#wrap
{
overflow:auto;
width:320px;
/*height:480px;
편의상 주석처리합니다. 따로 필요하신분만 수정.
*/
}
#header
{
background:url(http://m.w-rn.com/images/header.jpg);
background-repeat:no-repeat;
height:36px;
}
#menu
{
background:url("http://m.w-rn.com/images/menu.jpg");
background-repeat:no-repeat;
/*margin-top:-2px;
margin-left:-2px;
margin-right:-8px;
margin-bottom:-2px;
*/
height:23px;
}
#menu p
{
color:#CCFFFF;
font-size:9px;
width:320px;
}
#menu a
{
color:#CCFFFF;
font-size:9px;
width:320px;
}
#header2
{
background:url(http://m.w-rn.com/images/head2.jpg);
background-repeat:no-repeat;
height:44px;
}
#content
{
margin-top:-5px;
}
p
{
margin:0px;
padding-left:0px;
width:320px;
font-size:10px;
font-family:arial,"san serif";
}
#tail
{
background:url(http://m.w-rn.com/images/tail.jpg);
background-repeat:repeat-y;
height:64px;
margin-top:15px;
}
위 내용이 제가 아이폰/안드로이드/아이팟터치 용으로 최적화된 CSS를 보며 만든겁니다.
제가 따로 추가한것두있구요.(기본지식없고..구조만 대충알기에 안맞는 부분도 있다는..)
그런데 제가 소스상에서는 를 이용해 공백을 주었습니다.
그랬더니 가로모드에서는 이미지(메뉴 DIV)가 떨어저서 출력되네요..
해결법 부탁드립니다.
가로모드 소스는 아래와같습니다.
/*
이 CSS코드는 아이폰,아이팟 외 스마트폰환경에서 적절하게 사용할수있도록 게시된 소스입니다.
강좌를 보며 W-RN이 제작했습니다.
가로모드 CSS파일입니다.
*/
body
{
background-color:#FFFFFF;
margin-top:-0px;
margin-left:-0px;
}
#wrap
{
overflow:auto;
width:480px;
/*height:320px; 이부분은 주석처리합니다. */
}
#header
{
background:url(http://m.w-rn.com/images/l_header.jpg);
background-repeat:no-repeat;
height:24px;
}
#menu
{
background:url("http://m.w-rn.com/images/l_menu.jpg");
background-repeat:no-repeat;
height:16px;
}
#menu p
{
color:#CCFFFF;
font-size:12px;
width:480px;
}
#menu a
{
color:#CCFFFF;
font-size:12px;
width:480px;
}
#header2
{
background:url(http://m.w-rn.com/images/l_head2.jpg);
background-repeat:no-repeat;
height:28px;
}
#content
{
margin-top:5px;
}
p
{
margin:5px;
padding-left:25px;
width:480px;
font-size:10px;
font-family:arial,"san serif";
}
#tail
{
background:url(http://m.w-rn.com/images/l_tail.jpg);
background-repeat:repeat-y;
height:42px;
margin-top:15px;
}
여기서 menu 아이디에 폰트 여백 주는 방법과 이미지 여백은 그대로 유지하는 방법을 알려주십시오.
padding 사용했는데.. 이미지만 깨지더군요..
ㅠㅠ;
이 CSS코드는 아이폰,아이팟 외 스마트폰환경에서 적절하게 사용할수있도록 게시된 소스입니다.
강좌를 보며 W-RN이 제작했습니다.
*/
body
{
background-color:#FFFFFF;
margin-top:-0px;
margin-left:-0px;
}
#wrap
{
overflow:auto;
width:320px;
/*height:480px;
편의상 주석처리합니다. 따로 필요하신분만 수정.
*/
}
#header
{
background:url(http://m.w-rn.com/images/header.jpg);
background-repeat:no-repeat;
height:36px;
}
#menu
{
background:url("http://m.w-rn.com/images/menu.jpg");
background-repeat:no-repeat;
/*margin-top:-2px;
margin-left:-2px;
margin-right:-8px;
margin-bottom:-2px;
*/
height:23px;
}
#menu p
{
color:#CCFFFF;
font-size:9px;
width:320px;
}
#menu a
{
color:#CCFFFF;
font-size:9px;
width:320px;
}
#header2
{
background:url(http://m.w-rn.com/images/head2.jpg);
background-repeat:no-repeat;
height:44px;
}
#content
{
margin-top:-5px;
}
p
{
margin:0px;
padding-left:0px;
width:320px;
font-size:10px;
font-family:arial,"san serif";
}
#tail
{
background:url(http://m.w-rn.com/images/tail.jpg);
background-repeat:repeat-y;
height:64px;
margin-top:15px;
}
위 내용이 제가 아이폰/안드로이드/아이팟터치 용으로 최적화된 CSS를 보며 만든겁니다.
제가 따로 추가한것두있구요.(기본지식없고..구조만 대충알기에 안맞는 부분도 있다는..)
그런데 제가 소스상에서는 를 이용해 공백을 주었습니다.
그랬더니 가로모드에서는 이미지(메뉴 DIV)가 떨어저서 출력되네요..
해결법 부탁드립니다.
가로모드 소스는 아래와같습니다.
/*
이 CSS코드는 아이폰,아이팟 외 스마트폰환경에서 적절하게 사용할수있도록 게시된 소스입니다.
강좌를 보며 W-RN이 제작했습니다.
가로모드 CSS파일입니다.
*/
body
{
background-color:#FFFFFF;
margin-top:-0px;
margin-left:-0px;
}
#wrap
{
overflow:auto;
width:480px;
/*height:320px; 이부분은 주석처리합니다. */
}
#header
{
background:url(http://m.w-rn.com/images/l_header.jpg);
background-repeat:no-repeat;
height:24px;
}
#menu
{
background:url("http://m.w-rn.com/images/l_menu.jpg");
background-repeat:no-repeat;
height:16px;
}
#menu p
{
color:#CCFFFF;
font-size:12px;
width:480px;
}
#menu a
{
color:#CCFFFF;
font-size:12px;
width:480px;
}
#header2
{
background:url(http://m.w-rn.com/images/l_head2.jpg);
background-repeat:no-repeat;
height:28px;
}
#content
{
margin-top:5px;
}
p
{
margin:5px;
padding-left:25px;
width:480px;
font-size:10px;
font-family:arial,"san serif";
}
#tail
{
background:url(http://m.w-rn.com/images/l_tail.jpg);
background-repeat:repeat-y;
height:42px;
margin-top:15px;
}
여기서 menu 아이디에 폰트 여백 주는 방법과 이미지 여백은 그대로 유지하는 방법을 알려주십시오.
padding 사용했는데.. 이미지만 깨지더군요..
ㅠㅠ;
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 3개
text-indent:10px; 추가하시면되네요.
파폭 firebug 로 테스트하엿습니다.