DEVPPL
http://www.devppl.com/forum/

tabbed navigation in html
http://www.devppl.com/forum/viewtopic.php?f=51&t=13537		 Page 1 of 1
Author:  standshik [ Thu May 07, 2009 5:11 am ]
Post subject:  tabbed navigation in html
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>
Author:  anupknr [ Wed May 13, 2009 11:02 am ]
Post subject:  Re: tabbed navigation in html
add width in tab class ,then page looks fine

#tabs{
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFF;
font-weight:bold;
width:900px;
}
Page 1 of 1 All times are UTC + 1 hour
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/