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

    Problemi con CSS layout a 2 colonne

    Per favore, qualcuno che ha esperienza nel layout a colonne gestito con i fogli di stile, mi potrebbe cortesemente dare una mano a capire perché questa pagina fatta da me non va?

    Siccome mi sono messo in testa di riuscire a tutti i costi a impostare il layout con i fogli di stile, evitando così l'utilizzo di tabelle, ho provato a costruire un layout centrato a due colonne affidando la gestione ai css.

    Il primo problema è che le due colonne non hanno mai pari altezza, a meno che non inserisca un valore assoluto, cosa che però non voglio fare, poiché desidero che l'altezza sia fluida e si adatti al testo.
    Come faccio a fare in modo che le due colonne rimangano sempre pari, dipendentemente dall'ingrandimento di una delle due?

    Il secondo problema è la signature (<div id="signature">): nonostante io imposti il margin top e bottom, mi rimane sempre appiccicata al box bianco sovrastante.

    Questo è l'indirizzo della pagina:
    http://www.senortonto.com/christmas/

    Ringrazio anticipatamente chiunque mi vorrà/potrà dare una mano.

    P.S.
    Poi, vabbeh, volendo rincarare la dose, ci sarebbe anche il solito problema del corsivo: con Explorer, se inserisco del testo in corsivo, mi spagina le colonne e la destra finisce sotto a quella sinistra... ma questo è un problema secondario del quale nemmeno mi preoccupo: evito direttamente di usare il corsivo.

  2. #2

    Re: Problemi con CSS layout a 2 colonne

    Il secondo problema è la signature (<div id="signature">): nonostante io imposti il margin top e bottom, mi rimane sempre appiccicata al box bianco sovrastante.
    Scusate, sono scemo, a questa mi rispondo da solo: invece del margin, basta dare il padding.
    :rollo:

    Rimangono validi gli altri quesiti.

  3. #3
    purtroppo ie non supporta alcune proprietà css che risolverebbero facilmente questo tipo di problemi

    visto che il tuo è un layout fisso la cosa più semplice è usare uno sfondo che simula quelle due colonne

    altrimenti occorre avere sempre la stessa colonna più alta, se no si può fare ancora qualcosa ma in modo talmente complesso che lo sconsiglio.
    4 pag. x il forum:l'ospite ora ha solo link sponsorizzati, valli a capire-GommaLayout! Agg. 25 agosto 2004)-Molla&Collano privati tecnici, per favore

  4. #4
    Se ho capito il tuo problema prova così...


    <html>
    <head>
    <title>PROVA</title>
    <style type="text/css">
    #testa {width: 800px; height: 80 px; background: url(imgbicoloresopra.gif) #ababab repeat-y left}
    #corpo {width: 800px; height: 400 px; background: url(imgbicolore.gif) #ababab repeat-y left}
    #piede {width: 800px; height: 120 px; background: url(imgbicoloresopra.gif) #ababab repeat-y left}
    #boxsin {width: 300 px; float: left}
    #boxdex {width: 400 px}
    </style>
    </head>
    <body>
    <div id="testa">
    </div>
    <div id="corpo">
    <div id="boxsin">
    </div>
    <div id="boxdex">
    </div>
    </div>
    <div id="piede">
    </div>
    </body>
    </html>

    in realta l'immagine che ho chiamato imgbicolore.gif non lo è affatto, occupa solo meta della larghezza del corpo, per l'altra colonna sfrutti il colore di sfondo, poi ti devi fare due img una sup e una inf e tutto dovrebbe funzionare come vuoi tu..

    ciao ...
    la somma delle larghezze dei boxsin e del boxdex deve essere inferiore a quella del centro ....

    Ciao

  5. #5
    ops per la fretta ho fatto un errore ... non determinante nel funzionamento del codice

    in testa e piede non devi ripetere l'immagine



    Ciao




  6. #6
    a dimenticavo per la signature

    dai

    #signature {position: relative; top: 10px}

    ciao

  7. #7
    Continua ad esserci qualcosa che mi sfugge...
    :rollo:

    Ho provato ad applicare il tuo esempio (che di per sé funziona in una prova a parte che ho fatto) al mio layout, ma evidentemente qualcosa è andato storto... e non capisco cosa.

    Ti riporto l'intero foglio di stile:

    /* GENERALE */
    html, body {
    text-align: center;
    background-color: #BACEEB;
    margin: 10px 0px 10px 0px;
    padding: 0px;
    }
    div, a {
    line-height: 14px;
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    }
    strong {
    color: #3F69A6;
    }
    /* LINK */
    a {
    text-decoration: none;
    }
    a:hover {
    text-decoration: underline;
    }
    a:visited {
    color: #666666;
    }
    div#colright a {
    font-size: 9px;
    color: #EE1A26;
    }
    div#colright a:hover {
    color: #F57A81;
    }
    div#colright a:visited {
    color: #9E0C13;
    }
    div#signature a {
    font-size: 9px;
    color: #3F69A6;
    }
    div#signature a:hover {
    text-decoration: overline underline;
    }
    div#signature a:visited {
    color: #3F69A6;
    }
    /* STRUTTURA COLONNE */
    div#box {
    width: 720px;
    margin: 0px auto 0px auto;
    }
    div#head {
    width: 720px;
    height: 160px;
    background-image:url(../titles/title.gif);
    background-position: center center;
    background-repeat: no-repeat;
    margin-bottom: 6px;
    }
    /* BOX */
    div#top {
    width: 720px;
    height: 25px;
    background-image: url(../titles/bgtop.gif);
    background-repeat: no-repeat;
    background-position: center;
    }
    div#center {
    width: 720px;
    height: 700px;
    background-color: #E5EAF4;
    }
    div#bottom {
    width: 720px;
    height: 25px;
    background-image: url(../titles/bgbottom.gif);
    background-repeat: no-repeat;
    background-position: center;
    clear: both;
    position: relative;
    }
    /* COLONNA SINISTRA */
    div#colleft {
    text-align: justify;
    padding: 35px 60px 35px 60px;
    width: 350px;
    float: left;
    background-color: #FFFFFF;
    }
    div#colleft p {
    margin: 0px 0px 8px 0px;
    }
    div#colleft img {
    margin-bottom: 8px;
    clear: both;
    display: block;
    }
    /* COLONNA DESTRA */
    #colright {
    font-size: 9px;
    font-size: 9px;
    text-align: justify;
    width: 190px;
    background-color: #E5EAF4;
    padding: 5px 30px 5px 30px;
    float: left;
    }
    div#colright img {
    margin-bottom: 8px;
    display: block;
    clear: both;
    }
    /* SIGNATURE */
    div#signature {
    color: #FFFFFF;
    font-size: 9px;
    text-align: center;
    clear: both;
    position: relative;
    top: 10px;
    bottom: 10px;
    }

  8. #8
    ... e l'intero codice della pagina, perché a me sembra di aver rispettato in toto le condizioni del tuo esempio.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <title>Señor Tonto Christmas Album</title>
    <link href="style/main.css" rel="stylesheet" type="text/css">
    <base target="_blank">
    </head>

    <body>
    <div id="box">


    <div id="head"></div>


    <div id="top"></div>


    <div id="center">


    <div id="colleft">TESTO</div>


    <div id="colright">TESTO</div>
    </div>


    <div id="bottom"></div>


    <div id="signature">TESTO</div>
    </div>
    </body>
    </html>

  9. #9
    ...perché ora, con Mozilla, appare così: http://www.senortonto.com/christmas/

    E se provo a inserire dei
    nella colonna destra per appiccicarla al "piede", si stacca quella di sinistra...

    Con Explorer tutto bene, ma con Mozilla va male...

  10. #10
    prima di tutto ti sconsiglio di usare caratteri in pixel, ie non ridimensiona quella misura da browser e quindi va evitata.

    poi prima della chiusura del div #center inserisci anche un br con uno style clear:both

    il problema è che manca l'immagine di sfondo sempre per quel div, o un'immagine bicolore o come ti ha detto Krek un'immagine più l'altro colore come sfondo ma un'immagine la devi mettere, altrimenti se la colonna lunga non è sempre la stessa ti sballerà lo sfondo.

    cioè se a #center cambi colore di sfondo cioè dai un white sistemi momentaneamente ma dovrà sempre essere la colonna di destra quella più lunga e non certo valutare caso a caso e aggiungere br

    4 pag. x il forum:l'ospite ora ha solo link sponsorizzati, valli a capire-GommaLayout! Agg. 25 agosto 2004)-Molla&Collano privati tecnici, per favore

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.