- Home
- Categorie
- Coding e Sistemistica
- Coding
- Dimensione tab variabile
-
Dimensione tab variabile
Salve a tutti,
ho un problema con dei tab (tipo le schede di firefox per intenderci) fatti in css, usando il js per cambiare i tab.
Il CSS dei tab è:[HTML]ul.tabs
{
text-align: left; /* set to left, right or center /
margin: 0px; / set margins as desired /
font: bold 11px verdana, arial, sans-serif; / set font as desired /
border-bottom: 1px solid #6c6; / set border COLOR as desired /
list-style-type: none;
padding: 3px 3px 3px 3px; / THIRD number must change with respect to padding-top (X) below /
}
/ul.tabs li { float: left; background-image: url(tab.gif); display:inline; width: 82px; height: 20px; margin: 0px; padding: 0px; text-align: right; }/
ul.tabs li {
display: inline;
background-color: #fff; / set selected tab background color as desired /
color: #000; / set selected tab link color as desired /
position: relative;
top: 1px;
margin: 0px;
padding: 0px;
padding-top: 3px; / must change with respect to padding (X) above and below */
}
/ul, ul {
float:left;
}/
/ul.tabs a:hover, ul.tabs a.tab-active { text-decoration: none;}
ul.tabs a { text-decoration: none; font-weight:bold; margin: 0; padding: 0; color:#2B4353; }/
ul.tabs a {
padding: 3px 4px; / set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above /
border: 1px solid; / set border COLOR as desired; usually matches border color specified in #tabnav /
background-color: #cfc; / set unselected tab background color as desired /
color: #666; / set unselected tab link color as desired /
margin-right: 0px; / set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
}
div.tab-container { /background:; border:0px solid #194367;/ height:310px; width:530px; padding: 0 10px 10px 10px;}
div.tab-panes { /margin: 3px;/ border:1px solid; height:270px; margin: 0; padding: 0;}
div.contenttab { padding: 0 5px 0 5px; }[/HTML]mentre il codice html è
[HTML]<div class="tab-container" id="container72106">
<ul class="tabs">
<li><a class="atabs" href="#" title="" onClick="return showPane('div1', this)" id="tab1">tab1</a></li>
<li><a class="atabs" href="#" title="" onClick="return showPane('div2', this)" id="tab2">tab2</a></li>
<li><a class="atabs" href="#" title="" onClick="return showPane('div3', this)" id="tab3">tab3</a></li>
</ul>
<div class="tab-panes">
<div class="contenttab" id="div1">
...
</div><div class="contenttab" id="div2"> ... </div> <div class="contenttab" id="div3"> </div></div>
</div>
[/HTML]Vorrei fare in modo che le tab si dimensionino in base al loro contenuto, mentre ora hanno una dimensione fissa. Mi potreste dare una mano?
Grazie
PS: potete vedere un esempio qui e7p.it/test-tabs.php
-
-
No il mio problema è la dimensione in verticale del contenitore
-
Bè per autordimensionarsi un div basta che non abbia appunto delle dimensioni fisse e che il suo contenuto, il quale provvederà a farlo espandere, non sia un elemento estraneo al normale flusso del documento (come un **float **senza ereditarietà).
Quindi per farlo dovresti eliminare a tab e a container72106 quell'height fissa.Se hai bisogno di una certa altezza dal footer in modo che non salga troppo basta allora che al posto del parametro height tu gli dia un margin-bottom in modo che con o senza contenuto ci sarà sempre uno spazio tra i due blocchi.
(p.s hai risolto l'altro problema?
)
-
Si in effetti non era difficile.
Quale altro problema dici? Non so se parli di quello delle tabs in cima, che vengono enormemente larghe (cioè c'è spazio poi testo della tab e molto altro spazio). Sai per caso come eliminarlo?Grazie intanto per questa dritta!
-
Mhh non so se ti riferisci a quello. Io parlo del fatto che i tab non considerano con gli attributi attuali i tuoi margin e padding. Appena ho tempo ti faccio vedere cosa intendo.
-
SI infatti credo sia quello, se vedi nella pagina di esempio viene un sacco di spazio tra due tab, che io vorrei togliere
-
Nessuno ha idee?
-
Sono ancora bloccato, ho provato a fare un sacco di cambiamenti ma niente. Ma scusate, se io imposto il margin per ul a x, poi per ul.miaclasse imposto il margine a zero, quello precedente (a x) non dovrebbe essere "sovrascritto"?
-
Finalmente ce l'ho fatta!
Nel css esterno ho:#content ul li {
color:#444444;
font-size:0.8em;
line-height:1.5em;
margin:0pt 25px 10px 30px;
}devo aggiungere
e tutto va!
