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

    BOX contenitore termina a fine pagina invece che contenere colonna più lunga

    Ciao,

    ho creato due file CSS per realizzare il template layout per pagine a due o tre colonne. Invece che applicare le immagini di sfondo a contenitori aggiuntivi, vorrei poter applicare l'immagine di sfondo solo al relativo BOX che contiene le colonne di informazione (Navigazione e contenuti).

    Tuttavia questo funziona bene se una colonna non richiede scroll (quindi rimane confinata nell'altezza della pagina), altrimenti fuoriesce dal contenitore (nel caso in esempio "mainBox2COLS" del layout a due colonne).
    Il risultato è che il box contenitore non "wrappa" tutto il contenuto della colonna più lunga ma termina ad un'altezza pari al 100% della pagina, quindi anche lo sfondo che simula la colonna dei contenuti si interrompe prima.

    Come posso fare per impostare che il box contenitore non si fermi ad un'altezza 100%, ma avvolga tutto il cotenuto della colonna piu' lunga?

    Grazie

    CSS:
    codice:
    body
    {
    	margin: 0px;
            padding:0; 
    	font-family: Verdana, Arial, Serif;
    	font-size: 11px;
    	border: 0; min-width:800px;	
    }
    
    
    #mainBox2COLS
    {	
    position: absolute; 
    top: 106px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    min-width:800px;
    background: url(/Portals/1/Images/backgound2COLSImg.jpg) repeat-y top left;	
    } 
     
    #contentRight2COLS
    {
    position:absolute;
    top:0;
    right:0;	
    left:290px;
    bottom: 0;
    font:8pt verdana; 
    }
    
    #contentcolumn{}
    
    #contentLeft2COLS
    {
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width:270px;	
    margin-right: 290px;	
    }
    HTML:
    codice:
    <div id="mainBox2COLS">
        
            <div id="contentRight2COLS">
                <div class="innertube">
    			Some	content here
                </div>
            </div>   
    
        <div id="contentLeft2COLS">
            <div class="innertube">
    		<div class="leftContainer">
    			Some	VERY LONG content here
                   </div>				
            </div>
        </div>
    </div>

  2. #2
    Ciao,

    Siccome assegnando l'immagine di sfondo al body per rappresentare la faux column funziona, ho pensato di inserire un ulteriore div per ognuno dei template (es. mainWrapper2COLS).

    Tale wrapper contiene anche l'header e fungerebbe (almeno questo pensavo) da body. Tuttavia lo sfondo non viene visualizzato affatto.

    Qualche idea?

    Metto il nuovo codice CSS e l'html per l'header:
    codice:
    #header 
    {
    	position:relative; 
    	height: 85px;
    	width: 100%; 
    	color: black; 
    	/*background-color: #ccddff; */
    	min-width:800px;
    	background: #cccddd url(/Portals/1/Images/banner10.jpg) repeat-x top left;
    }
     
     #logo
     {
    height: 85px; 	
    width: 270px; 	
    background:#fffff3 url(/Portals/1/Images/HeaderVEA.gif) no-repeat top left; 	
    
     }
    
    
    /*++++++++++++++++++++++++++++++++++++++*/
    
    <div id="header"> 
       <div id="logo"></div>
       <div id="topElementsWrapper">
             <div id="topLinks">
                 <ul>[*]MyDesk[/list]
            </div>
        </div>
    </div>

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.