min-width per risoluzione target di 1024x768

[Luca_pluatrco]

Ciao,

mi è stato chiesto di considerare come target la risoluzione 1024x768 e impostare una min-width di conseguenza. Si vuole quindi che il layout non si restringa (template con 2 e 3 colonne sono usati) al di sotto di questa risoluzione.

Attualmente per il contenitore principale dei contenuti del sito uso una min-width: 980px (che con risoluzione 1024x768) non richiede scroll bar orizzontale. La richiesta sorge dal fatto che userò della table all'interno di container div che si espandono dinamicamente in base alla larghezza della table.

Ho iniziato quindi ad aumentare la min-width fino a che, a schermo pieno, non appariva la scroll bar orizzontale ovvero min.width: 1000px.

Tale procedimento è corretto? O sapreste suggerine uno migliore?
Grazie

[ashtur1]

Se te alla table glidai width:100% non supera la larghezza del div container. Quindi non dovresti aver bisogno di impostare la min-width...sempre che abbia cpaito bene il tuo problema

[Luca_pluatrco]

Ciao ashtur1,

purtroppo il problema è piuttosto complesso: ho un layout liquido a 3 colonne (col sx fissa e le altre due in %).
I miei box contenitori hanno anch'essi una larghezza in % (width:100%) in modo che si adattino completamente alla colonna nella quale sono posizionati.
All'interno di tali box posso avere delle table (anch'esse con width:100%).

Essendo il layout in % se restringo la pagina le colonne si adattaranno di conseguenza, restringendosi a loro volta e fin qui tutto bene.

Il problema sorge quando la tabella contenuta è molto larga (perché ha molte colonne e/o perché il testo delle celle è lungo e senza spazi). In questo caso, restringendo la pagina tutto si restringe: colonne del layout, contenitori e tabella.
Tuttavia la tabella non puo' restringersi oltre una certa larghezza data dal contenuto delle sue colonne più lunghe e quindi si blocca, non restringendosi oltre, mentre il suo contenitore continua a restringersi e in questo modo la tabella fuorisesce da quest'ultimo.

Da specifiche il layout non puo' essere fisso, ma liquido e i contenuti non sono MAI noti a priori, quindi tali regole CSS devono essere il più possibile generiche e, ovviamente , funzionanti.

Spero di aver chiarito un po' meglio il contesto. Sapresti darmi un'indicazione? Sarebbe stupendo poter bloccare la riduzione del contenitore (e della colonna) quando la tabella contenuta non puo' ridursi ulteriormente, ma non so se è possibile con il solo CSS

/*------------------   CODE FOR TABLES     --------------------*/
.List     /*Classe applicata al tag <table>*/
{ 
	border-collapse:collapse; 
	width: 100%;
}

List th
{
	width: auto;       
	white-space: nowrap;	
}

.List tr { width:99%; }  

.List td
{
	vertical-align:top;
	padding: 5px;			
}

/*------------------   CODE FOR CONTAINER     --------------------*/

.BoxWrapper       /*Div esterno*/
{
	width:100%;   			
	margin:0 0 5px 0;
	padding:0;
	min-height:0;	/*Needed to clear FLOAT in IE*/	
}

.tableContainer      /*Div interno contenente la table*/
{	
	width:93%;  /*Not 100% to consider margin and padding*/
	margin:0;
	padding:0 9px 5px 9px;	
	min-height: 0;
}

#COLScontainer     /*Div contenente le colonne del layout*/
{
	position: relative; 
	min-width:980px; 	
}

#LeftCOLS
{ 
	position: absolute; 
	top: 0; 
	left: 0; 	
	width:270px; 
	margin-left:5px;
	margin-right:5px;
}
 
 
#RightCOLS
{ 	
	position: absolute; 
	left: auto; 
	right: 0; 
	margin-right:5px;
	width: 270px; 
}


#MiddleCOLS
{ 
	position:absolute; 
	top:0; 
	bottom:0; 
	margin-left:5px;
	margin-right:5px;		
	left:275px; 
	right:31%; 	
}

<div id="COLScontainer">
   <div id="LeftCOLS">
       ...
   </div>

   <div id="MiddleCOLS">
       <div class="BoxWrapper">
            <div class="tableContainer">
                  <table class="List">
                         <tr>
                             <td> ...</td>
                             <td> ...  </td>
                         </tr>
                         <tr>
                             <td> ...</td>
                             <td> ...  </td>
                         </tr>
                  </table>
             </div>
       </div>
    </div>

    <div>
    </div>
</div>

[ashtur1]

hai provato a mettere un div nel contenitore con larghezza ad esempio 80%
e margin: 0 10%;


in questomodo il div centrale ti sta sempre centrato nel contenitore.
la tabella al 100% ti occupa tutta la larghezza del div centrale.

non ho avuto tempo diprovare il tuo codice, ma a occhio io la farei cosi...

[Luca_pluatrco]

Cioè tu suggerisci di aggiungere un div (width:80%, margin:0 10%) che contenga quello <div id="MiddleCOLS"> ?

Potresti spiegarlo usando i nomi delle classi cosi' è un pò è chiaro

Comunque non so se risolverebbe il problema, perché pensandoci anche con un ulteriore div in % la larghezza del contenitore della tabella andrà sempre a ridursi ridimensionando la pagina, in quando non vi è un limite.

Io vorrei che il contenitore della tabella sia il 100% dello spazio disponibile, cresca al crescere della tabella e non possa ridursi oltre la dimensione minima (implicita) della tabella.

Ma inizio a pensare che nel mio contesto (non potendo usare valori fissi e script) sia volere la luna