dimensioni contenuto pagina

[Punix]

Salve gente, sto ultimando il mio sito, solo che a livello di grafica e css sono un pasticcione

vorrei che l utente veda una pagina ordinata, non una schifezza.. mi piacerebbe adattare il contenuto della pagina alla risoluzione dello schermo, anche per gli schermi piu piccoli dei palmari cellulari etc..

attualmente la pagina è strutturata cosi:

è composta da 2 div principali a cui ho assegnato la classe "tutto" al primo div e "tutto2" al secondo div

- dentro il primo div ho tanti altri div , dove al loro interno ho inserito bottoni, campi di ricerca, una grande insegna centrale per il sito etc..

- dentro al secondo div invece ho inserito una grande tabella a cui ho assegnato a classe "mytable"


il problema sta nel secondo div, la tabella al suo interno è cosi grande che fuori esce dal div e mi allarga la pagina in maniera eccessiva.. mentre io vorrei che i 2 div principali avessero la stessa larghezza, in modo da essere allineati per vedere una cosa ordinata

facendo un disegnino, questa è la situazione attuale:



ho provato a ridurre le dimensioni della tabella ma non ne voleva sapere di ridimensionarsi...

sono riuscito così:

.mytable {
    word-wrap: break-word; 
    word-break: break-all;
}

con questo risultato:



solo che non mi piace perchè la tabella non si è "ridimensionata" ma si è "schiacciata"... schiacciandosi per adattarsi al div, vedete che ho delle scritte che vanno sempre a capo per adattarsi alle celle, celle che rimangono piu grandi e altre piu piccole...insomma graficamente non mi sembra bello e i nomi delle colonne sono cosi illeggibili... come posso "rimpicciolire" sta tabella senza schiacciarla?

inoltre secondo voi è meglio mettere tutto in un unico div invece che avere 2 div che io ho chiamato tutto e tutto2?

come posso adattare le dimensioni del contenuto della mia pagina alla risoluzione dello schermo da dove la visualizzo? compresi schermi di dispositivi piu piccoli come cellulari etc..


codice:

<div class='tutto'>
// contenuto della parte superiori del sito
</div>

<div class='tutto2'>
<table class='mytable'>

<thead>
<th></th>
<th></th>
</thead>

<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>

</table>
</div>

CSS:

div.tutto {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 1340px;
    height: 362px;
    
}
div.tutto2 {
    position: absolute;
    top: 370px;
    left: 1px;
    width: 1340px;
    
}
.mytable {
    word-wrap: break-word; 
    word-break: break-all;
}

table {
  border-collapse: collapse;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
  overflow: hidden;
}
table td, table th {
    border: 1px solid white;
}
table td:hover{
    background-color: red;
}
table tr:first-child th {
    border-top: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}
th, td {
  padding: 1em;
  background: #ddd;
}

[KillerWorm]

vorrei che i 2 div principali avessero la stessa larghezza
[...]
non mi piace perchè la tabella non si è "ridimensionata" ma si è "schiacciata"
[...]
come posso "rimpicciolire" sta tabella senza schiacciarla?

Ciao, senza offesa ma la tua richiesta mi pare della serie "botte piena e moglie ubriaca".

come posso adattare le dimensioni del contenuto della mia pagina alla risoluzione dello schermo da dove la visualizzo? compresi schermi di dispositivi piu piccoli come cellulari etc..

In linea di massima si dovrebbe parlare di design responsivo, ma chiaramente c'è un intero mondo dietro, che di certo non può essere affrontato per intero in una discussione sul forum.

Così, a spanne, ti direi che dovresti fissare dei breakpoint CSS, a quel punto dovrai stabilire (secondo ciò che pensi sia meglio) come vuoi che sia impaginata tale tabella per ognuno dei breakpoint prefissati.

Ci sono svariate tecniche per impaginare al meglio le tabelle in un layout responsive, dall'uso di una semplice barra di scorrimento orizzontale al frammentare la tabella stessa o ridisporre celle e colonne in modo verticale.

Posso consigliarti di fare qualche ricerca del tipo "responsive table", giusto per farti qualche idea sulle possibili soluzioni che puoi adoperare. In qualunque caso dovrai decidere tu, in base ai tuoi criteri di valutazione, cosa sia meglio fare.

Altri possibili piccoli accorgimenti che puoi adoperare per ottimizzare gli spazi:

- Per stabilire tu la larghezza della tabella e dei suoi elementi puoi usare table-layout:fixed

- Per dimensioni ridotte del viewport (attraverso l'impostazione dei breakpoint) puoi ridurre, se non azzerare, il padding laterale delle celle ed eventualmente anche ridurre la dimensione del carattere e rimuovere il grassetto

- Potresti usare un carattere sans-serif così che resti comunque più leggibile (rispetto ad un serif) anche per dimensioni ridotte

- Potresti accorciare/abbreviare il più possibile i testi delle intestazioni di colonna in modo da non dover spezzare le parole con word-break; e magari inserire, nell'attributo title dei <th>, il testo esteso in modo che appaia nel tooltip quando ci si posiziona sopra. Ovviamente questo vale giusto per le intestazioni

- Le colonne con intestazioni simili potresti raggrupparle sotto delle intestazioni principali più generiche, così da avere delle intestazioni e sotto-intestazioni; in questo modo nelle intestazioni principali inserisci il testo con i termini condivisi andando quindi a ridurre (per quantità di termini) il testo delle sotto-intesatazioni

inoltre secondo voi è meglio mettere tutto in un unico div invece che avere 2 div che io ho chiamato tutto e tutto2?

Penso non ci sia un "meglio" o un "peggio", si tratta piuttosto di capire come vuoi che si comporti il layout per i vari breakpoint e a quel punto arriverai a capire da solo se può essere più utile usare 2 div al posto di 1 o viceversa.

Soltanto, nella sviluppo di codice è sempre una good practice usare dei nomi autoesplicativi; nomi come tutto, tutto2, mytable, a lungo andare, quando ti troverai a dover rimettere mano ai vecchi elaborati, ti daranno sicuramente dei grandi mal di pancia.