Sovrapposizione e mobilità indesiderata di alcuni elementi

di il
9 risposte

Sovrapposizione e mobilità indesiderata di alcuni elementi

Salve a tutti, è da solo qualche settimana che sto cercando, per motivi di studio, di scrivere in html e css. Dopo un po' di tempo sono riuscito a creare un sito abbastanza soddisfacente, ma il punto è che, andando a aumentare o diminuire la risoluzione, alcuni elementi (per fortuna non tutti) cambiano posizione, un paio si ingrandiscono singolarmente e un altro pario si accavallano. Ho tentato, di aggiungere display:block, ma non ho ottenuto alcun risultato Così, d'impulso, sulla base della vostra esperienza, sapreste dirmi a cosa potrebbe essere dovuto questo problema? Vi posto i codici in .css di un elemento che fa questo difetto e di tutte le sue classi genitoriali.
 
 .contenitore {
    display:block;
    width:100%;
}   * {
    position:relative;
}
body { font-family: sans-serif; 
    color:rgba(150, 224, 164, 0.64);
    margin:0;
    color:black;
    display:block;
    width:100%;
}
#modulo {
    border-top: solid 4 px black; 
    padding: 15 px; background-color: #FFF;
    overflow: auto;
    margin-left: 50px;
    margin-bottom: 70px;
    width: 90%;
    display:block;
}
#modulo fieldset {
    background-color:rgba(34, 139, 34, 0.78);
    color:white;
    padding 10px;
    padding-top 5px;
}
#modulo .anagrafe {
    padding: 10 0;
    height: 180px;
    margin-bottom:10px;
}
#modulo .anagrafe .campo {
    width: 35%;
    margin-top:5px;
    background-color: rgba(34, 139, 34, 0.78);
    margin-right: 10px;
    float:right;
    left:31%;
    top: -90px;
    display:block;
}

9 Risposte

  • Re: Sovrapposizione e mobilità indesiderata di alcuni elementi

    Ti serve usare un "LayoutManager" che si occupa di posizionare i componenti in base alla risoluzione ed alla forma della pagina.

    Spannometricamente hai 3 tipi di dispositivi: monitor, tablet, telefoni con layout orizzontale e verticale

    In pratica, puoi risolvere il tutto nel seguente modo: considerare

    1) le piu' disparate risoluzioni
    2) i piu' disparati aspect ratio
  • Re: Sovrapposizione e mobilità indesiderata di alcuni elementi

    Bootstrap può essere considerato un "Layout manager"?
  • Re: Sovrapposizione e mobilità indesiderata di alcuni elementi

    Ciao, è tutto più semplice di quello che ha detto @migliorabile, che, sarà bravo in determinati ambiti di programmazione, ma non dovrebbe dare consigli sbagliati in ambiti dove non ha la conoscenza approfondita.
    non neanche la prima volta che lo dico

    parlando di cose serie, @ytreka ti si sovrappone semplicemente perchè tu hai inserito nel css il width con la percentuale.
    se lo fai per una questione di fluid/responsive, devi dare un container fisso, così da poter usare le percentuali.
  • Re: Sovrapposizione e mobilità indesiderata di alcuni elementi

    Quindi ho due soluzioni? Cioè :
    racchiudere tutto in un <div class="container> oppure modificare tutti i width da percentuale a px?
  • Re: Sovrapposizione e mobilità indesiderata di alcuni elementi

    ytreka ha scritto:


    Quindi ho due soluzioni? Cioè :
    racchiudere tutto in un <div class="container> oppure modificare tutti i width da percentuale a px?
    se lo vuoi fluido / responsive ti consiglio di fare un container, e poi a seconda della risoluzione (attenzione che non è fare zoom, ma usando Chrome DevTools pigiando il tasto F12 -> device toolbar puoi vedere le risoluzioni dei vari cellulari, tablet e portatili.) usi le media queries per fixare le inesattezze.
  • Re: Sovrapposizione e mobilità indesiderata di alcuni elementi

    Perfetto... Il problema è stato risolto... Grazie mille davvero.
  • Re: Sovrapposizione e mobilità indesiderata di alcuni elementi

    Figurati, sono sempre qui se hai bisogno
  • Re: Sovrapposizione e mobilità indesiderata di alcuni elementi

    Mi sapresti spiegare la proprietà css overflow? È una delle poche che non ho ancora capito.
  • Re: Sovrapposizione e mobilità indesiderata di alcuni elementi

    Io te la spiego, ma ci sono tante guide in internet e anche molto esaustive, non prendere questo forum come scappatoia per trovare la pappa pronta eh, mi raccomando

    Comunque, la proprietà overflow si può usare così:

    passo all'esempio pratico così lo capisci subito.

    Pensa di avere un div contenente altri due div:
    • div contenitore con il background color rosso
    • i due div figli in float
    Come ben sai mettendo in float due div togli dal normale ciclo del DOM i due div flottati, quindi non vedresti lo sfondo del div rosso, visto che per lui dentro non c'è nessun div.
    mettendo la proprietà:
    Overflow: hidden
    Permetti al div contenitore di "vedere" tutti i div che ha all'interno, anche se sono con una proprietà che gli escludono dal normale funzionamento del DOM.

    oltre a "hidden" esistono altri valori da usare, che sono abbastanza intuibili:
    • visible: semplicemente il contrario di hidden
    • scroll: se dai un valore di altezza al div, dove taglia per esempio un <p> con scroll esce appunto lo scroll
    • auto: auto, niente da dire
    • initial: mette il div con il valore iniziale
    • inherit: eredita lo stesso valore che ha il padre.
    Questa è solo una infarinatura, ci sono tante altre cose che puoi fare con l'overflow, sta a te capire cosa
Devi accedere o registrarti per scrivere nel forum
9 risposte