[CSS] Layout a dimensione fissa-variabile

**jakfir** · 25-01-2010, 13:28

aiuto, avrei bisogno di un aiutino nel realizzare l'interfaccia di un sito con un layout fluido come indicato nello schema, i riquadri sono iframe e la dimensione deve essere fissa dove non è tratteggiato e della dimensione massima consentita dalla pagina, in modo da non avere scrollbar dove è tratteggiato (chiaramente con un min height da settare)

io ho provato a lungo ( partendo dai tutorial sul layout ) ma ho fatto solo casino... HELP...

cioè footer e header sono a posto
altezza fissa larghezza 100%
però menu deve avere altezza = altezza max - (altezza header + altezza footer) e larghezza fissa mentre content deve avere la stessa altezza di menu e come larghezza = (larghezza max - larghezza menu)... tutto li è questo che non so come fare...

grazie a tutti in anticipo

**jakfir** · 01-02-2010, 18:14

beh per ora sono arrivato con un pò d'auito qui:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>
/* malaroba */
	html,body
	{
		margin:0;
		padding: 0;
		height: 100%
	}
	div#page
	{
		position: relative; 
		height:100%
	}
	body>div#page
	{
		height: auto;
		min-height: 100%
	}
	div#content
	{
		padding: 0 1.5em 1.5em
	}
	div#footer
	{
		position:absolute;
		bottom: 0;width: 100%
	} /* malaroba */
       
        div {
          overflow:hidden;
          border:1px solid #333333;
          margin:0;
          padding:0;
        }
        iframe{
           border:0;
        }
</style>

</head>

<body>

	
	
	<div id= "page" style="width:100%;margin: 0px auto;border:0">
		   
		
			<div style="clear:both;">
			<iframe style="width:100%;min-height:150px"></iframe>
		</div>
		   
		
		<div id="content" style="clear:both;margin-top:4px;border:0;padding:0;overflow:hidden">
		   
			
			<div style="float:left;margin-right:5px;">

					<iframe style="width:200px;min-height:250px" ></iframe>

			</div>
		   
			<div style="width:auto;">
					<iframe style="width:100%;min-height:250px" ></iframe>
		   </div>
		   
		</div>
	   
		
		<div style="clear:both;border:0"></div>
	   
		
		<div id="footer" style="clear:both;margin-top:4px">
			<iframe style="width:100%;height:20px" ></iframe>
		</div>

	</div>


</body>
</html>

ma non riesco ad andare avanti qualcuno sa dove sbaglio?

Discussione: [CSS] Layout a dimensione fissa-variabile

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] Layout a dimensione fissa-variabile

Permessi di invio