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

레이아웃이 비뚤합니다.

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

게시글 목록

번호 제목
12281
JavaScript 팝업창을 브라우저 해상도 구분없이 항상 중앙에 띄우기 입니다. 1
20386
기타 유튜브 재생 중인 팝업 레이어 숨길 때 재생 멈추는 방법
12280
jQuery 간단한 셀렉트 드롭다운 제이쿼리
12279
JavaScript 우클릭해제 소스 보기 자바스크립트 입니다.
12278
JavaScript 미리보기 소스 입니다.
12277
JavaScript 움직임이 자연스러운 자바시계 입니다.
12276
JavaScript 특정사람에게 메일 보내기 입니다.
12275
JavaScript DirectX의 와이프 기능을 사용한 이미지 스와핑 효과 내기 입니다.
12274
JavaScript iframe 써서 노 프레임 효과 내기 입니다.
12273
jQuery 이미지 없이 구현하는 간단한 별점 기능 제이쿼리
12272
PHP PHP 4.x버전에서 hash_hmac 함수 사용하기
12260
node.js Node.js - 실시간 위치 추적 (1) 11
360
색 조합 유용한 곳 7
12258
PHP wget으로 외부 컨텐츠 가져오기 입니다. 1
12257
PHP php로 이미지 흑백효과 주기 입니다.
12256
PHP Sendmail 로그분석 스팸 탐지 정리입니다.
12255
PHP 이미지주소 인코딩으로 페이지로딩시간 절약하기 입니다.
12253
PHP 유용한 함수 file_exists 입니다. 1
12252
PHP 마우스 오른쪽 매뉴활성화 막는 간단한 방법입니다
12251
PHP 파일 하나로 끝내는 DB 관리 'Adminer' 입니다.
12250
PHP 프로그램 실행 메모리 체크 memtrack 입니다.
12249
PHP 유용한 함수 call_user_func 입니다.
12248
PHP PHP ANOTATION , Reflection 입니다.
12247
PHP 유용한 함수 array_filter 입니다.
12246
PHP 유용한 함수 substr 과 array_slice 입니다.
이전 다음
전체 목록