Salve
ho un piccolo problema nel settare la width per ogni tabulatore. Sto utilizzando il codice preso dalla quida pubblicata su html.it nella sezione javascript.
Il tabulatore funziona correttamente e sono riuscito ad impostare la grafica come la volevo io. Ho 2 immagini 1 x lo stato del tab attivo (dimensioni 70x22px) mentre la 2a x lo stato del tab inattivo (70x18px)
Io vorrei impostare la larghezza al tab di 70px solo che no ci riesco.
ecco i codici
css
htmlcodice:#tabber { padding: 0px; margin: 0; float: left; font: bold 12px Arial, Verdana, Tahoma, Sans-serif; width: 192px; } /*-------------------------------------------------- Regola richiesta per nascondere il contenuto non attivo delle tab. --------------------------------------------------*/ .tabberlive .tabbertabhide { display:none; } /*-------------------------------------------------- Classe .tabber = prima l'interfaccia sia creata Classe .tabberlive = dopo che l'interfaccia è stata creata --------------------------------------------------*/ .tabber { } .tabberlive { margin-top:1em; } /*-------------------------------------------------- ul.tabbernav = la lista di navigazione delle tab li.tabbernav = il list item con la tab attiva --------------------------------------------------*/ ul.tabbernav { margin:0; padding: 3px 0; border-bottom: 1px solid #c8c8c8; font: bold 12px Verdana, sans-serif; } ul.tabbernav li { list-style: none; margin: 0; display: inline; } ul.tabbernav li a { padding: 3px 0.5em; margin-left: 3px; border-bottom: 1px solid #c8c8c8; background: url(inactivetab.gif) no-repeat bottom left; text-decoration: none; } ul.tabbernav li a:link { color: #006f9f; } ul.tabbernav li a:visited { color: #006f9f; } ul.tabbernav li a:hover { text-decoration: none; border-bottom: solid 1px #ffffff; } ul.tabbernav li.tabberactive a { background: url(activetab.gif) no-repeat; border-bottom: 1px solid #ffffff; font-weight: bold; } ul.tabbernav li.tabberactive a:hover { } /*-------------------------------------------------- Classe .tabbertab = il contenuto delle tab --------------------------------------------------*/ .tabberlive .tabbertab { padding:5px; border:1px solid #aaa; border-top:0; height:250px; overflow:auto; }
come posso risolvere il mio problema?codice:<div class="tabber"> <div class="tabbertab"> <h2> Tab 1</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam laoreet pulvinar nisl. Nullam elit. Cras sollicitudin molestie mauris. Nulla dapibus velit sed mauris. In tellus. Praesent eget ipsum et velit tempus suscipit. Fusce mattis, erat a mollis placerat, enim orci rutrum lorem, ac fermentum diam ligula non nulla. Integer luctus lacus at nibh. Aliquam a sem quis neque convallis vehicula. Etiam nec tellus quis risus feugiat eleifend. Praesent porttitor ante eget ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean quis velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed ullamcorper orci ac pede. Nullam metus eros, pretium vel, rhoncus id, blandit sed, sapien. Aliquam dignissim mi vitae felis. Nullam ultrices tellus quis eros. Phasellus dolor felis, feugiat et, porta et, semper euismod, purus. Proin semper nisi quis erat faucibus tincidunt.</p> </div> <div class="tabbertab"> <h2> Tab 2</h2> Duis justo lectus, porta sit amet, sollicitudin et, convallis vel, dolor. Vestibulum massa. Sed lacinia tristique elit. Phasellus ac sapien non est gravida dapibus. Nulla ac dolor ac turpis mollis laoreet. Phasellus tincidunt. Phasellus adipiscing nisi et nisi. Mauris at nulla. Sed tempor, magna vel rhoncus lacinia, tellus mi venenatis nisi, eu ultrices neque neque quis tortor. Vivamus quis elit. Ut molestie dolor vitae mauris. Maecenas facilisis tempor risus. Ut vel orci eu libero interdum bibendum.</p> </div> </div>
grazie in anticipo

Rispondi quotando