Page 1 of 1
테이블을 없는 홈피에 도전하는데 메뉴만들기가;
Posted: 2005 09 20 01:57 52
by Jdimension
아버지 홈페이지를 새로 만들면서 테이블 없이 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>이랑 붙여도;)
.....어렵네요.
margin을 이용해서..
Posted: 2005 09 20 02:36 14
by 워니
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>
Re: 테이블을 없는 홈피에 도전하는데 메뉴만들기가;
Posted: 2005 09 21 12:47 04
by 박민권
Jdimension wrote:해서 넣었는데 메뉴부분은 어떻게 해야 할지 모르겠네요..
메뉴를 하나씩 나눠서 gif로 만들었습니다.
테이블로 만드는거였으면 cellpadding이랑 cellspacing을 0으로 만들고 (물론 보더도 0) <td></td>를 여러번 써서 했었을텐데요, <ul>하고 <li>를 쓰려니까 그림하고 그림 사이에 스페이스가 생겨서 줄을 넘어가버리네요.
그래서 </li>하고 <li>사이를 한 줄 띄지 않고 붙였더니 중간 스페이스들은 없어지는데 맨 뒷 그림 뒤에는 스페이스가 남네요; (</li>랑 </ul>이랑 붙여도;)
.....어렵네요.
음... 글 내용을 바탕으로 미뤄봤을때 li를 display: inline; 하신 것 같군요.
li{float: left;}로 해보시는 것은 어떨까요?
저도 이미지 간의 공백을 해결할때 float를 이용합니다.
당연히 float로 인해 발생되는 영향도 처리하셔야겠죠. :)
포기했습니다;
Posted: 2005 09 25 22:12 08
by Jdimension
도저히 안되네요; 위의 방법을 다 써 봤으나 제가 원하는 상태로 되는게 없네요;
아쉽지만 표준화에 맞추는건 포기해야겠습니다.
Re: 테이블을 없는 홈피에 도전하는데 메뉴만
Posted: 2005 09 26 11:02 07
by 빛알갱이
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 등이 있는데, 순서를 바꾸셔야 합니다.
