dimensione div

**wiulma** · 10-01-2008, 10:49

ciao a tutti!
dopo aver letto un po di post e diversi tentativi ho deciso di chiedere aiuto....
vorrei relizzare una pagina con dei div che simulino delle tabelle.
vorrei che i div fossero alti al 100% indipendentemente dal contenuto.
Ho letto del clearing e applicato alla mia pagina.
ma proprio non riesco vedere la pagina in modo corretto.
inoltre cliccando sui 2 link in alto a sinistra, viene cambiato il div a sinistra, li ho distinti con dei colori diversi.
Se qualcuno riesce ad aiutarmi mi farebbe un grosso favore.
posto il codice.

grazie

<html>
<head>
<title>Main</title>
<meta content="text/html; charset=iso-8859-1" />
<meta content="0" />
<meta content="no-cache" />

<script language="JavaScript">
function visSearchPanel() {
document.getElementById('divSearch').style.display = "inline";
document.getElementById('divList').style.display = "none";
}

function visListPanel() {
document.getElementById('divSearch').style.display = "none";
document.getElementById('divList').style.display = "inline";
}
</script>
<style type="text/css">
/* <![CDATA[ */

html, body {
margin : 0;
padding : 0;
}

/*** FabClearing ***/

.cleared:after {
display : block;
visibility : hidden;
content : ".";
height : 0;
clear : both;
}

.cleared {
clear : both; /* per Gecko */
height : 1%; /* per IE */
}

.mainContainer {
clear : both; /* per Gecko */
height : 100%; /* per IE */
/*position:relative;*/
/*width:100%;*/
/*vertical-align:top;*/
/*height: 100%;*/

}
.mainContainer:after {
display : block;
visibility : hidden;
content : ".";
height : 0;
clear : both;
}

/*** ***/

/* ]]> */
</style>
</head>
<body onload="window.focus();">

<form name="frmMain" method="post" action="">
<input type="hidden" name="macroCategoria" id="macroCategoria" value="2">

<div id="divContainer" class="mainContainer">
<div id="divNav" style="position:relative;float:left;vertical-align:top;text-align:left;width:35%;height:100%;background-color:red;">
<div id="navContainer" style="position:relative;vertical-align:top;text-align:left;width:100%;height:100%;min-height:100%;background-color:green;">
<div id="navTab" style="position:relative;float:left;vertical-align:top;text-align:left;width:100%;height:4%;background-color:red;">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="mapTabSel" id="tdTabRicerca">
<a class="mapTabSel" id="tdTabRicerca" href="javaScript:visSearchPanel();" title="Ricerca Oggetti" title="Ricerca Oggetti">
RICERCA
</a>
</td>
<td class="mapTab" id="tdTabLista">
<a class="mapTab" id="tdTabLista" href="javaScript:visListPanel();" title="Lista oggetti" title="Lista Oggetti Immobili">
LISTA

</a>
</td>
</tr>
</table>
</div>
<div id="divSearch" style="display:inline;position:relative;vertical-align:top;text-align:left;width:100%;height:95%;min-height:95%;background-color:yellow;border:2px solid #8A2BE2;">
search
</div>
<div id="divList" style="display:none;position:relative;vertical-align:top;text-align:left;width:100%;height:95%;min-height:95%;background-color:blue;">
list
</div>
</div>
</div>
<div id="divMap" style="position:relative;float:right;vertical-align:top;text-align:left;width:65%;height:100%;background-color:lime;">
mappa
</div>
</div>
</form>
</body>
</html>

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

Consiglio... Fai una pagina vuota e fai una paio di prove con solo quei due o tre div "incriminati" e il relativo css... poi ne riparliamo...
Hai scritto talmente tanto codice... (e magari usa il pulsantino per postare il codice #)

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

a dire il vero avevo mantenuto lo stile nell'html perchè mi pareva più semplice e immediato da modificare.
cmq va bene, lo modifico con i css.
Però i div sono già ridotti, se ne tolgo ancora non ripresento il problema.
mi diresti come devo allegare il codice che non ho capito ...
grazie

**ricman** · 10-01-2008, 17:09

Intanto il codice è pieno di stili "mimetizzati" che andrebbero estratti e messi nel css.
Poi la semplificazione che dicevo era scrivere una cosa del genere

codice:

CSS
#div_a {qualche proprietà ridotta all'osso solo per capire come funziona}
#div_b {qualche proprietà ridotta all'osso solo per capire come funziona}

HTML
<div id="div_a">testo testo</div>
<div id="div_b">testo testo</div>

Inquesto modo tu impari le cose e noi ti possimao aiutare meglio...

Quel riquadro bianco in cui io ho messo il codice lo ottieni premendo il pulsante cancelletto (#) nella pulsantiera del forum...

**wiulma** · 10-01-2008, 18:19

ho tolto un po di cose che adesso non servono e messo un po di ordine.
spero vada meglio grazie comunque per la disponibilità

codice:

  <html>
  <head>  
	<script language="JavaScript">
	function visSearchPanel() {
	  document.getElementById('divSearch').style.display = "inline";
	  document.getElementById('divList').style.display = "none";
	}
	
	function visListPanel() {
	  document.getElementById('divSearch').style.display = "none";
	  document.getElementById('divList').style.display = "inline";  
	}		
	</script>

<style type="text/css">
/* <![CDATA[ */    
    .mainContainer {clear: both; height: 100%; }
    .mainContainer:after { display: block; visibility:hidden;content: ".";height: 0; clear: both;   }                
    #divNav { position:relative;float:left;vertical-align:top;text-align:left;width:35%;height:100%;background-color:red; }
    #navContainer { position:relative;vertical-align:top;text-align:left;width:100%;height:100%;min-height:100%;background-color:green; }
    #navTab { position:relative;float:left;vertical-align:top;text-align:left;width:100%;height:4%;background-color:red;}
    #divSearch { display:inline;position:relative;vertical-align:top;text-align:left;width:100%;height:95%;min-height:95%;background-color:yellow;border:2px solid  #8A2BE2; }
    #divList { display:none;position:relative;vertical-align:top;text-align:left;width:100%;height:95%;min-height:95%;background-color:blue; }
    #divMap { position:relative;float:right;vertical-align:top;text-align:left;width:65%;height:100%;background-color:lime; }
/* ]]> */
</style>        
  </head>
  <body>     	
	<form name="frmMain" method="post" action="">	   
  
  <div id="divContainer" class="mainContainer">
  	<div id="divNav">
  		  <div id="navContainer">
  		  	   <div id="navTab">
			<table cellpadding="0" cellspacing="0">					
							    <tr> 
								    <td>RICERCA</td>
								    <td>LISTA</td>
							    </tr>
							  </table>  
							</div>  
							<div id="divSearch">search</div>	
							<div id="divList">list</div>							
				</div>			   		  
  	</div>	
  	<div id="divMap">mappa</div>	
  </div>	
</form>	
</body>	
</html>

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

C'è ancora tanto codice inutile (Js, tabelle...) cmq è già più leggibile...
Una cosa non hai detto... come vorresti che, graficamente, venisse fuori questa struttura

**ricman** · 11-01-2008, 10:32

Momentaneamente lo vedo così...

**wiulma** · 11-01-2008, 11:39

bene...
il problema è che vorrei che il div verde scuro, quello giallo e quello verde chiaro avessero altezza 100% (quindi indipendente dal proprio contenuto), in modo da far scomparire il div viola, e di conseguenza , scomparirebbe anche il div verde scuro (perchè avrebbe il div giallo sopra).

ti avevo lasciato tabella e js solo per poter fare lo split tra il div divSearch e quello divList

**ricman** · 11-01-2008, 12:33

Originariamente inviato da wiulma
il problema è che vorrei che il div verde scuro, quello giallo e quello verde chiaro avessero altezza 100% (quindi indipendente dal proprio contenuto), in modo da far scomparire il div viola, e di conseguenza , scomparirebbe anche il div verde scuro (perchè avrebbe il div giallo sopra).

Ma allora devono stare tutti sulla stessa riga? (altrimenti c'è qualcosa che non torna...)

**wiulma** · 11-01-2008, 12:55

ti allego la pagina che vorrei ottenere

poi cliccando sul link in alto cambia il div giallo.
cioè
se clicco ricerca ho il div giallo
se clicco lista ho il div blu al posto di quello giallo

Discussione: dimensione div

Strumenti discussione

Ricerca discussione

Visualizza

dimensione div

Permessi di invio