Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14
  1. #1

    Pagina sempre al 100% problemi vari

    Ciao a tutti...
    ho un problemino con la pagine di un gestionale online... e non riesco a venirne fuori..

    Allora.. la pagina deve essere sempre in altezza e larghezza al 100%;
    vi faccio un piccolo disegnino giusto per capire:

    -----------------------------
    header
    ----------------------------
    M | ! resto della pagina |
    E | | !|
    N | ! |
    U ! | |
    ------------------------------

    il problema è che ho l'header con un'altezza fissa, mentre il menu e il resto della pagina
    devono essere sempre al 100% rispetto alla finestra e non al contenuto... un pò come in questo link: http://www.backbase.com/demos/explorer/

    Come potrei risolvere il problema?
    devo aggiungere che il body ha uno background con una sfumatura, mentre il menu e il resto della pagina, hanno background bianco e un bordo nero.

    Se avete bisogno, potrei postarvi parte del codice html e del css che attualmente uso, ma non è proprio chiarissimo in quanto per aggirare l'ostacolo per il momento ho fatto delle porcherie non indifferenti...

    Grazie a chiunque mi aiuti

    Roberto

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Non e` che dal disegnino si capisca ... dovresti farlo tra i VBCode [ code ] ... [ /code ] (senza gli spazi)

    Comunque per la larghezza devi dare il 100% anche ai tag <html> e <body> nonche` a tutti i blocchi intermedi, altrimenti la misura % del blocco non ha un riferimento.
    Per l'altezza potrebbe essere la stessa cosa, complicata dal fatto che non tutti i browser reagisono allo stesso identico modo, e che da qualche parte devi prevedere uno scroll, mediante l'attributo overflow:auto (il body ce l'ha automatico, ma se poni height:100% non viene visualizzato).
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Grazie della risposta, effettivamente non mi ero accorto che si vedeva male

    Ti posto un pò dio codice html e css che ho scritto per ovviare il problema

    la struttura è questa:

    codice:
    <html>
    <head>
    </head>
    <body>
    <div d="header">
    HEADER
    </div>
    <div id="leftbox">
    MENU DI SINISTRA
    </div>
    <div id="PaginaContenuto">
    CONTENUTO DELLA PAGINA
    </div>
    
    </body>
    </html>

    il css è il seguente:
    codice:
    body, html {
      margin: 0;
      padding: 0;
      font: 80% verdana, arial, sans-serif;
      height: 100%;
      background: url(/images/background_della_pagina.jpg) repeat-x;
    }
    #header{
    width: 100%;
    position: absolute;
    top: 0;
    left:0;
    padding:0;
    height: 113px;
    color:#333;
    background:#eaeaea;
    }
    
    /*Il menu parte da top 0, in quanto se mettevo il 100% mi appariva la scrool bar, cosa che non doveva apparire, poi con una gif con la parte superiore trasparente, ho simulato il menu che continuava*/
    #LeftMenu{
    position:absolute;
    left: 10px;
    top:0;
    padding:0;
    width:182px;
    height:98%; 
    color:#333;
    background: url(/images/bg_left_menu.gif); /* Immagine di background del menu*/
    border-bottom:1px solid #868686;
    }
    /* come nell'header ho dovuto fare cominciare il div da inizio pagine top 0 e successivamente ho messo uno sfondo, in modo da far sembrare che la pagina cominciasse sotto a destra, quindi una gif trasfarente per circa 200px sia sopra che a sinistra. */
    #PaginaContenuto{
    position:absolute;
    left: 0;
    top: 0;
    padding:0;
    width:99%;
    height:98%; 
    color:#333;
    background: url(/images/bg_content.gif);
    }
    e qui rifaccio il disegno:
    codice:
     
      ---------------------------------------------------------------------
            Header con altezza fissa.
    -----------------------------------------------------------------------  
    menu         |   |  Resto della pagina                                                  |
    con altezza |   |  con altezza 100%                                                   |
     100%        |   |  e larghezza 100% (rispetto allo spazio che rimane)    |
    e larghezza |   |                                                                               |
     200px;      |   |
    qualche consiglio?
    Premetto che ho realizzato quello per il cui chiedo aiuto, ma non mi sembra la soluzione migliore usare tutte queste immagini ed il problema maggiore comincia a presentarsi quando la pagina è più lunga del 100% del browser in quanto se mettessi dei overflow auto, la scroolbar comincerebbe fin da inizio pagina...
    insomma.. un pò problematico.. Premetto che prima il sito era fatto nello stesso modo, ma utilizzando le tabelle.

    Grazie
    Roberto
    ---> lordmarin <---
    www.lordmarin.com

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Stai facendo una gran confusione ...
    Ti conviene ricominciare da zero, inserendo le cose una alla volta.

    E prima di parlare del resto del codice, devi scegliere il linguagigo da usare (DOCTYPE).

    Anzitutto salta subito all'occhio che in FF il font e` il 64% del font, mentre in IE (quirks mode) e` l'80%. Questo perche` html e body in FF sono due oggetti diversi innestati, mentre in IE e` lo stesso oggetto.

    Il font-size va dichiarato in html e body, ma va messo il 100%. Nei blocchi successivi puoi anche ridurlo, ma solo per cose che non andranno lette da tutti.

    Ti manca il width: 100% in html e body: senza quello il 100% dichiarato nel div non ha significato (e` il 100% di una misura inesistente).

    Poi un consiglio: non usare il position. Il fegato risparmiatelo per le abbuffate di Pasqua.
    (e non usare quindi neanche il left e top).

    Il #LeftMenu (nome non conforme alla semantica!!) dovra` avere float:left;
    il #PaginaContenuto dovra` avere anche un float: left o right come preferisci (cambia poco);
    in linea di massima PaginaContenuto non dovra` avere larghezza, ma il contenuto andra` ad occupare tutto lo spazio a disposizione.
    In alternativa il PaginaContenuto non avra` il float ed avra` invece un margin:200px; (circa)
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    ok, allora DOCTYPE Transitional ovviamente xhtml
    ok per la dimensione del font, anche se penso non sia un vero e proprio problema
    il vero problema è riuscire a mantenere i box leftmenu e Paginacontenuto alti al 100% della pagina e non rispetto al contenuto
    Se non avessero dovuti essere tali, sicuramente avrei utilizzato il tuo stesso medoto, mentre il capo volendolo alti al 100% ho dovuto utilizzare tutto in assoluto... semmai, in privato se ti va potrei inviarti il codice completo, giusto per farti vedere un pò di pagina.
    Cioè vorrebbe una cosa simili al link che ho inserito nel primo post http://www.backbase.com/demos/explorer/
    solo che questi secondo me ricalcolano le dimensioni dei vari div, tramite js...


    Quali sono i nomi conformi alla semantica?
    Onestamente in 3 anni di lavoro come web designer mai avuto di questi problemi
    ---> lordmarin <---
    www.lordmarin.com

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    La semantica e` (anche) una forma mentis, un modo di lavorare.
    Un nome che rispecchia la posizione di un oggetto, non e` semanticamente corretto:
    se domani il tuo capo (o chi per esso) decide che il menu va spostato a destra, con una semplice modifica al CSS lo sistemi, ma allora un oggetto che si chiama LeftMenu e sta a destra e` un controsenso.
    I nomi devono rispecchiare il contenuto e/o la funzione dell'oggetto.

    Perche` transitional? Hai problemi cosi` gravi da non poter usare lo Strict?
    Se usi strict risolvi d'incanto meta` dei problemi di IE6 (quasi tutti quelli del box-model).

    ----
    Quella pagina linkata e` scritta in XML, in parte gestita da JS: probabilmente hanno lato server un parser XML che trasforma parte dei tag in XHTML.
    Comunque a fronte di una DTD XHTML Transitional, forniscono tag XML, e questo non e` molto corretto (non so come si comporta IE5.5 in tali casi e ho dubbi anche per IE6).

    Io sono convinto che il position crea piu` problemi di quanti ne risolva: se aumenti il font (shift +), al 90% qualcosa sballa - e ricorda che non puoi definire la dimensione del font (puo` venir sovrascritta dal browser)
    Prima di concentrarmi sull'altezza volevo sistemare la larghezza, ecco perche` non avevo affrontato tutti i problemi.
    Nei browser standard puoi definire top e bottom, e la cosa dovrebbe funzionare, quindi non serve il posizionamento assoluto (ti basta il relativo).
    Questi li hai gia` visti? I posizionamenti assoluti e Capire i posizionamenti relativi
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  7. #7
    Grazie ancora delle risposte, scusa se prima sembrava arrogante il mio modo di scrivere, ma ti assicuro che non lo era anzi.
    Allora la larghezza è stata sistemata.
    si avevo letto quelle guide, però il problema è che se l'altezza del div quindi height 100% seppure posizionato in relativo, prende il 100% della finestra del browser e non del resto dello spazio che gli rimane.

    Non è che sia possibile mettere una dimensione in qui deve cominciare il div e una in cui deve finire?
    ---> lordmarin <---
    www.lordmarin.com

  8. #8
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Se le tali misure sono espresse in una unita` di misura fissa (px, em, ... - non % che e` relativa al box contenitore), la cosa e` possibile con i margini.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  9. #9
    scusa ma mi potresti fare un piccolo esempio o chiedo troppo?

    il problema principale è che solo l'header ha altezza fissa, mentre il menu di sinistra deve stare al 100% in altezza del resto dello spazio.
    e quindi mettendo 100% all'altezza del contenitore principale, appare la scrool bar e l'unica soluzione è utilizzare il posizionamento assoluto
    ---> lordmarin <---
    www.lordmarin.com

  10. #10
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Questo dovrebbe funzionare in qualche browser (non credo in tutti):
    codice:
    <body>
      <div id="header>
        
    
    header</p>
      </div>
      <div id="menu">
        
    
    menu</p>
      </div>
      <div id="contenuto">
        
    
    contenuto</p>
      </div>
    </body>
    
    CSS:
    html, body {
      width: 100%;
      height: 100%;
    }
    #header {
      height: 80px;     /* non so se e` la misura giusta */
      width: 100%;
      background: green;
    }
    #menu {
      position: relative;
      margin: 80px 0 0 0;
      top: 0;
      bottom: 0;
      width: 200px;
    }
    #contenuto {
      position: relative;
      margin: 80px 0 0 200px;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    Nell'header si puo` aggiungere (ma non dovrebbe cambiare):
    position: relative;
    top: 0;
    left: 0;
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.