Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2003
    Messaggi
    6

    HELP!!! Simulare FRAMESET con Div e CSS

    Salve Ragazzi!
    Avrei un piccolo problemino dovrei ricreare un layout css simile ad una frameset - x simile intendo dire che dovrebbe essere perfettamente fluida, con alcune parti che scrollino ed altre fisse .... ma più tempo passa + convinco che sia impossibile

    allego una gif della struttura
    le zone blu rosso e arancio dovrebbero essere fisse e le parti in giallo e grigio scrollare.
    ma.. è possibile una cosa simile?
    il div non cresce col contenuto e quindi tende ad allungare la pagina?

    Vi prego se vado verso l'utopia ditemelo subito così rimango ai frame.
    Grazie
    Ciao
    Immagini allegate Immagini allegate

  2. #2
    Utente di HTML.it
    Registrato dal
    Mar 2003
    Messaggi
    183
    Se tu al div che vuoi che scrolli gli metti un bel overflow:scroll; e gli dai un'altezza definita, dovrebbe fare quello che vuoi tu (se ho capito bene!)...

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2003
    Messaggi
    6
    Ciao Piccy
    Grazie x la risposta!

    Si hai ragione... il mio problema però è un altro - ovvero suddividere in tre parti verticalmente la colonna di destra facendo in modo che la prima e la terza riga abbiano dimensione fissa e la centrale in percentuale e che scrolli.

    Avevo provato con margini posizionamenti vari... ma poi ho pensato che effettivamente potevo suddividere la colonna in tre righe attribuendo valori in percentuale alle righe!
    in questo modo viene OK.
    poi forzo le altezze coi contenuti nelle righe superiore ed inferiore ed automaticamente ricavo la centrale.

    non so se è un metodo giusto o piuttosto sporchino.... ma su IExplorer funziona.
    Su Firefox non mi prende l'altezza... qualcos'altro m'inventerò.

    ciao

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    La cosa non e` difficile. Basta partire dall'esterno.

    Do ai vari blocchi i nomi secono una logica possibile, ma potrebbe non essere quella da te usata (io non conosco i contnuti dei vari blocchi). all'interno segno i colori da te usati (come li vedo io, che forse e` diverso da come li vedi tu).
    codice:
    <body>
    <div id="header">
      
    
    blu</p>
    </div>
    <div id="menu">
      
    
    verde</p>
      <ul>[*]primo link[*]...[/list]
    </div>
    <div id="ausiliario">
      <div id="intest">
        
    
    arancio</p>
      </div>
      <div id="mezzo">
        
    
    verdino</p>
      </div>
      <div id="fondo">
        
    
    rosso</p>
      </div>
    </div>
    <div id="principale">
      
    
    giallo</p>
    </div>
    </body>
    
    
    
    CSS:
    #html, body {
      width: 100%;
      height: 100%;
      font-size: 100%;
    }
    #header {
      width: 100%;
      height: 10%;
      background: Blue;
    }
    #menu {
      width: 12%;
      float: left;
      top: 10%; /* uguale ad altezza header */
      bottom: 0;
    }
    #ausiliario {
      width: 30%;
      top: 10%; /* uguale ad altezza header */
      bottom: 0;
      float: right;
    }
    #intest {
      width: 100%;
      height: 20%;
      background: Orange;
    }
    #mezzo {
      widht: 100%
      scroll: auto;
      background: lightGreen;
    }
    #fondo {
      width: 100%;
      height: 30%;
      bottom: 0;
      background: Red;
    }
    #principale {
      top: 10%; /* uguale ad altezza header */
      bottom: 0;
      background: Yellow;
      scroll: auto;
    }
    E` possibile che abbia dimenticato qualche cosa o che ci siano errori di sintassi.

    Per evitare tutti i top 10% e` anche possibile inserire tutta la parte escluso #headeer dentro un blocco, cui darai solo width:100%; bottom:0;
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    Utente di HTML.it
    Registrato dal
    Dec 2003
    Messaggi
    6
    Salve Mich!
    Ti ringrazio per la risposta

    mi hai suggerito una scelta molto pulita... ma o non faceva proprio al caso mio o forse l'ho interpretata male io che sono un pò negato.
    ad ogni modo ti allego il mio codice con quel che ero riuscito a fare l'altro giorno.



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Documento senza titolo</title>
    <style type="text/css">
    <!--
    body, div#coupon { overflow:hidden; !important }
    html,body{ margin:0; padding: 0;height: 100% }
    body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000000;
    }
    body>div#container{height: auto; min-height: 100%}

    div#container {
    width: 100%;
    text-align: left;
    background-color: #CCCCCC;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
    height: 100%;
    }

    div#header {
    background-color: #000099;
    height: 5%;
    }

    div#palinsesto {
    width: 55%;
    background-color: #FFCC00;
    height: 95%;
    overflow: auto;
    float:left;
    margin: 0px;
    }


    div#coupon {
    width: 35%;
    text-align: left;
    background-color: #009933;
    height: 95%;
    float:right;
    overflow: hidden;
    margin: 0px;
    }

    div#coupon>div#eventi { min-height: 90%;}

    div#codici {
    background-color: #FF6600;
    margin: 0px;
    height: 5%;
    }

    div#eventi {
    background-color: #99FF99;
    overflow: auto;
    height: 90%;
    margin: 0px;
    }

    div#importi {
    background-color: #FF0000;
    height: 5%;
    margin: 0px;
    }
    div#menu {
    background-color: #00CC00;
    float: left;
    margin: 0px;
    height: 100%;
    width: 10%;
    }
    -->
    </style>
    </head>

    <body>
    <div id="container">

    <div id="header">Inserire qui il contenuto per id "header"</div>
    <div id="menu">Inserire qui il contenuto per id "menu"</div>
    <div id="coupon">
    <div id="codici">Inserire qui il contenuto per id "codici"</div>
    <div id="eventi">


    Inserire qui il contenuto per id "eventi"</p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>
    </div>
    <div id="importi">Inserire qui il contenuto per id "importi"</div>
    </div>
    <div id="palinsesto">


    Inserire qui il contenuto per id "palinsesto"</p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>
    </div>
    </div>
    </body>
    </html>



    Adesso gli unici problemi da risolvere sono la compatibilità su Firefox e IE.
    Ovvero... su internet explorer è tutto OK, su Firefox salta il box rosso e non si aprono le scrollbars.
    Se commento/occulto il codice relativo al doctype ( che ho sempre odiato ) ottengo su IE la visualizzazione corrente che ho su firefox e viceversa
    c'è da impazzire

    Tornando al cdice ed alla mia esigenza di simulare un frameset...
    Ho diviso verticalmente il pezzo di destra in 3parti con percentuali fittizie la cui somma risultasse in fine 100%.

    poi riempio i div Codici e importi con contenuto che forza le altezze ed ottengo l'altezza di eventi. ( spero )

    non so se mi sono lasciato trasportare troppo da ragionamenti assurdi... ma un pò funziona.
    Forse dovrei provare a risolvere le ultime cose con tutte quelle regole
    \widht w\idht

    ciao

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Intanto con la DTD XHTML 1.0 Strict anche IE6 si comporta come FF. Potrebbe essere una via da provare. Ricorda pero` che il DOCTYPE deve essere il primo carattere del file, altrimenti IE lo ignora.

    Mi e` complicato interpretare tutto il codice (che per di piu` e` inserito come testo, non come codice). Non e` che hai una pagina in linea?

    Solo per semplificazione: il tuo codice:
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;

    si puo` scrivere come:
    margin: 0 auto;

    Di solito l'uso dell'attributo position complica enormemente la formattazione: se puoi non usarlo e` meglio.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  7. #7
    Utente di HTML.it
    Registrato dal
    Dec 2003
    Messaggi
    6
    oki grazie x la dritta del margin. mò provo anche questa

  8. #8
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Io avvrei un problema come simulare i frameset in questo modo:
    vi posto il codice html fatto con i frameset:
    Ma perche` non usare un codice corretto?

    Nella DTD XHTML Strict, non eiste NESSUNO dei tag usati:
    <center> e` stato eliminato completamente da XHTML
    <MAIUSCOLI> sono stati tutti convertiti in minuscoli
    <frameset> e <frame> esistono solo nella DTD Frameset
    l'attributo name e` permesso solo nei tag interni ai <frame>

    In pratica stai facendo il passo piu` lungo della gamba: dovresti studiare un po` di XHTML, altrimenti ci manca un linguaggio comune per poterci capire. Ti conviene anche studiarti il tutorial sui CSS di HTML.it

    In risposta alla domanda specifica, ogni frame deve diventare un <div>, che poi va posizionato tramite i CSS.
    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.