Mozilla 한국 커뮤니티

이런 경우는.. 어떻게 사용하시나요??
http://test.hanshinit.co.kr/css-menu-test.gif
이렇게 메뉴바 전체의 가로 사이즈가 800이라고 할때
여기에 li 로 메뉴를 한개 추가하면
자동으로 이전의 메뉴들 가로사이즈가 조금씩 줄어들면서
모든 메뉴가 800 내에 들어갈 수 있게 하는 방법이 있을까요??

그러니까..음. 테이블로 설명드리면
테이블가로사이즈 800 하고 TD 마다 메뉴를 넣어놓고 TD추가해서 메뉴를 추가했을때
각 TD 가 자동 조정되어서 800에 다 들어가는.. 기능입니다..

혹시 몰라 코드를 첨부합니다.

Code: Select all

<DOCTYPE>
<html>
        <head>
                <meta>
                <title>Free CSS Navigation Menu Designs 2 at exploding-boy.com</title>
                <style>

    body {
        margin:0;
        padding:0;
        font: bold 11px/1.5em Verdana;
}

h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

img {
border: none;
}

/*- Menu Tabs 1--------------------------- */


    #tabs1 {
      float:left;
      width:100%;
          background:#F4F7FB;
      font-size:93%;
      line-height:normal;
          border-bottom:1px solid #BCD2E6;
      }
    #tabs1 ul {
          margin:0;
          padding:10px 10px 0 50px;
          list-style:none;
      }
    #tabs1 li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs1 a {
      float:left;
      background:url("tableft1.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs1 a span {
      float:left;
      display:block;
      background:url("tabright1.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#627EB7;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs1 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#627EB7;
      }
    #tabs1 a:hover {
      background-position:0% -42px;
      }
    #tabs1 a:hover span {
      background-position:100% -42px;
      }

      #tabs1 #current a {
              background-position:0% -42px;
      }
      #tabs1 #current a span {
              background-position:100% -42px;
      }

</style>
        </head>

        <body>
                <h2>Tab Menu 1</h2>
                <div>
                        <ul>
                                <CSS>
<li id="current"><a href="Home.html"><span>Home</span></a></li>
<li><a href="Products.html"><span>Products</span></a></li>
<li><a href="Services.html"><span>Services</span></a></li>
<li><a href="Support.html"><span>Support</span></a></li>
<li><a href="Order.html"><span>Order</span></a></li>
<li><a href="News.html"><span>News</span></a></li>
<li><a href="About.html"><span>About</span></a></li>

                        </ul>
                </div>
        </body>
</html>

adung wrote:이런 경우는.. 어떻게 사용하시나요??
http://test.hanshinit.co.kr/css-menu-test.gif
이렇게 메뉴바 전체의 가로 사이즈가 800이라고 할때
여기에 li 로 메뉴를 한개 추가하면
자동으로 이전의 메뉴들 가로사이즈가 조금씩 줄어들면서
모든 메뉴가 800 내에 들어갈 수 있게 하는 방법이 있을까요??

그러니까..음. 테이블로 설명드리면
테이블가로사이즈 800 하고 TD 마다 메뉴를 넣어놓고 TD추가해서 메뉴를 추가했을때
각 TD 가 자동 조정되어서 800에 다 들어가는.. 기능입니다..

혹시 몰라 코드를 첨부합니다.

예제는 전체 너비가 고정되어 있지 않은 경우 이군요.
개인적으로 예제처럼 융통성 있게 만드는게 좋을것 같지만 경우에 따라서 전체너비를 고정시킬 필요도 있겠네요.
테이블처럼 자동으로 전체 너비를 알아서 맞춰주는 속성은 없습니다.
각각의 버튼(li)마다 너비를 % 으로 잡아서 전체가 100%가 되도록 하는 방법을 쓸 수 밖에요.. 코드를 확인하시면 아시겠지만 ul 태그에는 너비 800px 잡아주고 li 태그에는 너비를 % 으로 잡아서 li 태그에 부여된 너비의 합이 모두 100% 가 되도록 하시면 됩니다.

예제는 편의상 버튼너비를 모두 같게 했지만 실제로는 글자수에 따라서 작업자가 직접 너비를 각각 다르게 조정해 주어야 합니다. 자동으로 전체 너비에 맞게 늘어나지는 않지만 이렇게 변경하는 작업이 자주 있을 일은 아니니까 잠깐만 고생하시면 되는걸요. 전체너비가 고정되어 훌륭한 레이아웃이 나온다면 이렇게라도 해야하지 않겠어요 ㅡㅜ;;

배경이미지는 li 에 깔리는 가로길쭉한것 하나와 a 태그의 우측 끝에 뚜껑닫기용으로 들어갈 짧은것 하나 준비해서 li 에 하나 넣고 a 태그에 하나 넣습니다. 적어주신 예제코드는 배경을 넣기 위해서 쓸데없이 span 태그를 한번 더 썼는데 왜 그랬는지 좀 이해할 수가 없네요 ㅡㅡ;; 그냥 li 와 a 태그에 넣으시는게 좋을것 같습니다. span 태그가 있을 필요가 없습니다.

li 태그에 들어갈 배경은 왼쪽만 라운딩 하시고 오른쪽으로 최대한 길게 늘인 이미지 입니다. 텍스트의 숫자를 고려하여 버튼의 너비가 대략 200px 이상 넘어가는 경우는 없겠다 생각되면 이미지의 너비를 200px 정도로 잡고 배경은 반복시키지 않은상태로 왼쪽 끝에 배치합니다. a 태그에 들어갈 배경이미지는 우측 끝의 라운딩 부분 정도만 표현되도록 너비 5~10px 정도 잡아서 배경으로 삽입할 때 반복없이 우측 끝에 나타나도록 합니다. 이렇게 하시면 li 에 들어간 배경은 융통성있게 버튼 크기만큼만 보이게 되고 a 에 들어간 배경은 우측 끝을 닫아주는 뚜껑 역할을 하겠죠.

원하던 답은 아니시겠지만 달리 이런 방법 외에는 권해드릴만한 묘안이 없는것 같습니다. (혹시 몰라요.. 고수가 워낙 많아서.. ㅡㅡ;; 나올지도..)

아래 코드 한번 보세요.

Code: Select all

<DOCTYPE>
<html>
<head>
<meta>
<title>Untitled Document</title>
<style>
* {margin:0; padding:0; font-size:small; font-family:돋움, Sans-serif; }
ul, ol { list-style:none}
#global { width:800px; background:#CCC; float:left; height:25px}
#global li {	float: left; background: url(MenuLeftBg.gif) no-repeat}
#global #menu1 { width:25%} 
#global #menu2 { width:25%}
#global #menu3 { width:25%}
#global #menu4 { width:25%}
#global a { display:block; padding-top:5px; height:20px; text-align:center; background: url(MenuRightBg.gif) no-repeat }
</style>
</head>

<body>
<ul id="global">
  <li id="menu1"><a href="#">메뉴1</a></li>
  <li id="menu2"><a href="#">메뉴2</a></li>
  <li id="menu3"><a href="#">메뉴3</a></li>
  <li id="menu4"><a href="#">메뉴4</a></li>
</ul>
</body>
</html>

메뉴바 만들어주는 프로그램으로 만든 소스라..
span 소스가 들어갔네요..

뚜껑닫기법에 대해.. 감사합니다..

제가 고정된 width 값을 사용할 수 없는 이유는..
메뉴를 늘리거나 줄이는걸 사용자가 관리자기능에서 해야 하는 템플릿제공을
해야 해서.. 여쭈어 봤습니다...

Mozilla 한국 커뮤니티

가로형 텍스트 메뉴바 에 메뉴추가 관련요~

가로형 텍스트 메뉴바 에 메뉴추가 관련요~

Re: 가로형 텍스트 메뉴바 에 메뉴추가 관련요~

감사합니다..