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

레이아웃이 비뚤합니다.

바다로가자
프로필 보기이 회원 글보기
 · 13년 전 · 1601 · 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에서 어떤 문제가 발생되는지 알수가없으니 답을 못 드리겠네요;;ㅎㅎ
여튼 공부 열심히 하셔서 멋진 홈페이지 만드시길 바랍니다~

게시글 목록

번호 제목
12357
MySQL 2개 테이블에서 중복된거라도 한개씩만 추출하기 입니다.
12356
MySQL MySQL php함수 정리 입니다.
12355
MySQL MySQL php오류 정리 입니다.
12354
MySQL 연산자 관련함수 정리 입니다.
12353
JavaScript 폼 유효성검사해주는 자바스트립트 라이브러리
20387
기타 텝메뉴 상단고정 및 해당위치 스크롤 4
12352
MySQL 수학 관련함수 정리 입니다.
12351
MySQL 문자열 관련함수 정리 입니다.
12350
MySQL 날짜 관련 함수 정리 입니다.
12349
PHP PHP5.6 -> PHP7.0 으로 이전시 차이점
12348
jQuery Ajax 화면 전환 시 애니메이션 효과
12347
MySQL Query의 기본사용 정리 입니다.
12346
MySQL 자주 사용하는 php와 관련 Query문 입니다.
12345
MySQL 콘솔 기본명령어 정리 입니다
12344
PHP 암호화 SHA-256
12343
MySQL mysql 인덱싱 하는 방법 입니다.
12342
MySQL MySQL 덤프방법(dump) 입니다.
12341
MySQL 여러데이터베이스 사용하는 방법 입니다.
12340
PHP 이미지에 글자쓰기
12339
MySQL 백업&복구(전체/부분/테이블) 하기 입니다.
12338
MySQL db sql문 정리 입니다.
12337
MySQL MySql 암호 초기화 및 새암호 넣기 입니다.
12336
JavaScript 라디오버튼, 체크박스 테두리 없애기 입니다.
12335
JavaScript 현재 페이지 저장하기 입니다.
12334
JavaScript 프린트 출력 자바스크립트 입니다.
이전 다음
전체 목록