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

    Layout ridimensionabile con div

    Ciao ragazzi!

    Vorrei realizzare un layout come quello dell'immagine allegata usando i div.

    La parte bianca centrale dovrebbe avere un'altezza minima fissa, che dovrà aumentare se il contenuto non ci sta.
    Insieme a quella centrale dovranno aumentare anche quelle dei div laterali...

    Ecco il mio codice:
    codice:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    	<title></title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<style type="text/css">
    		body {	
    			margin:0px;
    			background:#F4F4EC;
    			text-align:center;
    		}
    		#top {
    			margin:auto;
    			width:760px;
    			background:#FFFFAA;
    		}
    		#middle {
    			position:relative;
    			margin:auto;
    			width:760px;
    			background:#FFFFFF;
    		}
    		#middle_sx {
    			position:absolute;
    			top:0px;
    			left:0px;
    			width:5px;
    			height:100%;
    			background:#CCeeFF;
    		}
    		#middle_dx {
    			position:absolute;
    			width:5px;
    			top:0px;
    			left:755px;
    			height:100%;
    			background:#ffbbaa;
    		}
    		#middle_cx {
    			position:relative;
    			top:0px;
    			left:1px;
    			width:752px;
    			height:50px;
    			text-align:center;
    		}
    		#bottom {
    			margin:auto;
    			width:760px;
    			background:#cccccc;
    		}
    	</style>
    </head>
    <body>
    
    <div id="top">
    sopra
    </div>
    
    <div id="middle">
    
    	<div id="middle_sx"></div>
    
    	<div id="middle_dx"></div>
    	dfgsdf
    gfodf
    hgiu
    
    fgdf
    </div>
    
    <div id="bottom">
    sotto
    </div>
    
    </body>
    </html>
    La difficoltà principale è farlo funzionare sia con Firefox che con ie...

    Grazie

  2. #2
    Utente di HTML.it L'avatar di antos
    Registrato dal
    Feb 2001
    Messaggi
    3,581

    Re: Layout ridimensionabile con div

    Originariamente inviato da daviweb
    Ciao ragazzi!

    Vorrei realizzare un layout come quello dell'immagine allegata usando i div.

    La parte bianca centrale dovrebbe avere un'altezza minima fissa, che dovrà aumentare se il contenuto non ci sta.
    Insieme a quella centrale dovranno aumentare anche quelle dei div laterali...
    ...
    La difficoltà principale è farlo funzionare sia con Firefox che con ie...

    Grazie
    allora per impostare la grandezza minima devi ricorrere a questa formula perchè ie non supporta il min-height (ma height in ie si comporta esattamente come min-height)quindi:
    codice:
    #elemento{
    min-height:xxpx; 
    height:auto !important;
    height:xxpx; /*x IE*/
    }
    pe il secondo problema, ovvero avere le colonne della stessa altezza del corpi centrale c'è un problema, dovresti con i css emulare la tabella ma ancora una volta IE da problemi e quindi puoi avere l'illusione che l'altezza sia la stessa e operi in questo modo:
    middel_cx deve essere + alto delle 2 colonne e deve avere un suo colore di sfondo o margini dx e sx
    middle deve avere il colore di sfondo delle colonne
    fine

  3. #3
    Grazie mille antos!

    Per l'altezza minima ok. Per le barre laterali pensavo di fare così:

    codice:
    #middle {
    	margin:auto;
    	width:760px;
    	background:#FFFFFF;
    	min-height:200px; 
    	height:auto !important;
    	height:200px; /*x IE*/
    }
    #middle_tbl {
    	height:100%;
    }
    
    
    <div id="middle">
    	<table id="middle_tbl">
    		<tr>
    			<td id="middle_sx"></td>
    			<td id="middle_cx">dfgsdf
    gfodf
    hgiu
    
    dsfsdfdfgsdf
    gfodf
    hgiu
    
    dsfsdfdfgsdf
    gfodf
    hgiu
    
    dsfsdf</td>
    			<td id="middle_dx"></td>
    		</tr>
    	</table>
    </div>
    con IE ok, con Firefox invece mi prende l'altezza 100% dello schermo... come faccio a dirgli di fare riferimento al div che la contiene?

  4. #4
    codice:
    #middle {
    	margin:auto;
    	width:760px;
    	background:#FFFFFF;
    	/*min-height:200px; 
    	height:auto !important;
    	height:200px; /*x IE*/
    }
    
    #middle_tbl {
    	height:200px;
    }
    
    
    <div id="middle">
    	<table id="middle_tbl">
    		<tr>
    			<td id="middle_sx"></td>
    			<td id="middle_cx">
    gfodf
    hgiu
    
    dsfsdfdfgsdf
    gfodf
    hgiu
    
    dsfsdf</td>
    			<td id="middle_dx"></td>
    		</tr>
    	</table>
    </div>
    Trovato! Impostando l'altezza minima direttamente alla tabella ottengo proprio quello che volevo!!

    E' cmq tutto corretto secondo il w3c?

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.