테이블을 없는 홈피에 도전하는데 메뉴만들기가;

Jdimension · Post by **Jdimension** » 2005 09 20 01:57 52

아버지 홈페이지를 새로 만들면서 테이블 없이 CSS를 이용해서 디자인을 하려고 하는데요...

전체 레이아웃 잡는 건 대충 어떻게 하는지 감을 잡았는데...

중요한 메뉴를 어떻게 코딩해야 할지를 모르겠네요.

http://www.deathfog.net/menu.gif

이렇게 짜려고 하는데요 왼쪽 로고와 오른 상단의 제로보드 아웃로그인 부분은 원하는대로 넣었습니다.

Code: Select all

#top { width: 940px; height: 67px }
#logo { width: 172px; height: 67px; float: left }
#outlogin { width: 768px; height: 35px; background-color: #f5f4f0; float: right }

Code: Select all

		<div id=top>
			<div id=logo>
				<a href="index.php"><img src="top_imgs/top_left.gif"border=0></a>
			</div>
			<div id=outlogin>
				
			</div>
			<div id=menu>
				<ul>
					<li><IMG src="top_imgs/top_menu_01.gif" border=0 style="z-index:1;"></li>
					<li><IMG src="top_imgs/top_menu_02.gif" border=0 style="z-index:1;"></li>
					<li><IMG src="top_imgs/top_menu_03.gif" border=0 style="z-index:1;"></li>
					<li><IMG src="top_imgs/top_menu_04.gif" border=0 style="z-index:1;"></li>
					<li><IMG src="top_imgs/top_menu_05.gif" border=0 style="z-index:1;"></li>
					<li><IMG src="top_imgs/top_menu_06.gif" border=0 style="z-index:1;"></li>
					<li><IMG src="top_imgs/top_menu_07.gif" border=0 style="z-index:1;"></li>
					<li><IMG src="top_imgs/top_menu_08.gif" border=0 style="z-index:1;"></li>
				</ul>
			</div>

해서 넣었는데 메뉴부분은 어떻게 해야 할지 모르겠네요..

메뉴를 하나씩 나눠서 gif로 만들었습니다.

테이블로 만드는거였으면 cellpadding이랑 cellspacing을 0으로 만들고 (물론 보더도 0) <td></td>를 여러번 써서 했었을텐데요, <ul>하고 <li>를 쓰려니까 그림하고 그림 사이에 스페이스가 생겨서 줄을 넘어가버리네요.

그래서 </li>하고 <li>사이를 한 줄 띄지 않고 붙였더니 중간 스페이스들은 없어지는데 맨 뒷 그림 뒤에는 스페이스가 남네요; (</li>랑 </ul>이랑 붙여도;)

.....어렵네요.

워니 · Post by 워니 » 2005 09 20 02:36 14

ul로 인한 공백은 margin을 이용해서 붙이면 되지 않을까 합니다.
서로 공백이 없으면 이미지가 대체되는 브라우저에서 구분이 불가능해서가 아닐까 합니다. (실은 잘 모릅니다

)

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<title>제목</title>
		<style type="text/css">
		/* <![CDATA[ */
		body
		{
			font: normal normal normal 12px 굴림, Gulim, Sans-serif;
			min-width: 705px;
			width: 100%;
			margin: 0;
		}

		#div_top
		{
			margin: 0 auto;
			padding: 5px;
			width: 700px;
			height: 70px;
		}

		* html #div_top /* CSS hack */
		{
			width: 710px;
			height: 80px;
		}

		#div_top #div_gohome
		{
			float: left;
			width: 70px;
			height: 70px;
		}

		#div_top #div_right
		{
			float: right;
			width: 630px;
		}

		#div_top #div_right #div_outlogin
		{
			width: 100%;
			height: 25px;
			text-align: right;
		}

		#div_top #div_right #div_menu
		{
			width: 100%;
			height: 45px;
		}

		#div_top #div_right #div_menu ul
		{
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

		#div_top #div_right #div_menu ul li
		{
			display: inline;
			margin: 0 -0.3em 0 0;
			padding: 0;
		}
		/* ]]> */
		</style>
	</head>
	<body>
		<div id="div_top">
			<div id="div_gohome">
				홈으로
			</div>
			<div id="div_right">
				<div id="div_outlogin">
					아웃로그인 부분
				</div>
				<div id="div_menu">
					<ul>
						<li>메뉴 1</li>
						<li>메뉴 2</li>
						<li>메뉴 3</li>
						<li>메뉴 4</li>
						<li>메뉴 5</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

박민권 · Post by **박민권** » 2005 09 21 12:47 04

Jdimension wrote:해서 넣었는데 메뉴부분은 어떻게 해야 할지 모르겠네요..

메뉴를 하나씩 나눠서 gif로 만들었습니다.

테이블로 만드는거였으면 cellpadding이랑 cellspacing을 0으로 만들고 (물론 보더도 0) <td></td>를 여러번 써서 했었을텐데요, <ul>하고 <li>를 쓰려니까 그림하고 그림 사이에 스페이스가 생겨서 줄을 넘어가버리네요.

그래서 </li>하고 <li>사이를 한 줄 띄지 않고 붙였더니 중간 스페이스들은 없어지는데 맨 뒷 그림 뒤에는 스페이스가 남네요; (</li>랑 </ul>이랑 붙여도;)

.....어렵네요.

음... 글 내용을 바탕으로 미뤄봤을때 li를 display: inline; 하신 것 같군요.
li{float: left;}로 해보시는 것은 어떨까요?
저도 이미지 간의 공백을 해결할때 float를 이용합니다.
당연히 float로 인해 발생되는 영향도 처리하셔야겠죠. :)

Jdimension · Post by **Jdimension** » 2005 09 25 22:12 08

도저히 안되네요; 위의 방법을 다 써 봤으나 제가 원하는 상태로 되는게 없네요;

아쉽지만 표준화에 맞추는건 포기해야겠습니다.

빛알갱이 · Post by **빛알갱이** » 2005 09 26 11:02 07

Jdimension wrote:
그래서 </li>하고 <li>사이를 한 줄 띄지 않고 붙였더니 중간 스페이스들은 없어지는데 맨 뒷 그림 뒤에는 스페이스가 남네요; (</li>랑 </ul>이랑 붙여도;)

.....어렵네요.

'공백 있고 없고'가 그렇게 신경을 많이 써야 할 만큼 중요한 문제는 아닐 것입니다. 그런 것보다 보다 더 중요한 문제(잠깐 둘러 보고 몇 개 찾았습니다)를 해결하시는 게 좋지 않을까요? 예를 들어, 지금 여기에 올리신 것처럼 메뉴에 이미지를 사용하시면서 alt와 title을 넣어 주지 않으시면 시각 장애인은 메뉴 선택이 아예 불가능합니다. 하종강 선생님 같은 훌륭한 분의 웹 사이트를 그렇게 만들어 놓으면 선생님 명성에도 누가 됩니다. (국내의 노동, 사회 운동 관련 단체나 개인 웹 사이트는 국내의 다른 웹 사이트와 마찬가지로 그런 문제를 지닌 곳이 많습니다)

개편을 준비하시면서 고치셨을지도 모르겠습니다만, 다른 문제도 있습니다. 게시판의 '쓰기', '수정', '목록 보기' 등도 모두 그림으로만 되어 있어서 시각이 온전하지 못 하거나 (다른 제로보드를 쓴 곳과 달리 메뉴 그림 속에 들어간 글씨가 좀 크기는 하지만, 이 크기도 작아서 잘 안 보이는 분도 있을 수 있습니다) 텍스트 브라우저 사용자는 쓸 수 없습니다. 글 상단의 그림 메뉴(join, login, articles, 등. 이게 어째서 또 영어로 되어 있는지는 .....) 속에 든 글씨는 alt도 없을 뿐 아니라 글씨도 무척 작군요 (도대체 제로보드 스킨 제작자들은 눈이 얼마나 좋길래 하나 같이 그림 메뉴 글씨를 좁쌀만하게 만드는지 모르겠군요. ) 접근성, 상호 운용성 등에서 빵점에 가까운 제로보드를 가져다 쓰시기 때문에 생기는 문제이기는 합니다만, 어느 정도 수정을 해서 쓰시는 것을 검토해 보십시오. (완벽하지는 않지만 그런 대로 손 본 보기: http://gregshin.pe.kr )

또, 글꼴을 지정할 때 '굴림'과 같이 하나만 써 놓으시면 안 됩니다. (이것도 개편 준비 중에 고치셨을지도 모르겠습니다). http://gregshin.pe.kr/bbs/view.php?id=u ... =asc&no=13
을 참고하십시오. 다른 문제는 meta tag을 이용한 charset 지정입니다. 그 지정은 <head> 다음에 바로 (다른 무엇보다도 먼저) 나와야 합니다. 현재 그 앞에 title 등이 있는데, 순서를 바꾸셔야 합니다.

Mozilla 한국 커뮤니티

테이블을 없는 홈피에 도전하는데 메뉴만들기가;

테이블을 없는 홈피에 도전하는데 메뉴만들기가;

margin을 이용해서..

Re: 테이블을 없는 홈피에 도전하는데 메뉴만들기가;

포기했습니다;

Re: 테이블을 없는 홈피에 도전하는데 메뉴만

Who is online