dimensione div

**ricman** · 11-01-2008, 13:57

Allora hai bisogno solo di tre oggetti (più il "sostituto")...

Ora vado a mangiare

poi ti scrivo le due righe...

**ricman** · 11-01-2008, 16:01

....eccomi.

Prova questo (se non ho capito male):

codice:

CSS
	html, body {width:100%;height:100%;margin:0;padding:0;}
	#sx {float: left; background:yellow;width:30%;height:100%;}
		#search {background:red;width:100%; height:50px;}
	#dx {float: left; background:green;width:70%;height:100%;}



HTML
<div id="sx">
	<div id="search">search</div>
</div>
<div id="dx">colonna di destra</div>

Testato su FF2 e Safari...

**wiulma** · 11-01-2008, 16:07

ok grazie mille
mi pare vada benissimo.
adesso devo includere nei div i vari controlli che avevo.
se dovessi avere altri problemi ti faccio sapere

grazie ancora per la disponibilità

**wiulma** · 15-01-2008, 14:01

riprendo la discussione con un nuovo problema...
sto articolando la mia pagina, però nel momento in cui inserisco un nuovo div all'interno del div a sinistra, il div si comporta in modo diverso rispetto ai precedenti, nel senso che anche se imposto width e height a 100%, con firefox non viene riempita tutta l'area del div padre ma solo quella del div interno.
mi sapreste dire come mai?

codice:

<html>
<head> 
	<style type="text/css">
/* <![CDATA[ */
	html, body {width:100%;height:100%;margin:0;padding:0;}
	#sx {float: left; background:yellow;width:30%;height:100%;}
	#search {background:red;width:100%; height:5%;}
	#lista {background:blue;width:100%; height:95%;}
	#dx {float: left; background:green;width:70%;height:100%;}
	.TabRicerca {display:inline;width:100%;height:100%;background-color: #FFFFB5;}
  .TabLista {display:none;width:100%;height:100%;background-color: #FFE4B5;}
</style> 
</head>
<body>  	
<div id="sx">
	<div id="search">
    search
	</div>
	<div id="lista">
		  <div id="divTabRicerca" class="TabRicerca">
		      ricerca			      
		  </div>		  
		  <div id="divTabLista" class="TabLista">
		      lista
		  </div>		  
	</div>	  
</div>
<div id="dx">colonna di destra</div>
</body>
</html>

grazie

**ricman** · 15-01-2008, 16:00

Premetto che non ho capito cosa vuoi... non usare il display:inline. No ho neanche capito a che ti servono due larghezze del 100% affiancate!! Non è un controsenso?
Detto questo... prova e fai le tue modifiche

codice:

	html, body {width:100%;height:100%;margin:0;padding:0;}
	#sx {float: left; background:yellow;width:30%;height:100%;}
	#search {background:red;width:100%; height:5%;}
	#lista {background:blue;width:100%; height:95%;}
	#dx {float: left; background:green;width:70%;height:100%;}
	.TabRicerca {float:left;width:50%;height:100%;background-color: purple;}
  .TabLista {float:left;width:50%;height:100%;background-color: lime;}


<div id="sx">
	<div id="search">search</div>
	<div id="lista">
		  <div class="TabRicerca">ricerca</div>		  
		  <div class="TabLista">lista</div>		  
	</div>	  
</div>
<div id="dx">colonna di destra</div>

**wiulma** · 15-01-2008, 16:15

per semplificare l'html avevo tolto 1 po troppo...
i display mi servono perchè i 2 div che hai visto con width=100% sono visibili in alternanza.
ho messo 2 link con un piccolo javascript per fare funzionare i div, in modo che si capisca il funzionamento che cerco.
il problema di firefox persiste.

codice:

<html>
<head> 
	<style type="text/css">
/* <![CDATA[ */
	html, body {width:100%;height:100%;margin:0;padding:0;}
	#sx {float: left; background:yellow;width:30%;height:100%;}
	#search {background:red;width:100%; height:5%;}
	#lista {background:blue;width:100%; height:95%;}
	#dx {float: left; background:green;width:70%;height:100%;}
	.TabRicerca {display:inline;width:100%;height:100%;background-color: #FFFFB5;}
  .TabLista {display:none;width:100%;height:100%;background-color: #FFE4B5;}
</style> 
<script>
	function vediRicerca() {
		 document.getElementById('divTabRicerca').style.display = 'inline';
		 document.getElementById('divTabLista').style.display = 'none';
	}
	function vediLista() {
		 document.getElementById('divTabRicerca').style.display = 'none';
		 document.getElementById('divTabLista').style.display = 'inline';
	}	
</script>	
</head>
<body>  	
<div id="sx">
	<div id="search">
		  <table cellpadding="0" cellspacing="0" style="vertical-align:top;text-align:left;">
		    <tr> 
			    <td class="mapTabSel" id="tdTabRicerca">
			      <a class="mapTabSel" id="aTabRicerca" href="javascript:vediRicerca();" title="Ricerca Oggetti" title="Ricerca Oggetti">
			      	RICERCA
			      </a>
			    </td>
			    <td class="mapTab" id="tdTabLista">
			      <a class="mapTab" id="aTabLista" href="javascript:vediLista();" title="Lista oggetti" title="Lista Oggetti Immobili">
			      	LISTA
			      </a>
			    </td>
		    </tr>
		  </table> 
	</div>
	<div id="lista">
		  <div id="divTabRicerca" class="TabRicerca">
		      ricerca			      
		  </div>		  
		  <div id="divTabLista" class="TabLista">
		      lista
		  </div>		  
	</div>	  
</div>
<div id="dx">colonna di destra</div>
</body>
</html>

grazie.
ciao

**ricman** · 16-01-2008, 10:03

1) hai rimesso le tabelle
2) non funziona nulla... mi è anche toccato aprire IE7 (che era lì buono buono chiuso da mesi

) ma anche con questo non va... quindi non si capisce il funzionamento.

**ricman** · 16-01-2008, 10:13

Guarda un po'... se non ti va neanche questo chiudiamo...

codice:

<html>
<head> 
	<style type="text/css">
	html, body {width:100%;height:100%;margin:0;padding:0;}
	#sx {float: left; background:yellow;width:30%;height:100%;}
	#search {background:red;width:100%; height:5%;}
	#lista {background:blue;width:100%; height:95%;}
	#dx {float: left; background:green;width:70%;height:100%;}
	.TabRicerca {display:block;width:100%;height:100%;background-color: #FFFFB5;}
	.TabLista {display:none;width:100%;height:100%;background-color: #FFE4B5;}
	</style> 
	<script language="javascript">
		function vediRicerca() {
			 document.getElementById('divTabRicerca').style.display = 'block';
			 document.getElementById('divTabLista').style.display = 'none';
		}
		function vediLista() {
			 document.getElementById('divTabRicerca').style.display = 'none';
			 document.getElementById('divTabLista').style.display = 'block';
		}	
	</script>	
</head>
<body>  	
<div id="sx">
	<div id="search">
		  <table cellpadding="0" cellspacing="0" style="vertical-align:top;text-align:left;">
		    <tr> 
			    <td class="mapTabSel" id="tdTabRicerca">
			      <a class="mapTabSel" id="aTabRicerca" href="javascript:vediRicerca();" title="Ricerca Oggetti" title="Ricerca Oggetti">
			      	  RICERCA  
			      </a>
			    </td>
			    <td class="mapTab" id="tdTabLista">
			      <a class="mapTab" id="aTabLista" href="javascript:vediLista();" title="Lista oggetti" title="Lista Oggetti Immobili">
			      	  LISTA  
			      </a>
			    </td>
		    </tr>
		  </table> 
	</div>
	<div id="lista">
		  <div id="divTabRicerca" class="TabRicerca">
		      ricerca			      
		  </div>		  
		  <div id="divTabLista" class="TabLista">
		      lista
		  </div>		  
	</div>	  
</div>
<div id="dx">colonna di destra</div>
</body>
</html>

...se levi le tabelle fai un vel lavoro...

**ricman** · 16-01-2008, 10:15

Prima non funzionava perchè il forum cambia le parole tipo javascript (che da tutta una parola lo sostituisce mettendoci un trattino: java-script)

**wiulma** · 16-01-2008, 10:22

direi che adesso funziona tutto correttamente.
in pratica sbagliavo la proprietà display, utilizzavo inline invece di block.
mi dispiace se la pagina non ti funzionava, mi sono accorto che nel codice che ho postato nei pulsanti c'è scritto "java-script" anche se non ho idea di come possa essere successo con un copia incolla, visto la mia pagina origina non aveva questo problema.
comunque grazie ancora e scusa per l'inconveniente.

ciao

Discussione: dimensione div

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio