altezza tabbed menu

[stiffa]

ciao.

Non riesco a capire come dare l'altezza 100% al mio menu a linguette. Le ho provate tutte, dimensioni html e css (modificando quelli del menu che ho scaricato) , ma sembra impossibile ma l'altezza 100% non viene presa buona. Per capirci, in un css che gestisce il tabbed menu e' gia presente un width in pixel, se metto 50% lo prende e me lo fa vedere per meta' della pagina....Ma se aggiungo height:100%; e' come se avessi scritto zero. Diversamente se scrivo height:600px; la prende per buona.

il menu e' questo.
Un 10 a chi riesce a mettermi il contenuto al 100% senza inserire scritte o tabelle, ma solo con i css.

ecco il menu....pls help
http://webfx.eae.net/dhtml/tabpane/demo.html

(ho postato in javascript pensando che siccome se metto dentro una tabella con un altezza fissa in pixel potevo usare javscript per ottenere quella dimensione e darla come dimensione della tabella....ma non so come.)

In un modo o nell'altro spero di uscire da questo casino.
ciao e grazie

[seed_squall_it]

Così, senza guardare il codice, dato che una height in pixel te la prende, direi che il problema è la mancanza di un elemento contenitore. Se scrivi height: 100%, quel 100% DEVE essere riferito a qualche elemento che contiene l'elemento a cui applichi la height. Se il tuo elemento non è contenuto in nessun altro box, come contenitore viene preso il body, che però è un contenitore particolare. Ha bisogno infatti che tu gli imposti esplicitamente height: 100% per essere alto come l'area visibile della pagina. Inoltre, devi anche impostare height: 100% per l'elemento radice, ovvero html, altrimenti alcuni browser non riescono ad applicare l'altezza all'elemento body. In altre parole, penso che il tuo problema sia dovuto proprio alla mancanza di un contenitore (con altezza fissa oppure percentuale in relazione ad un ulteriore elemento contenitore) che racchiuda il menu.

[stiffa]

grazie....ho provato a mettere 100% sia nel body sia in html....
Gli elementi contenitori ci sono.
Prova a dare un occhiata ai css....magari vedi qualcosa in piu rispetto a me

.dynamic-tab-pane-control .tab-page {
    height:        0px;
}

.dynamic-tab-pane-control .tab-page .dynamic-tab-pane-control .tab-page {
    height:        0px;
}

html, body {
    background:    ThreeDFace;
}

form {
    margin:        0;
    padding:    0;
}

/* over ride styles from webfxlayout */

body {
    margin:        10px;
    width:        auto;
    height:        auto;
}

.dynamic-tab-pane-control h2 {
    text-align:    center;
    width:        auto;
}

.dynamic-tab-pane-control h2 a {
    display:    inline;
    width:        auto;
}

.dynamic-tab-pane-control a:hover {
    background: transparent;
} 

inoltre c'e' un css esterno

.dynamic-tab-pane-control.tab-pane {
    position:    relative;
    width:        100%;
            /* width needed weird IE bug */
    margin-right:    -2px;    /* to make room for the shadow */
}

.dynamic-tab-pane-control .tab-row .tab {

    width:                70px;
    height:                16px;
    background-image:    url( "tab.png" );
    
    position:        relative;
    top:            0;
    display:        inline;
    float:            left;
    overflow:        hidden;
    
    cursor:            Default;

    margin:            1px -1px 1px 2px;
    padding:        2px 0px 0px 0px;
    border:            0;

    z-index:        1;
    font:            11px Tahoma;
    white-space:    nowrap;
    text-align:        center;
}

.dynamic-tab-pane-control .tab-row .tab.selected {
    width:                74px !important;
    height:                18px !important;
    background-image:    url( "tab.active.png" ) !important;
    background-repaet:    no-repeat;

    border-bottom-width:    0;
    z-index:        3;
    padding:        2px 0 0px 0;
    margin:            1px -3px -3px 0px;
    top:            -2px;
    font:                11px Tahoma;
}

.dynamic-tab-pane-control .tab-row .tab a {
    font:                11px Tahoma;
    color:                Black;
    text-decoration:    none;
    cursor:                default;
}

.dynamic-tab-pane-control .tab-row .tab.hover {
    font:                11px Tahoma;
    width:                70px;
    height:                16px;
    background-image:    url( "tab.hover.png" );
    background-repaet:    no-repeat;
}


.dynamic-tab-pane-control .tab-page {
    clear:            both;
    border:            1px solid rgb( 145, 155, 156 );
    background:        rgb( 252, 252, 254 );
    z-index:        2;
    position:        relative;
    top:            -2px;

    font:                11px Tahoma;
    color:                Black;

    filter:            progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffcfcfe, EndColorStr=#fff4f3ee, GradientType=0)
                    progid:DXImageTransform.Microsoft.Shadow(Color=#ff919899, Strength=2, Direction=135);
    
    /*244, 243, 238*/
    /* 145, 155, 156*/
    
    padding:        10px;
}

.dynamic-tab-pane-control .tab-row {
    z-index:        1;
    white-space:    nowrap;
} 

io ho messo 100% ovunque, ma non cambia niente....(ora il codice che vedi e' come lo ho trovato)

[seed_squall_it]

A parte due errori nel CSS (c'è scritto background-repaet) che potrebbero influenzare qualcosa, quali sono gli elementi nel codice (sia HTML che generato da JavaScript) a cui devi applicare l'altezza? Perché se l'elemento viene generato dalla funzione addTabPage() dovrei quanto meno capire come è fatto e che regole di stile ha associate...

Poi cerca di semplificare il CSS: se hai delle dimensioni con valore 0, non serve che scrivi 0px...basta 0. Altra cosa: width: auto e height: auto riferiti al body o a elementi block-level sono superflui...puoi eliminare quelle dichiarazioni.