Allineare oggetti da pagina come da esempio

[vhsindvd]

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

[acsocmel]

google dice

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

[vhsindvd]

scusa, modificati url.

[GraphOGLRisorse]

Slave vhsindvd,
per allineare le icone verticalmente, aggiunga queste 2 classi css:

<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:

...............................
<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.

[vhsindvd]

Per ora ringrazio, domani le saprò dire
Buona serata.

[vhsindvd]

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

[acsocmel]

prova a cambiare

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

in

.menu .nav li {
    display: inline;
    text-align: center;
}

[vhsindvd]

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

[GraphOGLRisorse]

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:

@media (min-width: 1024px) {

.AdjustVert1 {
    position: absolute;
    margin-top: -10px;
    margin-left: -60px;
}
.AdjustVert2 {
    position: absolute;
    margin-top: -7px;
}

e approti queste modifiche:

<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.

[vhsindvd]

Ok perfetto.
Le icone ora sono allineate, con questo cod.

<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

[acsocmel]

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

[GraphOGLRisorse]

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

Ora provvedo...

Cordiali saluti.

[vhsindvd]

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?

[vhsindvd]

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.

.AdjustVert1 {
    position: absolute;
    margin-top: -10px;
    margin-left: -80px;
}

[GraphOGLRisorse]

Si, è giusto. Ben fatto!

Le basta aggiungere questa sotto aquelle due precedenti:

.AdjustDist {
    position: absolute;
    margin-left: 20px;
}

e apportare questa modifica:

<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.

[vhsindvd]

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.

<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

.AdjustOriz1 {
    position: absolute;
    margin-left: -60px
}
.AdjustOriz2 {
    position: absolute;
    margin-left: 10px
}

[GraphOGLRisorse]

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

.aa {
  border: 0.5rem solid blue;
  margin: auto;
  width:90%;
  max-width:526px;  
  height:auto;
}

Cordiali saluti.

[vhsindvd]

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

.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

[acsocmel]

son contento che ce l'hai fatta
siete stati bravissimi

[GraphOGLRisorse]

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.

[vhsindvd]

Grazie al Vs. aiuto con le ultime modifiche ho terminato.
Saluti
https://vhsindvd.altervista.org/index.html