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

google dice

Citazione:

---

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

---

scusa, modificati url.

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

Citazione:

---

.aa {
display: block;
margin: auto;
border: 0.5rem solid blue;
max-width: 100%;
width:90%;
}

---

Cordiali saluti.

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

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

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;
}

---

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

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.

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

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

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

Ora provvedo...

Cordiali saluti.

Citazione:

---

Originalmente inviato da 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

---

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

Citazione:

---

Originalmente inviato da GraphOGLRisorse

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;
}

---

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.

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
}

---

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.

Citazione:

---

Originalmente inviato da GraphOGLRisorse

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

son contento che ce l'hai fatta
siete stati bravissimi

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.

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