• M
    User •

    scrollbar nascosata da fixed

    Ciao a tutti.

    Ho un position fixed a fondo pagina ma questo mi copre la scrollbar orizzontale.

    C'è un qualsiasi metodo per farsi che quando compare la scrollbar perchè la pagina viene ridimensionata questo elemento fixed si sposti un pò piu in alto e non copra la scrollbar? un pò come fa facebook con la casellina della chat.

    0
  • K
    Super User •

    Ciao Mr.Piter,

    Non ho capito esattamente l'esempio, se avresti una risorsa condivisibile sarebbe opportuno.
    In ogni caso potresti lavorare con lo z-index.

    Lo z-index, per darti una descrizione approssimativa, funziona un pò come i livelli di photoshop. Il valore di z-index è numerico e quindi, prendendo due elementi con z-index diverso:

    
#oggetto_sopra{
z:index:2
}
#oggett_sotto{
z:index:1
}

    Tale clausola non è sufficente poichè devi aggiungere, nelle regole css, un posizionamento absolute/relative/fixed (a seconda della tua esigenza) ad entrambi.

    Avviene quindi che i medesimi oggetti, attraverso lo z-index, "collaborino" tra loro.

    Se quindi inserisci al tuo oggetto "fixed" uno z-index:1, potresti mettere alla tua scrollbar uno z-index:2 (con position:relative;).

    Dovrebbe quindi bastare a far si che quest'ultima rimanga sempre al di sopra dell'elemento a fondo pagina.

    In caso ti rimando a darci una risorsa online, z-index e position sono uno degli argomenti più complessi del css e servirebbe quindi vedere cosa ti servirebbe nello specifico.

    0
  • M
    User •

    grazie per esserti interessato.

    allora io ho

    [HTML]
    html,body {
    background:#fff;
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    position:relative;
    overflow:auto;
    z-index:1000;
    }

    #pie {
    background:url(../immagini/pie.png) repeat-x;
    width:100%;
    height:40px;
    position:fixed;
    bottom:0;
    z-index:20;
    display:none;
    }
    [/HTML]

    Ma la scrollbar della finestra rimane sotto..

    il display:none è perchè poi compare tramite javascript.

    0
  • K
    Super User •

    Perchè non devi dare i valori di position e z-index all'html e al body, ma all'oggetto scrollbar.

    0
  • M
    User •

    non so di cosa stai parlando..:?

    puoi gentilmente farmi vedere come fare?

    0
  • K
    Super User • 
    
#pie {     background:url(../immagini/pie.png) repeat-x;    
 width:100%;     
height:40px;    
 position:fixed;     
bottom:0;     
z-index:20;     
display:none; 
}

```e questo va bene

L'altro devi applicarlo alla scrollbar, ad esempio (non so che id tu gli abbia dato)

    #scrollbar{
    position:relative;
    z-index:2000;
    ...
    }

    0
  • M
    User •

    scusa ma io non ho un elemento scrollbar.. le scrollbar che devo riuscire a vedere sono quelle della finestra..

    sarò tardo ma mi sfugge qualcosa.. :?:?:?

    0
  • K
    Super User •

    Ahhh...adesso ho compreso!
    Scusami ancora, pensavo tu ti riferissi ad un oggetto che tu utilizzavi e chiamavi come scrollbar...

    Avresti mica una risorsa online su cui vedere l'esempio?

    0
  • M
    User •

    no non ce l'ho..

    comunque è una pagina bianca con con il css che ti ho scritto.

    nel body ho messo il div #pie con il css sopra descritto e se io ridimensiono la pagina la scrollbar della finestra viene coperta mentre a me serve che faccia come facebook che quando compare la scrollbar il fixed della chat si sposta un pò piu su e mi lascia il posto alla scrollbar.

    0
  • K
    Super User •

    Potresti inserire l'intero codice html + css?
    Quello che non capisco è cosa tu voglia realmente intendere. La scrollbar di cui mi parli da come ho capito è quella del browser a fondo pagina, ma è impossibile che un div possa uscire fuori coprendo così questa scrollbar poichè sarebbe come far uscire la pagina dal programma stesso (il browser) :?.

    Insomma se mi metti tutto il codice della pagina vediamo di risolverlo, così lo posso ricreare sul mio pc.

    Ti chiederei anche a questo punto di dirmi quale browser stai utilizzando e la sua versione. Oppure se questo capita con tutti.

    0
  • M
    User •

    e invece è così.. non esce dalla finestra però si vede che non calcola la scrollbar come parte della finestra.

    Praticamente si ferma alla status bar invece che alla scroll bar.

    [html] <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link type="text/css" rel="stylesheet" href="css/template.css">
    
    <base href="http ://localhost/roald/" />
    
    <title>ROALD</title>

</head>

<body>

<div id="pie></div>
</body>

    </html>[/html]il css è quello già postato.

    0
  • K
    Super User •

    Non vedo nessun problema e con nessuna tipologia di browser.

    Tra l'altro non ho capito perchè vedi una scrollbar quando non esiste un contenuto con dimensione fissa (ad esempio un div con width:500px).

    La scrollbar si attiva unicamente quando il contenuto della pagina html occupi più delle dimensioni della finestra del browser stesso.

    Ad esempio, se tu avesis un div di 500px e in qualità di utente mi riduci il browser a 450px, allora la scrollbar per necessità appare.

    In ogni caso l'unico appunto che ho trovato nel tuo codice è la chiusura dell'apice sulla classe richiamata: ```
    <div id="pie></div>

    

Potresti semmai inviarmi un'immagine, salvandola con lo stamp della tastiera e vedere cosa ti succede.
    0
  • K
    Super User •

    Uhm..
    effettivamente hai ragione ora che ho ricontrollate mi sono accorto del solito problema.
    Succede unicamente con Internet explorer (addirittura anche con la v.9).

    Io ho risolto così:

    [html]
    <head>
    ....
    <!--[if IE]>
    <style type="text/css">
    #pie{margin-bottom:18px!important;}
    </style>
    <![endif]-->
    </head>

    [/html]mi raccomando devi inserire l'intero codice insieme ai commenti stessi **(<!-- e //--> ).

    **Questo impone unicamente a internet explorer (quaslasi versione visto che il problema vale su tutte) di mantenere la tua scrollbar 18px sopra il piede del browser lasciandoti libera la scrollbar.

    0
  • M
    User •

    si però così rimane lo spazio anche quando la scrollbar non c'è..

    0
  • K
    Super User •

    Ma se invece di fixed, che crea un pò di problemi, utilizzi "position:absolute" per il #pie? che l'effetto dovrebbe essere lo stesso per il tuo caso.

    Ovviamente rimuovi la clausola che ti ho proposto poco sopra.

    0
  • M
    User •

    si funzionerebbe solo che il mio intento è di usare javascript per fare la pagina che scorre tramite gli anchor link.. quindi usando position absolute il pie si muove insieme alla pagina mentre con fixed rimane "attaccato al fondo del browser.

    0
  • K
    Super User •

    Allora potresti utilizzare qualche libreria (jquery ad esempio) che pare abbia già di per se qualcosa in grado di risolvere il problema.

    0
  • K
    Super User •

    "sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/"

    Qui c'è un interessante plugin, proprio sull'ispirazione della barra di Facebook.

    0
Effettua l'accesso per rispondere