Visualizzazione dei risultati da 1 a 9 su 9

Discussione: .nav-primary - pulsantiera e risoluzione monitor

  1. #1

    .nav-primary - pulsantiera e risoluzione monitor

    Ciao a tutti
    chiarisco subito che mi sto facendo un sito dopo 10 anni che ho smesso di fare il web designer.
    Quindi, poco a poco in questi mesi ho rispverato le mie vecchie conoscenze a riguardo, e il sito l'ho rifatto 4 volte, perchè non mi piaceva, ma non ho intenzione di mettermi a studiare, quello che faccio è unicamente finalizzato alla realizzazione di questo sito, e non di altri in futuro.

    detto questo vi espongo il mio problema:
    ho il posizionamento della punsantiera con i CSS attraverso questo codice

    .nav-primary {
    position: fixed;
    top: 70px;
    left: calc(14% );
    z-index: 100000;
    }

    ora ho bisogno di settare questo codice affinchè la pulsantiera si posizioni coerentemente dove voglio che stia su ogni risoluzione, mentre ora invece è spostata a seconda del monitor appunto.
    Credo che sia possibile farlo, e facile per chi sa scrivere in CSS, purtroppo non è il mio caso, e non posso permettermi di mettermi a studiare ora i CSS solo per spostare questa pulsantiera.

    qundi ringrazio vivamente chi potrà essermi di aiuto.

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    Messaggi
    2,371
    Ciao, probabilmente ti riferisci a quel calc(14%), le altre regole sono fisse e funzionano sicuramente ad ogni risoluzione.
    Bene o male le diverse risoluzioni solo le standard Desktop, tablet, mobile...
    Potresti dare una lettura alle media-query css per impostare la variazione di quel calc() in base alla risoluzione.
    Nulla di complicato
    https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
    https://www.w3schools.com/css/css3_mediaqueries_ex.asp

  3. #3
    Ciao e grazie per la risposta.
    vuol dire che se io imposto la risoluzione dello schermo e per ognuna di queste il giusto calc(%) automaticamente la nav bar si posiziona sempre nello stesso punto in ogni diversa risoluzione? cioè non c'è bisogno di un if ? if è di javascript forse?
    Ma se io ho in html un align center per la pagina, che si posizionerà sempre al centro indipendentemente dalla risoluzione schermo, a questo corrisponde un modo perchè in css la nav bar si posizioni nello stesso punto?
    Quote Originariamente inviata da m4rko80 Visualizza il messaggio
    Ciao, probabilmente ti riferisci a quel calc(14%), le altre regole sono fisse e funzionano sicuramente ad ogni risoluzione.
    Bene o male le diverse risoluzioni solo le standard Desktop, tablet, mobile...
    Potresti dare una lettura alle media-query css per impostare la variazione di quel calc() in base alla risoluzione.
    Nulla di complicato
    https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
    https://www.w3schools.com/css/css3_mediaqueries_ex.asp

  4. #4
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    Messaggi
    2,371
    Le media query funzionano appunto come un IF in base alla risoluzione. Quindi la risposta è si.
    Se ti viene piu' comodo e conveniente usare un align-center lo vedi dal risultato, ad occhio e croce con align sei sicuro che sarà sempre al centro.

  5. #5
    Quote Originariamente inviata da m4rko80 Visualizza il messaggio
    Le media query funzionano appunto come un IF in base alla risoluzione. Quindi la risposta è si.
    Se ti viene piu' comodo e conveniente usare un align-center lo vedi dal risultato, ad occhio e croce con align sei sicuro che sarà sempre al centro.
    perdona la mia ingoranza, ma align era solo per spiegarmi, è per html, giusto? ma la nav bar è posizionata con i css

  6. #6
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    Messaggi
    2,371
    align:center è una regola di stile, puoi usarla sia da css file file css appunto o nello stile "inline" negli attributi html
    [code]
    <div id="mioid" style="align:center">.....</div>
    [code}
    o
    codice:
    #mioid {align:center;}
    Il calc() che usi è per avere una distanza da sinistra giusto? se vuoi centrale il menu (non so che altro ci sia intorno al meno o meno) puoi provare a levare calc() ed usare aling sul contenitore del menu.
    Oppure puoi provare solo con margin

    codice:
    .nav-primary {
    position: fixed;
    top: 70px;
    margin:0 auto;
    z-index: 100000;
    }
    



  7. #7
    grazie, grazie 1000!

  8. #8
    Quote Originariamente inviata da m4rko80 Visualizza il messaggio
    align:center è una regola di stile, puoi usarla sia da css file file css appunto o nello stile "inline" negli attributi html
    [code]
    <div id="mioid" style="align:center">.....</div>
    [code}
    o
    codice:
    #mioid {align:center;}
    Il calc() che usi è per avere una distanza da sinistra giusto? se vuoi centrale il menu (non so che altro ci sia intorno al meno o meno) puoi provare a levare calc() ed usare aling sul contenitore del menu.
    Oppure puoi provare solo con margin

    codice:
    .nav-primary {
    position: fixed;
    top: 70px;
    margin:0 auto;
    z-index: 100000;
    }
    


    caspita, non mi funziona, butta la nav bar tutta a sinistra
    ho provato questo .nav-primary {
    position: fixed;
    top: 70px;
    margin:0 auto;
    z-index: 100000;
    }

    e questo
    .nav-primary {
    position: fixed;
    top: 70px;
    align:center;
    z-index: 100000;
    }
    ma il risultato è lo stesso, tutto a sinistra

  9. #9
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    Messaggi
    2,371
    Non so come sia fatto il tuo html, ci vorrebbe un esempio per capire esattamente.
    Do per scontato che .nav-primary sia il DIV da mettere fixed in testa a tutto e di larghezza 100%.
    Se la larghezza prende il 100% con un text-align center dovresti vedere tutto allineato al centro (ed effettivamente il margin:0 auto non se lo fila).
    Se va inserito altrove servirebbero più indicazioni. Quanto dovrebbe restare spostato questo menu a seconda dei device?
    Se il calc() usato all'inizio non era preciso, puoi usare come dicevo le media query ed impostare manualmente un valore corretto.

Tag per questa discussione

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 © 2017 vBulletin Solutions, Inc. All rights reserved.