Bonjour à tous !
Je mets en place un système d'onglets grâce à une liste et du css.
Mon problème concerne IE: quand j'ai trop d'onglets, la liste ne saute pas à la ligne comme sous Firefox. Comment faire cela ?
Je mets en place un système d'onglets grâce à une liste et du css.
Mon problème concerne IE: quand j'ai trop d'onglets, la liste ne saute pas à la ligne comme sous Firefox. Comment faire cela ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#divTabs ul li {
list-style-type: none;
display: inline;
padding: 4px 6px 1px 10px;
margin-right: 2px;
border-left: 1px solid #E0E0E0;
border-top: 1px solid #E0E0E0;
border-right: 2px solid #D0D0D0;
/*background: transparent;*/
background-color: #E4E4E4;
color: #6A6A6A;
text-decoration: none;
cursor: pointer;
font-family: Arial, sans-serif;
white-space: nowrap;
height:16px;
}
#divTabs {
margin: 0;
padding: 7px 10px 3px 10px;
border: 0;
/*display: block;*/
/*height:100%;*/
}
#divTabs a {
white-space: nowrap;
}
#divTabs ul{
margin: 0;
padding: 5px 0 4px 0;
display: inline;
white-space: normal;
}
#divTabs ul li img.icon {
display: inline;
}
#divTabs ul li img.spacer {
margin: 0 4px 4px 5px;
}
#divTabs ul li img.close {
margin: 0px 1px 0 2px;
}
#divTabs ul li img.options {
margin: 0px 0px 0px 5px;
}
#divTabs ul li:hover {
color: #8A8A8A;
}
#divTabs ul li a {
color: #909090;
}
#divTabs ul li.hover{
border-color: red;
font-size:130%;
}
#divTabs ul li a:hover {
color: black;
}
#divTabs ul li.selected {
color: black;
background-color: #FFFFFF;
font-weight:bold;
}
.selectedtab,#divTabs ul li.selected a{
font-weight:bold;
color:black;
}
#divTabs ul li.selected a.close:hover,#divTabs ul li.selected a.modif:hover
{
color:black;
}
</style>
</head>
<body>
<div id="divTabs">
<ul id="ul_tabs">
<li style="position: relative;" class="selected"><a><span class="selectedtab">tab 1</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 2</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 3</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 4</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 5</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 6</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 7</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 8</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 9</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 10</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 11</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 12</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 13</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 14</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 15</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 16</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 17</span></a></li>
<li style="position: relative;"><a style="position: static;" href="#"><span>tab 18</span></a></li>
</ul>
<a href="#" title="Ajouter un nouvel onglet">Ajouter un onglet</a>
</div>
</body>
</html>