Originariamente inviata da
KillerWorm
[MOD]
Consiglio di evitare di lasciare dati privati (indirizzi email, numeri telefonici, ecc.) nel codice che posti sul forum. Per ora ho rimosso io, fai attenzione in futuro, grazie.
[/MOD]
Certamente
Benissimo
Beh, hai già un contenitore principale che è il
body. Chiaramente, se vuoi che il sito/pagina sia responsive, tutto il layout e i contenuti devono essere predisposti per adattarsi alla viewport (l'area visibile del dispositivo in cui è mostrata la pagina).
Non ci sono regole fisse per la disposizione degli elementi (a parte le regole standard per avere un codice valido), ma devi valutare tu come sia meglio impostare il tutto per ottenere ciò che ti serve.
Ora, il problema qui è il fattore responsive. Bisogna quindi capire come i vari elementi devono comportarsi con le "possibili" dimensioni del viewport in cui presumibilmente sarà visto il sito.
Alcuni elementi possono essere impostati per adattarsi alle dimensioni dello spazio disponibile senza che questi sbordino oltre, cioè allungandosi e restringendosi in modo "elastico"; che, mi pare di capire, è ciò che stai cercando di ottenere finora.
Bisogna però capire anche fino a che punto questi elementi possono mantenere la loro posizione pur restando elastici. E' possibile infatti che i contenuti stessi non riescano più a stare dentro il proprio contenitore quando ad esempio la viewport risulta ridotta oltre la loro reale dimensione e capacità.
In questo caso bisogna studiare come i vari elementi del layout possono disporsi all'interno della pagina stessa in modo da mantenere focalizzati quelli con maggiore priorità. Per una viewport ristretta, potresti voler decidere di eliminare alcuni elementi (ad esempio, elementi di decorazione), piuttosto che renderli graficamente più piccoli (ad esempio l'intestazione o il logo), o ancora impostarli in modo che restino nascosti ma espandibili al click/touch (come avviene per i classici "hamburger menu") e via dicendo, in modo da garantire comunque una facile fruibilità della stessa pagina sulle varie dimensioni dei diversi dispositivi.
Per fare questo, oltre a mantenere una certa elasticità degli elementi, è utile impostare opportunamente dei "breakpoint CSS".
Mi fermo però qui perché il discorso del "responsive" non è così semplice e già siamo offtopic rispetto all'oggetto della discussione.
Ora, se il tuo intento è solo quello di adeguare i contenitori alle dimensioni della pagina per evitare che si crei uno scroll, mi pare di capire che gli elementi da impostare siano principalmente
.menusx e
.desktop, per cui puoi fare queste modifiche (come già ti ho indicato sopra):
codice:
.menusx {
position: absolute;
top: 385px;
left: 13px;
bottom: 0; /* Estende l'elemento al limite basso del genitore */
background-color:#fff;
width: 190px;
/* height: 600px; - DA RIMUOVERE - */
border: 2px solid #7e9faa;
}
.desktop {
position: absolute;
top: 385px;
left: 213px;
bottom: 0; /* Estende l'elemento al limite basso del genitore */
right: 0; /* Estende l'elemento al limite destro del genitore */
background-color:#fff;
/* width: 1055px; - DA RIMUOVERE - */
/* height: 600px; - DA RIMUOVERE - */
border: 2px solid #7e9faa;
}
Rispondi quotando
può essere una valida soluzione in casi del genere
