• User

    Mi sa che abbiamo frainteso..Io onn voglio dei brodi, ma delle div che facciano il bordo..Così poi le riempio con le immagini, e fanno la grafica di contorno


  • User Attivo

    Gh :fagiano:

    Allora la soluzione è un po più complicata, e comporterebbe la riscrittura di buona parte del CSS...

    Ora sto uscendo, se ti interessa dopo posto qualche idea.


  • User

    Si, a me interessa infatti riammodernare il css, ma mantenendo la cmopatibilità, e le misure...Grazie mille se mi aiuti


  • User Attivo

    Ti dico la prima soluzione che mi viene in mente, sicuramente ce ne sono altre migliori... ma vista l'ora 🙂

    Dunque. Presumendo che i div Header, Sidebar, Content e Footer non abbiano un immagine di sfondo: l'idea è quella di applicare degli sfondi ripetuti, oppurtanamente posizionati, tali da apparire come cornici grafiche.
    Ad esempio ti crei il pattern verticale della tua cornice (patternverticale.gif) e dai al div Content il seguente attributo:

    background: #FFFFFF, patternverticale.gif, top left, repeat-y;
    

    In questo modo si dovrebbe replicare l'effetto della cornice a sinstra. Lo stesso discorso, ma con posizioni scambiate, vale per Sidebar.

    Invece per Header e Footer, che dovrebbero avere dimensioni fisse, crei un immagine di sfondo incorniciata con la tua cornice, delle stesse dimensioni delle div. Ad esempio se Header è 720x140px, crei un'imamgine 720x140px incorniciata e la imposti come background-image per Header.

    Spero di avere finalmente centrato il problema! 🙂


  • User

    Anche io avevo fatto così, ma a 1280x1024 è perfetto, mentre le immagini alle altre risoluzioni fanno cesso..


  • User

    Mi puoi aiutare?


  • User Attivo

    Ciao!
    Mi ero perso la risposta.

    Che significa che ad altre "risoluzioni fanno cesso"?

    Hai una pagina online da vedere, per capire meglio?

    :ciauz:


  • User

    http://rapidshare.com/files/8420893/ex.rar.html

    é di un po di gg fa, ma dovrebbe redere l'idea..Comunque a me servono proprio le div, non è che mi aiuteresti a farle per favore?

    Intendo quelle in + al layout di adesso, quelle solo dedicate alla grafica...


  • User

    Un grande aiuto me lo daresti moltissimo se come prima cosa fossi in grado,gentilmente, di modificare il css in modo da non avere solo 2 div (conte e sidebar) orizzontalmente affiancate come adesso, ma a me servirebbero 5 div (bordo sx, content, bordo centrale,sidbar, bordo dx)..Mi aiuteresti una casino..
    Grazie mille e scusa per lo scazzo ennesimo


  • User

    emh ci sei ankora?


  • User

    Help Me!!!!!


  • User Attivo

    @lostboy said:

    Un grande aiuto me lo daresti moltissimo se come prima cosa fossi in grado,gentilmente, di modificare il css in modo da non avere solo 2 div (conte e sidebar) orizzontalmente affiancate come adesso, ma a me servirebbero 5 div (bordo sx, content, bordo centrale,sidbar, bordo dx)..Mi aiuteresti una casino..
    Grazie mille e scusa per lo scazzo ennesimo

    Ok, allora fai un div che contenga le tue 5 cinque div (wrapper) e inserisci le 5 div con il float:left e dai le dimensioni in modo tale che la somma totale non superi il width del wrapper.

    Faccio un esempio:

    
    #wrapper {
        width:720px;
    }
    #uno {
        width:144px;
        float:left;
    }
    #due {
        width:144px;
        float:left;
    }
    #tre {
        width:144px;
        float:left;
    }
    #quattro {
        width:144px;
        float:left;
    }
    #cinque {
        width:144px;
        float:left;
    }
    
    

    E l'html:

    
    <div id="wrapper">
      <div id="uno">1<br><br><br><br></div>
      <div id="due">2<br><br><br><br></div>
      <div id="tre">3<br><br><br><br></div>
      <div id="quattro">4<br><br><br><br></div>
      <div id="cinque">5<br><br><br><br></div>
    </div>
    
    

    Occhio che nella somma totale devi considerare i margini ed evntualmente il padding di ogni singolo div. Se al div uno dai width:144 e margin:3 la dimensione che ottieni è 144+3+3=150.

    Se sfori la dimensione del wrapper, le div in eccesso vanno a capo.

    Inoltre tieni presente che IE interpreta diversamente il Box Model rispetto agli standard e quindi dopo che hai calcolato le dimensioni, dovrai adattare il tuo foglio di stile. :bho:

    Se permetti un consiglio non penso che usare 5 div in questa maniera sia una buona soluzione (considerando la noia di adattare il CSS a IE!). Secondo me, lavorare con il background come ti avevo suggerito prima è un idea migliore. 😉

    :ciauz:


  • User

    No il mio css per fortuna funzia sia coin i.e. 7, sia con i.e. precedenti, sia con mozilla...

    Avrei un po di consigli da chiederti se hai tempo..Grazie mille intanto per sopra...Alla fien ho capito che era per i padding ecc che sforavano a capo..

    Ora ho 2 problemi : uno, come fare a fare si che le div bordo si riempiano dinamicamente in base alla risoluzione : es : a 1280x1024, devo mettere na decina di br (con lo sfondo che fa repeat-y), ma a 1024x768 invece quei 10 br sono troppi e fa apparire lo scollbar..Come faccioa fare si che, come per l'orizozntale, che invece funziona, anche il verticale ridimensioni la grafica ecc in base alla risoluzione?Perchè io, dopo avere l'header, il footer fissi, piacerebbe tenere bordo sx verticale fisso, content scrollabile, bordo centrale verticale fisso, sidebar scrollabile, bordo dx verticale fisso...

    é possibile?

    Grazie mille, se passi in trentino la birra di supporto è tua 🙂


  • User

    No il mio css per fortuna funzia sia coin i.e. 7, sia con i.e. precedenti, sia con mozilla...

    Avrei un po di consigli da chiederti se hai tempo..Grazie mille intanto per sopra...Alla fien ho capito che era per i padding ecc che sforavano a capo..

    Ora ho 2 problemi : uno, come fare a fare si che le div bordo si riempiano dinamicamente in base alla risoluzione : es : a 1280x1024, devo mettere na decina di br (con lo sfondo che fa repeat-y), ma a 1024x768 invece quei 10 br sono troppi e fa apparire lo scollbar..Come faccioa fare si che, come per l'orizozntale, che invece funziona, anche il verticale ridimensioni la grafica ecc in base alla risoluzione?Perchè io, dopo avere l'header, il footer fissi, piacerebbe tenere bordo sx verticale fisso, content scrollabile, bordo centrale verticale fisso, sidebar scrollabile, bordo dx verticale fisso...

    é possibile?

    Grazie mille, se passi in trentino la birra di supporto è tua 🙂


  • User Attivo

    @lostboy said:

    Ora ho 2 problemi : uno, come fare a fare si che le div bordo si riempiano dinamicamente in base alla risoluzione : es : a 1280x1024, devo mettere na decina di br (con lo sfondo che fa repeat-y), ma a 1024x768 invece quei 10 br sono troppi e fa apparire lo scollbar..Come faccioa fare si che, come per l'orizozntale, che invece funziona, anche il verticale ridimensioni la grafica ecc in base alla risoluzione?Perchè io, dopo avere l'header, il footer fissi, piacerebbe tenere bordo sx verticale fisso, content scrollabile, bordo centrale verticale fisso, sidebar scrollabile, bordo dx verticale fisso...

    é possibile?

    Grazie mille, se passi in trentino la birra di supporto è tua 🙂

    Dovrebbe bastare mettere ai div di bordo un height:100% 🙂


  • User

    non funzia, non capisco..Ho provato anche con l'overflow...Magari sbaglio io....


  • User Attivo

    @lostboy said:

    non funzia, non capisco..Ho provato anche con l'overflow...Magari sbaglio io....

    Imposta height:100% (o l'height che vuoi tu) anche al div contenitore.


  • User

    Ti riposto il codice css, magari trovi l'errore...

    /* impostazionidi layout /
    body,
    html{
    margin:0;
    padding:0;
    }
    body {
    min-width:720px; /
    Prevent content from becoming unreachable in Gecko */

    }
    /* position:absolute for all browsers - the whole page scrolls /
    div#headerwrap {
    position:absolute;
    width:100%;
    top:0;
    left:0;
    height:140px;
    }
    /
    position:fixed for modern browsers - header and footer do not scroll */
    body>div#headerwrap {
    position:fixed;
    }
    div#header {

    height:110px;
    width:720px;
    margin:0 auto;
    }
    div#bordo_sup_2 {
    height:30px;
    width:720px;
    margin:0 auto;
    }
    div#login
    {
    float:right;
    height:140px;
    width:110px;
    margin:0 auto;
    }

    /* set a left margin to compensate for IE/Win always making room for a scrollbar /
    div#middlewrap {
    /
    set left margin and bottom padding for IE5/Win /
    padding:140px 0 0 0;
    margin-left:0;
    /
    set left margin and bottom padding for others */
    voice-family: ""}"";
    voice-family:inherit;
    margin-left:16px;
    padding-bottom:0px;

    }
    /* set left margin for modern browsers */
    body>div#middlewrap {
    margin-left:0;
    }
    div#middle {
    width:720px;
    margin:0 auto;

    }

    #bordo_sx {
    height:100%;
    width:30px;
    float:left;
    overflow:hidden;
    }
    #content {
    height:100%;
    width:450px;
    float:left;
    overflow:auto;
    }
    #bordo_cen {
    height:100%;
    width:30px;
    float:left;
    overflow:hidden;
    }
    #sidebar {
    height:100%;
    width:180px;
    float:left;
    overflow:auto;
    }
    #bordo_dx {
    height:100%;
    width:30px;
    float:left;
    overflow:hidden;
    }

    /* no positioning for IE5/Win - the whole page scrolls */
    div#footerwrap {
    width:100%;
    p\osition:absolute;
    bottom:0;
    left:0;
    height:70px;
    }
    body>div#footerwrap {
    position:fixed;
    }
    div#footer {
    height:70px;
    width:720px;
    margin:0 auto;
    }

    /* Impostazioni grafiche, stile , colori ecc. */

    body,
    html{
    font-family:"Trebuchet MS", Georgia, Verdana, serif;
    color:#ffffff;
    background-image:url(../img/sfondonatale_body.gif);
    }

    div#header{
    background-repeat:no-repeat;
    background-image:url(../img/logonatale.jpg);
    }

    div#bordo_sup_2 {
    background-position:top center;
    background-repeat:repeat-x;
    background-image:url(../img/bordonatale_dx.jpg);
    }

    div#middle
    {
    background-repeat:repeat-y;
    background-image:url(../img/);
    }

    div#bordo_dx {
    background-position:top right;
    background-repeat:repeat-y;
    background-image:url(../img/bordonatale_dx.jpg);
    }

    div#content {

    }

    div#bordo_cen {
    background-position:top center;
    background-repeat:repeat-y;
    background-image:url(../img/bordonatale_sx.jpg);
    }

    div#sidebar {

    }

    div#bordo_sx {
    background-position:top left;
    background-repeat:repeat-y;
    background-image:url(../img/bordonatale_sx.jpg);
    }

    div#footer {

    background-repeat:repeat-x;
    background-image:url(../img/bordonatale_dx.jpg);
    background-image:url(../img/sfondonatale_body.gif);
    color:#eee;
    

    }

    div#sotto{
    background-repeat:repeat-x;
    background-image:url(../img/bordonatale_dx.jpg);
    }

    A me interesserebbe che le div bordo_dx,bordo_cen,bordo_sx restino fisse, e che invece la content e la sidebar facessero apparire le scrollbar qualora ce ne fosse bisogno...

    Ho pasticciato un po con l'overflow e l'height, ma non mi riesce..Se riesoc a fare questo, poi ho finito il layout all'incirca e ti ringrazio un sacco davvero...

    Questa è la struttura del pezzo centrale, in html :

    <div id="middlewrap">

    <div id="middle">
    

    <div id="bordo_sx"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
    <div id="content"><p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    <p>Benvenuti su questo sito,</p>
    </div>
    <div id="bordo_cen"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
    <div id="sidebar">
    <h2>Shout - Box</h2>
    <br />
    <iframe src="../pagine/Sezioni/Shout-Box/index.php" width="130" height="325" frameborder="0">
    </iframe>

    </div>
    <div id="bordo_dx"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>

    </div>

    </div>

    Grazie mille in anticipo x lo sbattimento, speriamo riesci a darmi una mano....:x


  • User Attivo
    
    div#middle {
        width:720px;
        margin:0 auto;
    
    }
    

    Prova a dare un height a questo.

    Se mi ricordo bene l'height relativo di un div (cioè in percentuale) viene calcolato rispetto all'height del div che lo contiene (e nel caso che non sia contenuto da nessun altro div, dal body).


  • User

    Niente da fare...Se ridimensiono la finestra, appare lo scroll totale del contenuto centrale della pagina, invece che rimanere fissi i bordi, e apparire gli scroll sulla sidebar e sulla content....

    Ho anche provato ad assegnare height 100% al body, al middlewrap, al midlle, a tt contemporaneamente...Non capisco dove sbaglio..

    Ti prego aiutami a risolvere...