레이아웃이 비뚤합니다.

바다로가자

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 13년 전 · 조회 1612 1612 · 댓글 3 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">

<head>

#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>

<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>

<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>

<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>

<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>

</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에서 어떤 문제가 발생되는지 알수가없으니 답을 못 드리겠네요;;ㅎㅎ
여튼 공부 열심히 하셔서 멋진 홈페이지 만드시길 바랍니다~

게시글 목록

번호	제목	글쓴이	조회	날짜
32341	jquery-ui / datepicker 나라별	신리	39	9년 전
32339	영어 독해 쉬운 방법	박쥐12	44	9년 전
32326	php에 오라클이 가능한가요? 2	커네드커네드	89	9년 전
32325	씨멘틱 마크업 - 이거 머냐 씹어먹는거냐? 2	자루스	97	9년 전
32322	PHP 관련 클래스들이 많은 사이트 2	신리	137	9년 전
32319	텍스트를 읽어주는 코딩	신리	126	9년 전
32318	jQuery 예제가 많은 사이트	덕서리	117	9년 전
32316	/js 아래 자바스크립트 화일들이 어디에서 사용될까요?	신리	81	9년 전
32315	신입 개발 ->디자인 ->퍼블로 왔습니다! 4	웹표준3년차	155	9년 전
32313	부트스트랩으로 만든 메뉴를 CSS로 변경본겁니다.	쥬노	68	9년 전
32312	제가 부트스트랩으로 공부하던 중 처음으로 회사 홈페이지를 만들고 있는데요...	쥬노	65	9년 전
32311	제가 부트스트랩으로 공부하던 중 처음으로 회사 홈페이지를 만들고 있는데요...	쥬노	68	9년 전
32310	HTTP Cache 튜토리얼 - 속도개선	인덱스웹	101	9년 전
32304	보더문의 3	star3840	80	9년 전
32303	부트스트랩 질문 드립니다. 1	토시아	126	9년 전
32300	PHP로 개발 시 지양해야 할 코드 2	제은일행	77	9년 전
32293	업로드 구현시 최강자 Plupload 1	절권도	196	9년 전
32292	유튜브 동영상 관련 질문드립니다~~ 1	기만잉	133	9년 전
32291	인쇄 여러장 어떻게 해야하죠..?	밍밍멍	42	9년 전
32285	오픈마켓 이익금 계산기	감기약	211	9년 전
32284	구글 웹사이트 번역기 사이트에 달기	신리	205	9년 전
32275	오픈마켓 이익금 계산기 급하게 만들어 봤습니다. 3	감기약	312	9년 전
32271	카페24 호스팅에서 mail()함수 / smtp인증을 통한 gmail 서버로 발송 가능한가요? 2	글러빙	176	9년 전
32268	jquery print 입니다. 5	Rido	193	9년 전
32265	개발 선배님들께 질문 남기고자 합니다.. 4	웹의미래는딥러닝	151	9년 전
32261	n개월 뒤 말일 구하기 함수	잠돌	137	9년 전
32258	HHVM Just In Time Interpreter 설정	글러빙	106	9년 전
32257	SEO 전용 제어 판넬 - 멀티사이트 관리 1	신리	193	9년 전
32255	vagrant 란? 1	글러빙	119	9년 전
32254	개발자를 위한 자바스크립트로 화면 UI 라이브러리	글러빙	158	9년 전
32253	팝업띄우려면, colorbox ~	글러빙	124	9년 전
32251	jQuery Sidebar 패널입니다. 2	글러빙	171	9년 전
32250	url관련 처리는 URI.js	글러빙	148	9년 전
32249	메트로 스타일 css	글러빙	128	9년 전
32247	게임을 통해 코딩을 배워갑니다.	신리	505	9년 전
32246	ContentTools - 웹페이지를 WYSIWYG editors를 이용하여 편집	신리	127	9년 전
32245	embed.js 참으로 유용한 플러그인입니다 2	신리	260	9년 전
32244	제니퍼소프트의 UI프레임워크 JUI	절권도	126	9년 전
32243	날씨 정보 API	절권도	150	9년 전
32242	PHP : The right way 1	절권도	107	9년 전
32241	모질라가 제공하는 자바스크립트 레퍼런스	절권도	105	9년 전
32240	PHP7로 가는 법	절권도	158	9년 전
32239	정규식 테스터	절권도	95	9년 전
32238	PHP 문법 체크	절권도	112	9년 전
32237	IP 검색 사이트	절권도	125	9년 전
32236	요즘 수요가 가장 많은 사이트 유형이 뭘까요? 2	절권도	281	9년 전
32232	7 Best PHP Frameworks	신리	78	9년 전
32229	웹사이트의 CSS정보를 바로 확인해 주는 크롬 확장프로그램 소개 2	신리	303	9년 전
32228	HTML에 CSS필터를 효과적으로 줄 수 있는 JS plugin을 소개합니다.	신리	133	9년 전
32227	CSS Library - Picnic CSS	신리	101	9년 전
32217	고급 강좌가 무료입니다 3	신리	669	9년 전
32215	안녕하세요 웹 개발자를 꿈꾸는 학생입니다. 7	컴쿨	466	9년 전
32214	다양한 코딩 툴들 2	신리	265	9년 전
32213	jQuery Tree 를 만들었습니다.~~ 2	kiplayer	274	9년 전
32211	모던PHP에 대한 고견을 들었으면 합니다. 3	승희아빠	315	9년 전
32207	jquery ExayUI 소개 1	신리	199	9년 전
32196	날짜 입력과 관련한 자바스크립트 4	신리	204	9년 전
32193	협업을 위한 그룹 채팅 솔루션... 2	신리	315	9년 전
32192	위도, 경도 값을 받아서 타임존을 확인하는 프로그램	신리	158	9년 전
32190	padding 값 클래스 화, 어떤 게 직관적으로 느껴지시나요? 1	이온디	155	9년 전
32188	웹사이트에서 고객채팅 프로그램 4	이대리S	266	9년 전
32186	익스 6이나 7도 맞쳐줘야하나요? 2	커네드커네드	235	9년 전
32184	파노라마 기능 및 WebVR 3	신리	286	9년 전
32173	php에서 Excel 화일 읽고 쓰고... 4	신리	297	9년 전
32172	개발자를 위한 SVG LOGO	신리	208	9년 전
32171	Spectacle - A React.js Presentation Library	신리	143	9년 전
32167	제주관광공사 OPEN API	신리	272	9년 전
32165	스펙터 CSS 프레임워크 3	엔피씨	260	9년 전
32163	css3로 구현하는 애니메이션 한 눈에 보기 1	신리	266	9년 전
32162	HTML 에니메이션 툴	신리	260	9년 전
32158	홈페이지 기능 체크 좀 부탁드려요! 3	성격파탄자	462	9년 전
32157	파싱 페이지 넘김 어떻게 해요 3	공부가	374	9년 전
32155	html, css, javascript를 온라인에서 실습해 볼때	신리	190	9년 전
32151	이미지 위에 글자 쓰기 2	신리	330	9년 전
32149	부트스트랩 공부중인데요... 1	쥬노	242	9년 전
32135	내컴퓨터 웹서버 구축	덕서리	225	9년 전
32132	개발 잘해지는 팁 좀,... 12	00년생용띠	571	9년 전
32127	가상서버에서 계정별 트래픽 제한하기 3	신리	196	9년 전
32125	스크립트 후킹	닉네임없음	373	9년 전
32122	필드명 고민 4	엔피씨	376	9년 전
32120	혹시.. 모바일웹 iframe 고정 관련해서 질문해도되나요 1	라푼	467	9년 전
32119	그누보드 아이콘 gif말고 다른 이미지 포멧도 추가하기 1	Jangfolk	308	9년 전
32117	가상서버 운영시 서버시간 맞추기	신리	141	9년 전
32116	내 홈페이지에 원하는 glyphicon을 한곳에서 검색	신리	344	9년 전
32115	css3를 아주 간단하게 만들어줌	신리	404	9년 전
32114	표준 폰트를 기준으로 em 계산시 필요 (px -> em) 2	신리	328	9년 전
32112	table td에 세로 스크롤 적용하기	신리	294	9년 전
32111	SSH2를 지원하는 한글 putty 링크 주소입니다.	신리	151	9년 전
32109	간단한 모달(modal)창 구현소스입니다. 1	Rido	398	9년 전
32107	날씨정보 제공을 위한 weather forecast API	신리	349	9년 전
32104	누구나 쉽게 이해할 수 있는 Git 3	신리	892	9년 전
32103	PHP/MySQL 코드 소스 사이트	신리	215	9년 전
32102	이미지 편집하여 서버에 올리기	전갈자리남자	361	9년 전
32101	php 문자열변수값에서 숫자만 뽑아내기	신리	341	9년 전
32094	다국어 홈페이지 관련 문의 2	사슴뿔	706	9년 전
32089	퍼블리셔 수습기간인데 질문드립니다. 12	DavidCorleone	756	9년 전
20404	서버시간 알아내기	PlayPixel	466	9년 전
31036	기타 swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현	돼지코구뇽	411	9년 전
8279	악성 게시판 스팸글 어떻게 차단하나요 2	북금곰	422	9년 전
8268	연봉질문있습니다. 11	저스팅	780	9년 전

1 2 3

전체 목록