Visualizzazione risultati 1 fino 21 di 21
Like Tree2Likes
  • 1 Post By GraphOGLRisorse
  • 1 Post By acsocmel

Discussione: Allineare oggetti da pagina come da esempio

  1. #1
    vhsindvd non  connesso Utente giovane
    Data registrazione
    15-11-2014
    Messaggi
    44

    Predefinito Allineare oggetti da pagina come da esempio

    Salve,
    non conoscendo bene il nuovo codice Html mi trovo in difficolt.
    Dovrei allineare due icone tra di loro in verticale segnate sull'esempio, pur risultando allineate nel mobile,
    se possibile spostare quelle superiori come nell'esempio o eventualmente alzare la prima e la seconda di circa 10px, mantenendo la compatibilit mobile,
    nella posizione mobile l'icona FB risulta tagliata…
    E' normale che in mobile non ci sia la toolbar?
    Inoltre vorrei ridurre di qualche px il riquadro video per il mobile.
    Ringrazio in anticipo


    https://drive.google.com/file/d/1NgF...ew?usp=sharing

    https://drive.google.com/file/d/1JCK...ew?usp=sharing
    https://vhsindvd.altervista.org/prova.html
    Ultima modifica di vhsindvd : 12-06-2020 alle ore 20.05.19

  2. #2
    L'avatar di acsocmel
    acsocmel non  connesso Utente attivo
    Data registrazione
    03-07-2007
    Messaggi
    462

    Predefinito

    google dice
    necessaria l'autorizzazione di accesso
    Richiedi l'autorizzazione di accesso o passa a un account che ne provvisto. Ulteriori informazioni

  3. #3
    vhsindvd non  connesso Utente giovane
    Data registrazione
    15-11-2014
    Messaggi
    44

    Predefinito

    scusa, modificati url.

  4. #4
    GraphOGLRisorse  connesso ora AlterVistiano
    Data registrazione
    14-02-2015
    Messaggi
    917

    Predefinito

    Slave vhsindvd,
    per allineare le icone verticalmente, aggiunga queste 2 classi css:
    Codice HTML:
    <script>
    @media (min-width: 1024px) {
    
    .verticales {
        position: absolute;
        margin-top: 70px;
        margin-left: -80px;
    }
    .verticaled {
        position: absolute;
        margin-top: 70px;
        margin-left: -60px;
    }
    ................
    <script>
    Caricandole come riportato qui:
    Codice HTML:
    ...............................
    <ul>
    <li><a href="mailto:piero.tamagni@hotmail.it"><img title="Premi per inviarmi una mail! Oppure scrivi all'indirizzo sotto." src="https://vhsindvd.altervista.org/immagini/mail.jpg" alt="" /></a></li>
    <li class="verticales"><iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpiero.vhs%2F&amp;width=120&amp;layout=button_count&amp;action=like&amp;size=large&amp;share=false&amp;height=30&amp;appId" width="120" height="30" frameborder="0" scrolling="no"></iframe></li>
    </ul>
    </div>
    </div>
    <div class="menu dx">
    <div class="nav">
    <ul>
    <li><img title="Cell: 339 4812883" src="https://vhsindvd.altervista.org/immagini/telefono.jpg" alt="" /></li>
    <li class="verticaled"><a title="Messaggia su WhatsApp" href="WhatsApp.php" target="_blank" rel="noopener"> <img src="https://vhsindvd.altervista.org/immagini/WhatsApp.jpg" alt="" /></a></li>
    </ul>
    .......................................
    Per ridurre l'immagine da mobile, provi se le va bene modificandolo cos:
    .aa {
    display: block;
    margin: auto;
    border: 0.5rem solid blue;
    max-width: 100%;
    width:90%;
    }
    Cordiali saluti.
    Ultima modifica di GraphOGLRisorse : 12-06-2020 alle ore 20.37.37

  5. #5
    vhsindvd non  connesso Utente giovane
    Data registrazione
    15-11-2014
    Messaggi
    44

    Predefinito

    Per ora ringrazio, domani le sapr dire
    Buona serata.

  6. #6
    vhsindvd non  connesso Utente giovane
    Data registrazione
    15-11-2014
    Messaggi
    44

    Predefinito

    Purtroppo la modifica .aa non ha alcun effetto.
    Poi per allineamento icone intendevo in senso verticale tra di loro come si evince nell'immagine allegata.
    Come pu notare non sono sullo stesso asse..
    Un ulteriore problema che non riesco a correggere, l'icona di FB tagliata come evidenziata nella secondo link del primo post.

    https://drive.google.com/file/d/18pq...ew?usp=sharing

    Questa la pagina di riferimento..
    https://vhsindvd.altervista.org/prova3.html
    Cordialmente
    Ultima modifica di vhsindvd : 13-06-2020 alle ore 15.23.26

  7. #7
    L'avatar di acsocmel
    acsocmel non  connesso Utente attivo
    Data registrazione
    03-07-2007
    Messaggi
    462

    Predefinito

    prova a cambiare
    Codice:
    .menu .nav li {
        display: inline;
        float: left;
        width: 25%;
        height: 60px;
        text-align: center;
        padding: 10px;
    }
    in
    Codice:
    .menu .nav li {
        display: inline;
        text-align: center;
    }

  8. #8
    vhsindvd non  connesso Utente giovane
    Data registrazione
    15-11-2014
    Messaggi
    44

    Predefinito

    Ti ringrazio, per quanto riguarda l'icona di FB non si taglia pi, ma cambia posizione mettendosi sotto.
    E' possibile fare altrettanto per le altre due e se possibile distanziare le due coppie di 10PX?
    Mentre il disallineamento tra di loro rimasto parte dalla pagina intera fino a un formato pi piccolo dove si allineano...scusa la mia pignoleria..
    Ringrazio

    https://drive.google.com/file/d/1KV6...ew?usp=sharing

  9. #9
    GraphOGLRisorse  connesso ora AlterVistiano
    Data registrazione
    14-02-2015
    Messaggi
    917

    Predefinito

    L'allineamento orizzontale e non verticale. Quello che le serve di aggiustare di sistemare le altezze dei due elementi laterali a sinistra. Sepro di aver capito giusto.

    Aggiunga queste classi:
    Codice:
    @media (min-width: 1024px) {
    
    .AdjustVert1 {
        position: absolute;
        margin-top: -10px;
        margin-left: -60px;
    }
    .AdjustVert2 {
        position: absolute;
        margin-top: -7px;
    }
    e approti queste modifiche:
    Codice HTML:
    <ul>
    <li class="AdjustVert1"><a href="mailto:piero.tamagni@hotmail.it"><img title="Premi per inviarmi una mail! Oppure scrivi all'indirizzo sotto." src="https://vhsindvd.altervista.org/immagini/mail.jpg" alt="" /></a></li>
    <li class="AdjustVert2"><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="button" data-action="like" data-size="large" data-share="false"></div></li>
    <!--li><iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpiero.vhs%2F&amp;width=120&amp;layout=button_count&amp;action=like&amp;size=large&amp;share=false&amp;height=30&amp;appId" width="120" height="30" frameborder="0" scrolling="no"></iframe></li-->
    </ul>
    Le immagini, che linca qui sul form, sarebbe meglio se fossero in png anzi che bmp.

    Cordiali saluti.

  10. #10
    vhsindvd non  connesso Utente giovane
    Data registrazione
    15-11-2014
    Messaggi
    44

    Predefinito

    Ok perfetto.
    Le icone ora sono allineate, con questo cod.
    Codice HTML:
    <ul>
    <li class="AdjustVert1"><a href="mailto:piero.tamagni@hotmail.it"><img title="Premi per inviarmi una mail! Oppure scrivi all'indirizzo sotto." src="immagini/mail.jpg" alt="" /></a></li>
    <li class="AdjustVert2"><iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpiero.vhs%2F&amp;width=120&amp;layout=button_count&amp;action=like&amp;size=large&amp;share=false&amp;height=30&amp;appId" width="120" height="30" frameborder="0" scrolling="no"></iframe></li>
    </ul>
    sarebbe ottimo se si potessero distanziare ogni coppia di qualche Px..
    Resta il problema dell'immagine del post n.8, se possibile ringrazio..
    Per quanto riguarda le immagini, non c' il sistema per caricarle direttamente?
    Cordiali saluti
    Ultima modifica di vhsindvd : 13-06-2020 alle ore 18.31.11

  11. #11
    L'avatar di acsocmel
    acsocmel non  connesso Utente attivo
    Data registrazione
    03-07-2007
    Messaggi
    462

    Predefinito

    se vuoi un risultato preciso devi disegnare nuove icone
    adesso ci sono misure e proporzioni troppo varie
    dell'immagine post 8 non ho capito il problema
    quale immagine?
    fai un altro disegnino

  12. #12
    GraphOGLRisorse  connesso ora AlterVistiano
    Data registrazione
    14-02-2015
    Messaggi
    917

    Predefinito

    Quindi vhsindvd, lei vuole che ogni coppia abbbia tra i due elementi 10px di spazio.

    Ora provvedo...

    Cordiali saluti.
    Ultima modifica di GraphOGLRisorse : 13-06-2020 alle ore 19.00.28

  13. #13
    vhsindvd non  connesso Utente giovane
    Data registrazione
    15-11-2014
    Messaggi
    44

    Predefinito

    Citazione Originalmente inviato da acsocmel Visualizza messaggio
    se vuoi un risultato preciso devi disegnare nuove icone
    adesso ci sono misure e proporzioni troppo varie
    dell'immagine post 8 non ho capito il problema
    quale immagine?
    fai un altro disegnino
    Che sul mobile l'icona di FB passa sotto a quella della mail mentre quella del telefono resta affiancata a quella di WS e starebbero meglio uguali
    Grazie

    Non vedi ancora le immagini?
    Ultima modifica di vhsindvd : 13-06-2020 alle ore 19.00.23

  14. #14
    vhsindvd non  connesso Utente giovane
    Data registrazione
    15-11-2014
    Messaggi
    44

    Predefinito

    Citazione Originalmente inviato da GraphOGLRisorse Visualizza messaggio
    Quindi vhsindvd, lei vuole che ogni coppia abbbia tra i due elementi 10px di spazio.

    Ora provvedo...

    Cordiali saluti.
    In pi del valore attuale..
    Cordiali saluti
    PS quella della mail sono riuscito a modificarla.
    Codice:
    .AdjustVert1 {
        position: absolute;
        margin-top: -10px;
        margin-left: -80px;
    }
    Ultima modifica di vhsindvd : 13-06-2020 alle ore 19.25.26

  15. #15
    GraphOGLRisorse  connesso ora AlterVistiano
    Data registrazione
    14-02-2015
    Messaggi
    917

    Predefinito

    Si, giusto. Ben fatto!

    Le basta aggiungere questa sotto aquelle due precedenti:
    Codice:
    .AdjustDist {
        position: absolute;
        margin-left: 20px;
    }
    e apportare questa modifica:
    Codice HTML:
    <li class="AdjustDist"><a title="Messaggia su WhatsApp" href="WhatsApp.php" target="_blank" rel="noopener"> <img src="https://vhsindvd.altervista.org/immagini/WhatsApp.jpg" alt="" /></a></li>
    Cordiali saluti.

  16. #16
    vhsindvd non  connesso Utente giovane
    Data registrazione
    15-11-2014
    Messaggi
    44

    Predefinito

    Ho risolto quasi tutto, ci manca solo il problema dell'immagine del post n.8...e se fosse possibile abbassare di ~ 30px la tabella del codice sotto.

    Codice HTML:
    <div class="contenuto">
    <div class="corpo"><img title="Grazie per la visita al mio sito, sperando di accontentare le 
    Vostre esigenze!" class="aa" alt="" src="immagini/immagine.jpg"></div>
    <div class="menu"><video width="203" height="100" autoplay="autoplay" controls="controls">
    <source src="video/youtube.mp4" type="video/mp4">
    </video></div>
    <div class="menu dx">
    <p><img alt="" src="immagini/imagin4.jpg"></p>
    <p><img alt="" src="immagini/imagin1.jpg"></p>
    </div>
    </div>


    Ringrazio
    Codice modificato
    Codice:
    .AdjustOriz1 {
        position: absolute;
        margin-left: -60px
    }
    .AdjustOriz2 {
        position: absolute;
        margin-left: 10px
    }
    Ultima modifica di vhsindvd : 13-06-2020 alle ore 20.26.35

  17. #17
    GraphOGLRisorse  connesso ora AlterVistiano
    Data registrazione
    14-02-2015
    Messaggi
    917

    Predefinito

    Provi a sostituire la classe aa con la versione del mio esmpio, magari cambiando qualche valore.

    Codice:
    .aa {
      border: 0.5rem solid blue;
      margin: auto;
      width:90%;
      max-width:526px;  
      height:auto;
    }
    Cordiali saluti.
    Ultima modifica di GraphOGLRisorse : 13-06-2020 alle ore 20.22.32
    vhsindvd likes this.

  18. #18
    vhsindvd non  connesso Utente giovane
    Data registrazione
    15-11-2014
    Messaggi
    44

    Predefinito

    Citazione Originalmente inviato da GraphOGLRisorse Visualizza messaggio
    Provi a sostituire la classe aa con la versione del mio esmpio, magari cambiando qualche valore.

    Codice:
    .aa {
      border: 0.5rem solid blue;
      margin: auto;
      width:90%;
      max-width:526px;  
      height:auto;
    }
    Cordiali saluti.
    Questo riguardava la riduzione immagine, ma ho gi risolto…
    Cordialmente
    Una buona domenica a entrambi
    Ultima modifica di vhsindvd : 13-06-2020 alle ore 20.30.30

  19. #19
    L'avatar di acsocmel
    acsocmel non  connesso Utente attivo
    Data registrazione
    03-07-2007
    Messaggi
    462

    Predefinito

    son contento che ce l'hai fatta
    siete stati bravissimi
    vhsindvd likes this.

  20. #20
    GraphOGLRisorse  connesso ora AlterVistiano
    Data registrazione
    14-02-2015
    Messaggi
    917

    Predefinito

    Sono contento anch'io che vhsindvd sia riuscito nel suo inetento. Inoltre, direi che la discussione le stata anche utile per prendere pi confidenza con i codici.

    acsocmel la rigrazio per i complimenti al plurale.

    Buona Domenica ad entrmbi,
    cordiali saluti.

  21. #21
    vhsindvd non  connesso Utente giovane
    Data registrazione
    15-11-2014
    Messaggi
    44

    Predefinito

    Grazie al Vs. aiuto con le ultime modifiche ho terminato.
    Saluti
    https://vhsindvd.altervista.org/index.html
    Ultima modifica di vhsindvd : 14-06-2020 alle ore 17.41.09

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •