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>
