• L
    User Attivo •

    css tre colonne

    ciao, è il mio primo esperimento di layout basato sui css. praticamente volevo realizzare tre colonne di tre colori diversi. ho scritto:

    body{margin:0px;} 
 
div#contenitore{position: absolute; width: 100%; height:100%;} 
 
div#contenuti { position: absolute;float:left; width: 64%; height: 97%; background:#CCCCCC; margin-top:1%; margin-left: 1%;} 
 
div#menu { text-align:center;padding-top:5px;font-size:1em;position: absolute; margin-left:65%;float:left; width: 15%; height: 100%; background:#FFCC00; border-left:1px solid; border-right:1px solid; margin-bottom:0;} 
div#menu ul{margin: 0 0 20px;padding: 0; list-style-type: none; padding-top:20px; padding-left:5%;} 
div#menu ul a{display:block;width: 90%;border-bottom: 1px solid #999999;color:#000; 
   font-weight:bold; text-decoration: none; padding-top:5px; color:#FFFFFF;} 
div#menu ul a:hover{color: #f00} 
div#menu ul a#activelink{color:;text-decoration: none} 
 
div#intestazione {position: absolute; margin-left:81%;float:right; width: 18%; height:97%; background:#00CC00; margin-top:1%;}

    Mozilla mi crea il template, mentre IE invece colora solo la parte di colonna che contiene degli elementi (tipo testo) e lascia bianco tutto il resto. sapete come posso risolvere?

    altro problema che si verifica anche con mozilla. se una delle colonne è abbastanza lunga da far comparire la scrollbar, le colonne non si colorano nell area sotto.

    ecco un esempio http://lau.netsons.org/css/

    0
  • P
    Super User •

    Ciao, LauPhp

    temo che per ovviare al tuo problema, occorra inserire le altezze con dimensione fissa...
    Prova magari, poi facci sapere...

    :ciauz:

    0
  • L
    User Attivo •

    ciao Paola, grazie per aver risposto.

    smanettando un po sono arrivata a questo:

    body{margin:0px; background-image:url(texture.gif); height:100%;}
/* contenitore */
div#contenitore{position: absolute; width: 100%; height:100%;}
/*contenuti */
div#contenuti {position: absolute;float:left; width: 64%; height:97%; min-height:97%; background:#CCCCCC; margin-top:1%; margin-left: 1%;}
 
/*menu*/
div#menu { text-align:center;font-size:1em;position: absolute; margin-left:65%;float:left; width: 15%; height: 100%; background-color:#FFCC00; border-left:1px solid; border-right:1px solid;}
div#menu ul{margin: 0 0 20px; list-style-type: none; padding-top:20px;}
div#menu ul a{display:block;border-bottom: 1px solid #999999; font-weight:bold; font-size:90%; text-decoration: none; color:#FFFFFF;margin-left: 10%; margin-right: 10%;}
div#menu ul a:hover{color:}
div#menu ul a#activelink{color:;text-decoration: none}
/*intestazione*/
div#intestazione {position: absolute; margin-left:81%;float:right; width: 18%; height:97%; background:#00CC00; margin-top:1%;}

    e questo è il risultato http://lau.netsons.org/css

    quindi il problema della colorazione delle colonne credo sia superato, adesso pero c è il problema del menu che in firefox si vede un po strambo. altro problema è quando una colonna diventa troppo lunga come in questo caso:
    http://lau.netsons.org/css/index2.html
    vorrei che anche le altre due colonne si adattassero alle dimensioni di quella piu lunga. visto che l unica colonna che può variare di altezza è "contenuti" potrei risolvere con un overflow:auto; ma io odio, odio ed odio le scrollbar 🙂

    ciao a presto

    0
Effettua l'accesso per rispondere