Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    Altezza colonne #id e sfondo

    Ciao a tutti,
    volevo sapere se è possibile risolvere questo problema estetico...Ho la struttura pagina composta composta da un contenuto (content) con all'interno le classiche 3 colonne affiancate #div (#menu_sx, ##corpo_pagina, #menu_dx)...il colore di sfondo del #menu_sx è di colore diverso rispetto agli altri due accanto. Considerato che il #corpo_pagina ha il contenuto più lungo del #menu_sx, il colore di sfondo del #menu_sx si interrompe prima del fondo pagina, il che non stà molto bene esteticamente. Come posso far scorrere il #menu_sx fino all'altezza del corpo pagina? Ecco parte del codice css:

    # body {

    * text-align : center;
    * background-color : #ffffff;
    * color : #000000;
    * margin : 0;
    * padding : 0;
    * font-size : small;
    * z-index : 1;

    }

    # #Intestazione {

    * width : 780px;
    * height : 100px;
    * margin : auto;
    * background-color : #ffffff;
    * color : #000000;
    * background-attachment : fixed;

    }
    # #link_top {

    * background-color : #ff3300;
    * height : 18px;
    * width : 780px;
    * font-family : Arial, Helvetica, sans-serif;
    * font-size : small;
    * font-weight : bold;
    * font-style : normal;
    * color : #000000;
    * margin : auto;

    }
    # #link_top a {

    * text-decoration : underline;
    * color : #000000;
    * background-color : #ff0000;

    }
    # #menu_sx {

    * width : 150px;
    * background-color : #99ccff;
    * color : #000000;
    * height : auto;
    * top : 0;
    * left : 0;
    * position : absolute;
    * min-height : 1040px;

    }
    # #corpo_pagina {

    * background-color : #ffffff;
    * color : #000000;
    * border-right-width : 1px;
    * border-left-width : 1px;
    * border-right-style : solid;
    * border-left-style : solid;
    * border-right-color : #000000;
    * border-left-color : #000000;
    * height : auto;
    * min-height : 1040px;
    * margin : 0 150px;

    }
    # #menu_dx {

    * width : 150px;
    * background-color : #ffffff;
    * color : #000000;
    * height : auto;
    * position : absolute;
    * top : 0;
    * right : 0;
    * min-height : 1040px;
    * border-top-style : none;
    * border-right-style : none;
    * border-bottom-style : none;
    * border-left-style : none;

    }
    # #footer {

    * width : 780px;
    * background-color : #999999;
    * font-size : x-small;
    * color : #000000;
    * padding-top : 10px;
    * margin : auto;
    * clear : both;
    * text-align : center;

    }
    # #content {

    * width : 780px;
    * text-align : center;
    * position : relative;
    * margin : 0 auto;
    * height : auto;


    Grazie a tutti...

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Fai una ricerca nel forum (bottone in alto a dx) con la chiave "false colonne".
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Grazie, risolto!
    Ho creato e inserito un'immagine all'interno del #div di contenuto con misure e sfondo delle tre colonne interne...Perfetto!

    P.S. Nel caso volessi creare il layout liquido (Le colonne laterali fisse e il corpo pagina centrale ridimensionabile con la risoluzione dello schermo, quindi con il #div corpo pagina in percentuale), come faccio con l'immagine di sfondo?
    Ciao!

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    La cosa si complica ...

    Teoricamente se hai
    html, body {height: 100%;}
    puoi definire height:100% anche nelle colonne.

    Ma questo e` interpretato in modo non conforme da alcuni browser ...

    Cerca nei layout proposti tra i "link utili": puo` darsi che ci sia la risposta.
    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.