Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    68

    Aggiustare dimensionamento di 2 div float e relativo contenuto per layout responsive

    Ciao a tutti,
    su un sito ho una pagina con 2 div con il float left, 1l primo impostato al 70%, il secondo a 30%.
    Quando guardo la pagina sul browser a tutto schermo, tutto è posizionato in modo esatto, ma come inizio a stringere il browser il div più a destra passa immediatamente sotto al div di sinistra.
    Il problema è che se continuo a stringere la finestra, il div di sinistra (quello impostato al 70% si ridimensiona scalando il testo verso il basso) mentre quello al 30% no.
    Per fare in modo che i 2 div si restringano contemporaneamente in modo tale che quello di destra passi sotto soltanto quando arriva a una dimensione minima impostata cosa devo fare?
    Ho provato con in vari width-max e width-min ma niente.

    Grazie
    Federico

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao, le indicazioni che dai non sono sufficienti a poterti fornire delle soluzioni mirate; è difficile aiutarti senza conoscere il contesto o vedere un minimo di codice. Dovresti fornire maggiori dettagli ed eventualmente, se hai una pagina pubblica online, posta il link.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    68
    Ciao KillerWorm, ecco l'indirizzo per vedere il problema. https://goo.gl/UrB4Qb
    In pratica sul pc desktop, l'mpaginazione sarebbe giusta, (a parte qualche aggiustamento) ma se provi a stringere il browser, la parte sinistra scala verso il basso il testo, mentre la parte destra (news) quasi subito passa sotto al contenuto di sinistra senza pero scalare come qualla di sinistra.
    Poi se continui a restringere il browser quando il contenuto è tutto su una colonna, inizia a scalare anche quella sotto (News).
    Come si deve fare perchè scalino il testo contemporaneamente i 2 div mentre sono affiancati fino alla media query successiva?

    Grazie
    Federico

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao Federico, ho solo dato uno sguardo al codice della pagina, la questione mi pare un po' complicata per come hai impostato il CSS e i vari breakpoint. Per il momento ti segnalo giusto qualcosa.

    Intanto c'è qualche errore di validazione che potrebbe (ma non è detto) generare anche problemi di impaginazione; ad ogni modo è sempre meglio avere un codice validato.
    Puoi verificare tu stesso anche con un validatore online (vedi questo) ed eventualmente provvedere a correggere gli errori segnalati prima di procedere con la sistemazione del layout.

    Poi, provando a ridurre la larghezza della pagina, noto che i due div si ridispongono in modo inconsistente per i diversi breakpoint. In particolare il secondo div si porta da destra a sotto in vari punti del ridimensionamento ma in modo "disordinato". Non capisco cosa intendi quando dici "scalare il testo verso il basso", ad ogni modo non penso che questo problema dipenda dal testo, ma piuttosto dalla larghezza che definisci per i due div e da altre regole che possono influire sul reale ingombro di questi perché non vengono considerate all'interno del valore che stai impostando, ad esempio i margini i bordi i padding.

    Per questo problema ti consiglierei di applicare sui due div (e in generale su tutti quegli elementi per cui devi poter impostare una dimensione) la proprietà box-sizing:border-box. Ovviamente questo da solo non risolve il problema ma è utile in casi del genere per poter definire in modo più preciso il calcolo degli ingombri degli elementi in questione.

    Fai inoltre attenzione all'uso dei margini che potrebbero sfalsare gli ingombri e sfasciare quindi l'impaginazione. Se hai definito i due div in modo che uno sia al 70% e uno al 30% della larghezza del contenitore, impostare dei margini a questi provoca chiaramente un aumento dell'ingombro totale, per cui il div più a destra sarà forzato a portarsi sotto per non eccedere dal contenitore.
    Questo succede nella tua pagina dove per la media query min-width:1281px al div di sinistra hai impostato margin-right:10px;

    Inoltre c'è qualcosa di farraginoso nella definizione delle varie media query.
    Queste sono quelle che hai definito su quella pagina:
    codice:
    @media only screen and (min-width: 321px) and (max-width: 480px)
    @media only screen and (min-width: 481px) and (max-width: 800px)
    @media only screen and (min-width: 641px)
    @media only screen and (min-width: 801px) and (max-width: 1280px)
    @media only screen and (min-width: 1281px)
    Mi pare di capire (vedendo che di default hai impostato width:100% per i due div) che l'impostazione da te usata sia mobile first.

    Però, prima cosa, mi chiedo (e ti chiedo): è davvero necessario definire tutti questi breakpoint dal momento che ti serve solo ottenere 2 disposizioni (così ho capito), una con i div affiancati e una con i div incolonnati?

    Seconda cosa, non capisco quel min-width:641px che sta lì da solo mentre per gli altri breakpoint hai definito le coppie min e max. Non che non si possa fare ma impostare dei breakpoint con dei range limitati da min e max, porta a dover ridefinire tutte le regole per ognuno dei vari scaglioni creando, tra le altre cose, del codice ridondante. Personalmente opterei invece per uno schema a cascata, considerando quindi solo il min-width o solo il max-width, così da evitare di duplicare quelle regole che serve mantenere attive tra breakpoint successivi; ovviamente si tratterà solo di sovrascriverle là dove serve.

    Forse se chiarisci il primo punto si potrebbe pensare di semplificare il tutto così da ottenere anche una impostazione più chiara delle regole che influiscono sul ridimensionamento del contenuto.

    Ovviamente sono solo dei consigli, poi vedi tu.


    [Mod]
    2 div float left
    Fai attenzione, quando si aprono delle discussioni sul forum è necessario usare dei titoli esplicativi; quello che hai usato qui non lo è. Non ti ho ripreso subito perché non mi era chiaro quale fosse esattamente il nocciolo del problema; per cui, per il momento correggo io ma fai più attenzione in futuro. Grazie.
    [/Mod]
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    68
    Ciao KillerWorm,
    scusa se non ho più risposto, ho avuto problemi.
    Allora per quanto riguarda i breakpoint, ne ho eliminati alcuni, quello che mi dicevi tu (Seconda cosa, non capisco quel min-width:641px che sta lì da solo mentre per gli altri breakpoint hai definito le coppie min e max), questo mi serviva solo ed esclusivamente per visualizzare il menu del aito correttamente in alcuni device e basta. Infatti ora l'ho tolto.
    Ho anche risolto il problema del quale chiedevo aiuto. Ora devo solo aggiustare alcune cose, eliminare doppioni e poi comprimerlo. Sul sito mi rimane da sistemare ancora qualche pagina. Questo è il link se vuoi dare uno sguardo
    https://goo.gl/txkNmc
    Ti ringrazio comunque per la disponibilità
    Federico

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao Federico, bene, mi fa piacere che tu sia riuscito a risolvere
    Buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.