Visualizzazione dei risultati da 1 a 10 su 10
  1. #1
    Utente di HTML.it L'avatar di semolino
    Registrato dal
    Nov 2004
    Messaggi
    1,499

    costruzione di un container a 4 lati

    Ciao ragazzi stavo cercando di costruire un container che è composto nel seguente modo:
    un div centrale, uno top, uno bottom, uno a sinistra e uno a desra del centrale.
    Ora ho scritto questo
    Codice PHP:
    <style type="text/css">
    <!--
    .
    pent_top {
    margin0 autowidth499px;
    height112px;
    backgroundurl(images/ricette/pentola_top.pngno-repeat;
    }
    .
    pent {
        
    margin:0 autowidth412px;
        
    background-color:#ffffff;
        
    height:auto;
            
    padding2px;
    }
    .
    pent_bottom {
    margin0 autowidth499px;
    height31px;
    backgroundurl(images/ricette/pentola_bottom.pngno-repeat;
    }
    -->
    </
    style>
    </
    head>

    <
    body>
    <
    div class="pent_top"></div>
    <
    div class="pent">tutti i contenuti....</div>
    <
    div class="pent_bottom"></div>
    </
    body>
    </
    html
    Ora mi trovo nella situazione di avere il centrale, il top e il bottom.
    Come faccio ad attaccare i laterali che contengono le immagini?
    Dite che il caso di mettere il tutto dentro un div che contiene tutti i sottodiv?
    Nota: la parte centrale, che ospita i contenuti, avrà l'altezza settata su auto cosi si adatta.

  2. #2
    <style type="text/css">
    <!--
    .pent_top {
    margin: 0 auto; width: 499px;
    height: 112px;
    background: url(images/ricette/pentola_top.png) no-repeat;
    }
    .pent {
    margin:0 auto; width: 412px;
    background-color:#ffffff;
    height:auto;
    padding: 2px;
    }
    .pent_bottom {
    margin: 0 auto; width: 499px;
    height: 31px;
    background: url(images/ricette/pentola_bottom.png) no-repeat;
    }
    -->
    </style>
    </head>

    <body>



    <table width="784" border="0" align="center" cellpadding="0" cellspacing="8">
    <tr>
    <td colspan="3"><div class="pent_top"></div> </td>
    </tr>
    <tr>
    <td width="128"></td>
    <td width="496"><div class="pent">tutti i contenuti....</div> </td>
    <td width="128"></td>
    </tr>
    <tr>
    <td colspan="3"><div class="pent_bottom"></div></td>
    </tr>
    </table>

    </body>
    </html>







    io ti consiglio di usare cosi , pero poi fai come preferisci ( poi deviu sistemare tutti i parametri

  3. #3
    Utente di HTML.it L'avatar di semolino
    Registrato dal
    Nov 2004
    Messaggi
    1,499
    vorrei cercare di farlo tutto senza tabelle.

  4. #4
    allora devi creare un div che contiene tutto denno ti v va tutto a spasso

  5. #5
    Utente di HTML.it L'avatar di semolino
    Registrato dal
    Nov 2004
    Messaggi
    1,499
    CI sono quasi... mi mancano solo i due laterali.
    Per ora ho organizzato tutti gli altri div interni al centrale...
    wow

  6. #6

  7. #7
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188

    Re: costruzione di un container a 4 lati

    Originariamente inviato da semolino
    Ciao ragazzi stavo cercando di costruire un container che è composto nel seguente modo:
    un div centrale, uno top, uno bottom, uno a sinistra e uno a desra del centrale.
    Ora ho scritto questo

    Ora mi trovo nella situazione di avere il centrale, il top e il bottom.
    Come faccio ad attaccare i laterali che contengono le immagini?
    Dite che il caso di mettere il tutto dentro un div che contiene tutti i sottodiv?
    Nota: la parte centrale, che ospita i contenuti, avrà l'altezza settata su auto cosi si adatta.
    Mi mancano una serie di info per poter rispondere a tono.
    1. Per cosa ti serve il tutto?
    Potrebbe essere per creare una cornice, oppure per fare un sito classico con header, footer, due colonne laterali

    2. Quali dei 5 blocchi hanno misure fisse? La realizzazione e` molto diversa nei vari casi.

    3. Nel caso che il centrale abbia lunghezza maggiore, cosa deve sucedere ai laterali? Potrebbe essere che si devono allungare o che deva apparire una barra di scorrimento.

    4. In quali brwoser deve funzionare? perche` se deve funzionare anche in IE6, occorre studiare la cosa in modo diverso.

    5. Hai gia` deciso che DTD usare? Altrimenti ti consglio XHTML strict, che da un lato semplifica molto il layout, pero` prevede che tutta la pagina sia realizzata in modo strict (praticamente e` impossibile usare gli editor HTML piu` comuni).

    PS: dovresti anche guardare cosa propongono i siti di layout: alcuni link sono tra i "link utili"; dato che il tuo layout puo` essere visto come classico layout a tre colonne con header e footer, ci sono varie cose pronte, che basta copiare ed adattare. Chiaramente questo semplifica il tutto, quindi e` da fare prima di scervellarsi a reinventare l'acqua calda.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  8. #8
    Utente di HTML.it L'avatar di semolino
    Registrato dal
    Nov 2004
    Messaggi
    1,499
    In teroria sono arrivato ad una conclusione.
    In effetti dovrei testarlo anche con IE...
    Ora ho realizzato in modo tale che tutto sia di dimensioni fisse, mi piacerebbe che le tre colonne centrali di adattassero in base all'alteza, ma se metto height:auto, le due immagini contenute a dx e a sx scompaiono. Restano solo se gli do una dimensione reale.
    Per dare un'occhiata vi posto il codice... magari si può correggere qualcosa al volo...
    Codice PHP:
    <style type="text/css">
    <!--
    #pentola {
        
    margin0 auto
        
    width499px;
        
    height:518px/*altezza totale della pentola fissa*/
        
    border0px dotted #3333ff;
    }
    #pentola .pent_top {
    margin0 autowidth499px;
    height112px;
    backgroundurl(images/ricette/pentola_top.pngno-repeat;
    }
    #pentola .pent_top #title{
        
    position:relative;
        
    left:84px;
        
    top:75px;
        
    width:330px;
        
    height:20px;
        
    font-weight:bold;
        
    text-align:center;
        
    color:#3333ff;
        
    text-transform:uppercase;
        
    z-index:1;
        
    border0px solid #ffffff;
    }
    #pentola .pent {
        
    margin:0 autowidth412px;
        
    background-color:#ffffff;
        
    height:375px;
    }
    /* info */
    #pentola .pent #info{
        
    position:relative;
        
    left:10px;
        
    top:0px;
        
    width:386px;
        
    height:39px/*altezza immagini omini e bombe*/
        
    z-index:1;
        
    border-bottom1px dotted #3333ff;
    }
    #pentola .pent #info #omini{
        
    display:block;
        
    backgroundurl(images/ricette/omini.pngno-repeat left top;
        
    height:39px;
        
    z-index:1;
    }
    #pentola .pent #info #omini #diff{
        
    position:relative;
        
    left:200px;
        
    top:4px;
        
    display:block;
        
    backgroundurl(images/ricette/difficolta.pngno-repeat left top;
        
    height:35px;
        
    z-index:1;
    }
    /* eof info */
    #pentola .pent_left {
        
    width:42px;
        
    height:375px;
        
    backgroundurl(images/ricette/pentola_left.pngno-repeat;
        
    border0px dotted #3333ff;
        
    float:left;
    }
    #pentola .pent_right {
        
    width:43px;
        
    height:375px;
        
    backgroundurl(images/ricette/pentola_right.pngno-repeat;
        
    border0px dotted #3333ff;
        
    float:right;
    }

    #pentola .pent_bottom {
    margin0 autowidth499px;
    height31px;
    backgroundurl(images/ricette/pentola_bottom.pngno-repeat;
    float:left;
    }

    -->
    </
    style>
    <
    div id="pentola">
    <
    div class="pent_top"><div id="title">spaghetti alla matriciana</div></div>

    <
    div class="pent_left"></div><div class="pent_right"></div>
    <
    div class="pent">

    <
    div id="info"><div id="omini" style="background-position:0 1px;"><div id="diff" style="background-position:0 -68px;"></div></div></div>

    tutti i contenuti di pent</div>

    <
    div class="pent_bottom"></div>
    </
    div
    EDIT: un test al volo in locale... con IE funzia...

  9. #9
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Dovresti testarlo anche in Opera e FF1: credo che avrai delle sorprese.
    I blocchi vuoti possono venir ignorati dai browser, e qualche browser effettivamente lo fa.

    Comunque ci sono anche errori di semantica (ad esempio il titolo inserito in un <div> anziche` in un <hX>).

    Per quanto riguarda le dimensioni fisse: mi pare che usi tutto sfondi no-repeat: quindi se un blocco si allarga/allunga si vedono degli spazi bianchi. E` chiaro che in queste condizioni non si puo` pensare di usare layout elastici.

    Credo di aver capito (ma nonostante te lo avessi chiesto non hai risposto) che la griglia ti serve per inquadrare una scritta dentro uno sfondo che viene montato pezzo per pezzo e rappresenta una immagine unica. Una cosa del genere io la farei con un'immagine unica cui sovraporrei la scritta con sfondo trasparente, opportunamente centrata. La struttura risulterebbe molto piu` leggera, ed anche in caso di non caricamento delle immagini o del CSS il tutto avrebbe molto piu` senso.
    Una cosa del genere:
    codice:
    <div id="pentola">
      <h2>spaghetti alla amatriciana</h2>
      <p class="pent">tutti i contenuti di pent</p>
      
    </div>
    Con CSS del tipo:
    codice:
    #pentola {
        position: relative;
        margin: 0 auto;
        width: 499px;
        height:518px; /*altezza totale della pentola fissa*/
        border: 0px dotted #3333ff;
    } 
    #pentola h2 {
        position: absolute;
        top: 20px;    /* numero a caso: occorre sistemarlo */
        left: 50%;
        width: 412px; 
        margin-left: -206px;
        text-align: center;
    }
    #pentola p {
        position: absolute;
        top: 50px;    /* numero a caso: occorre sistemarlo */
        left: 50%;
        width: 412px; 
        margin-left: -206px;
        text-align: left;   /* ??? */
    }
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  10. #10
    Utente di HTML.it L'avatar di semolino
    Registrato dal
    Nov 2004
    Messaggi
    1,499
    Ah, ho capito cosa vuoi dirmi...
    Se il mio layout resta fisso, lascio un'immagine unica su cui sovrappongo i contenuti...
    Nel caso volessi adattarla, devo cambiare la grafica per far si che le tre colonne non abbiano il no-repeat.

    Certo, non ci avevo pensato.

    Nel layout che mi hai mandato non consideri i div di info, giusto? perchè hanno delle immagini che variano in base a delle opzioni... le reinserisco.
    Grazie

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 © 2026 vBulletin Solutions, Inc. All rights reserved.