Hi,
I'm using a simple tabbed navigation in html. Below is the simple code structure. It is working fine except that when I resize the window and make it smaller and smaller the tabs lies on top of each other. Ideally when the window size is smaller I would like to see only some of the tabs from left but not all lying on top of each other. How to fix this problem?
Any help will be appreciated.
<style type="text/css">
#tabs{
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFF;
font-weight:bold;
}
#tabs ul{
list-style:none;
margin:90;
padding:0;
}
#tabs ul li{
display:inline;
margin:0;
text-transform:capitalize;
}
#tabs ul li a{
padding:7px 16px;
color:#FFF;
background:#E7A272;
text-decoration:none;
border:1px solid #D17B40;
border-left:0;
margin:0;
text-transform:capitalize;
}
#tabs ul li a:hover{
background:#EAEAEA;
color:#7F9298;
text-decoration:none;
border-bottom:1px solid #EAEAEA;
}
#tabs ul li a.active{
background:#EAEAEA;
color:#7F9298;
border-bottom:1px solid #EAEAEA;
}
#content{
background:#FFFFF;
clear:both;
font-size:15px;
color:#000;
padding:20px;
font-family:Arial, Helvetica, sans-serif;
}
</style>
<div align="center" id='tabs'>
<ul>
<li><a href='#' class='active'>Summer School / Workshop</a></li>
<li><a href='#'>Travel Information</a></li>
<li><a href='#'>Venue</a></li>
<li><a href='#'>Housing</a></li>
<li><a href='#'>Registration</a></li>
<li><a href='#'>Schedule</a></li>
<li><a href='#'>Wiki</a></li>
</ul>
</div>
