테스트 사이트 - 개발 중인 베타 버전입니다
SIR

레이아웃이 비뚤합니다.

바다로가자
프로필 보기이 회원 글보기
 · 13년 전 · 1592 · 3

링크

http://badaro09.cafe24.com/index1.php (154)
간단한 레이아웃입니다.
인크루드로 들어갈 파일인데요.
(아이프레임처럼 만들려고요)

근데, 레이아웃이 정말 안잡히네요.
이렇게 저렇게 태그써봐도 안잡히고
만들어놓으면, 브라우저나 버전따라 다르게 나오니.

어렵습니다.

헤드 스타일 부분이 레이아웃입니다.
아래 이미지 파일이 내용물이고요.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>부산, 자연, 풍경</title>


<style type="text/css">

#align {   
width:100%;   
text-align:center;   
} 

#content { 
margin:0px auto; /*위에서 센터로 놨음에도 또 이걸 해 주는 건 IE외의 다른 브라우저에선 이게 없으면 다시 왼쪽으로 붙기 때문이에요*/  
padding: 35px 0px 0px 0px;
width:705px; 
height:410px;
text-align:left;   
}

#menu1 {
   padding-left: 110px;
}


#menu2 {
   padding-left:: 140px;
        }

#menu3 {
   padding-left: 80px;
        }
#menu4 {
   padding-left:110px;
       }

</style>


</head>





<body>



<div id="aline">
<div id="content">





<span id="menu1">
<img src="http://badaro09.cafe24.com/img/bumenu1.gif" onMouseOver="this.src='http://badaro09.cafe24.com/img/bumenu11.gif'"
onMouseOut="this.src='http://badaro09.cafe24.com/img/bumenu1.gif'"
onclick="location.href='http://badaro09.cafe24.com/gnuboard4/bbs/board.php?bo_table=badaro09_1'"/>
</span>


<span id="menu2">
<img src="http://badaro09.cafe24.com/img/bumenu2.gif" onMouseOver="this.src='http://badaro09.cafe24.com/img/bumenu21.gif'"
onMouseOut="this.src='http://badaro09.cafe24.com/img/bumenu2.gif'"
onclick="location.href='http://badaro09.cafe24.com/gnuboard4/bbs/board.php?bo_table=badaro09_1'"/>
</span>


<span id="menu3">
<img src="http://badaro09.cafe24.com/img/bumenu3.gif" onMouseOver="this.src='http://badaro09.cafe24.com/img/bumenu31.gif'"
onMouseOut="this.src='http://badaro09.cafe24.com/img/bumenu3.gif'"
onclick="location.href='http://badaro09.cafe24.com/gnuboard4/bbs/board.php?bo_table=badaro09_1'"/>
</span>


<span id="menu4">
<img src="http://badaro09.cafe24.com/img/bumenu4.gif" onMouseOver="this.src='http://badaro09.cafe24.com/img/bumenu41.gif'"
onMouseOut="this.src='http://badaro09.cafe24.com/img/bumenu4.gif'"
onclick="location.href='http://badaro09.cafe24.com/gnuboard4/bbs/board.php?bo_table=badaro09_1'"/>
</span>




</div>
</div>





</body>


</html>



목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 3개

누구얏
프로필 보기이 회원 글보기
 13년 전
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>부산, 자연, 풍경</title>
<style type="text/css">
#align {width:100%; text-align:center;}
#content {
margin:0px auto;
padding: 35px 0px 0px 0px;
width:400px;
height:410px;
/* text-align:left; */
}
#content span {display:block; float:left; width:170px; padding:0 10px;}
/*
#menu1 {padding-left: 110px;}
#menu2 {padding-left:: 140px;}
#menu3 {padding-left: 80px;}
#menu4 {padding-left:110px;}
*/
</style>
</head>
<body>
<div id="aline">
<div id="content">
<span id="menu1">
<img src="http://badaro09.cafe24.com/img/bumenu1.gif" onMouseOver="this.src='http://badaro09.cafe24.com/img/bumenu11.gif'"
onMouseOut="this.src='http://badaro09.cafe24.com/img/bumenu1.gif'"
onclick="location.href='http://badaro09.cafe24.com/gnuboard4/bbs/board.php?bo_table=badaro09_1'"/>
</span>
<span id="menu2">
<img src="http://badaro09.cafe24.com/img/bumenu2.gif" onMouseOver="this.src='http://badaro09.cafe24.com/img/bumenu21.gif'"
onMouseOut="this.src='http://badaro09.cafe24.com/img/bumenu2.gif'"
onclick="location.href='http://badaro09.cafe24.com/gnuboard4/bbs/board.php?bo_table=badaro09_1'"/>
</span>
<span id="menu3">
<img src="http://badaro09.cafe24.com/img/bumenu3.gif" onMouseOver="this.src='http://badaro09.cafe24.com/img/bumenu31.gif'"
onMouseOut="this.src='http://badaro09.cafe24.com/img/bumenu3.gif'"
onclick="location.href='http://badaro09.cafe24.com/gnuboard4/bbs/board.php?bo_table=badaro09_1'"/>
</span>
<span id="menu4">
<img src="http://badaro09.cafe24.com/img/bumenu4.gif" onMouseOver="this.src='http://badaro09.cafe24.com/img/bumenu41.gif'"
onMouseOut="this.src='http://badaro09.cafe24.com/img/bumenu4.gif'"
onclick="location.href='http://badaro09.cafe24.com/gnuboard4/bbs/board.php?bo_table=badaro09_1'"/>
</span>
</div>
</div>
</body>
</html>

콘텐츠 안에 span값과 이미지 너비값이 다 똑같길래 하나의 span에 속성을 준거고용;;
content의 너비가 705로 되어있는걸 400으로 바꾸고 나머지는 2줄 정렬되도록 안쪽여백값을 양쪽으로 줘서 content영역안에 가운데로 정렬되도록 바꿨습니다.

span은 기본적으로 block속성의 요소가 아니므로 안쪽여백값이 잘 안먹기도 합니다
이럴땐 display:block요소로 block으로 지정시키고 나서 왼쪽정렬로 애들이 옆으로 붙게 만들었어요.
이미지 크기가 170px인거 같고..혹시나 몰라서 170px이라고 span의 너비값을 고정시켰습니다.(고정은 안시켜도 될꺼같네요)

어떤레이아웃을 표현하려고 하시는지는 제대로 모르겠지만 소스 보시고 참고하시면 됩니다.
span의 각각의 ID값은 주석처리해놨습니다;;
그럼 수고하세요;;
바다로가자
프로필 보기이 회원 글보기
 13년 전
님글 도움 많이 되었습니다. span 속성에 대해 잘 몰랐던걸 알게 됐네요.
제가 원하는 모양새는 만들어진거 같은데,
한가지 아쉬운건 익스 6 이하버전에서는 모양이 엉망된다는 건데,
이건 다음에 풀어야 될듯요.
누구얏
프로필 보기이 회원 글보기
 13년 전
익스6은 생각을 못했네요 ㅋㅋㅋ
당연히 될줄알았습니다 ㅋㅋㅋㅋㅋㅋㅋ
익스6에서 어떤 문제가 발생되는지 알수가없으니 답을 못 드리겠네요;;ㅎㅎ
여튼 공부 열심히 하셔서 멋진 홈페이지 만드시길 바랍니다~

게시글 목록

번호 제목
12438
JavaScript 배경음악 랜덤 재생 하기 입니다.
12437
JavaScript css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
12436
JavaScript 하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.
12435
JavaScript 개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
12434
JavaScript 랜덤으로 이미지 출력 되기 입니다.
12433
JavaScript 사용자 해상도 알아내기 입니다.
12432
JavaScript 붙여넣기 금지하기 입니다.
12431
MySQL 대소문자 데이터 조회하기
12430
JavaScript 퇴장시 팝업창 한번한 띄우기 입니다.
12429
PHP www 주소 리다이렉션 시켜주기 입니다.
12428
PHP 신문 기사를 긁어오기 입니다.
12427
JavaScript 시도, 구군, 동 주소 select
12426
MySQL 커리로 DB 테이블 명세서 출력하기
12425
JavaScript 브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다
12424
PHP rss 읽어오기 입니다.
12423
JavaScript 자바스크립트로 Ajax 효과내기 입니다.
12422
기타 css 마우스 오버, 테두리
12421
JavaScript 키보드,마우스 등 불펌방지 입니다.
12420
JavaScript 해상도에 따라 서로 다른 페이지로 접속 하기 입니다.
12419
JavaScript 특정페이지에서 자동으로 새로고침 하기 입니다.
12418
JavaScript 마우스 오버시 이미지 안쪽에 테두리주기
12417
node.js git 사용메뉴얼 보면 깝깝 하네요
12416
PHP 그림자가 있는 글자 표현하기 입니다.
12415
PHP css로 테이블 만들기 입니다.
12414
JavaScript 간결한 레이어 메뉴 입니다.
이전 다음
전체 목록