Modificare template per smartphone

[frank]

Difatti l'avevo pensato anch'io, guarda il mio in formato smartphone

http://gruppoalveo.it/forum/index.php

[Sir Xiradorn]

Può anche andare bene cosi se preferisci ma cosi hai meno possibilità di personalizzazione e effetti se vuoi creare qualche animazione o transizione. Inoltre la mia tecnica previene che ti possano copiare quelle immagini più facilmente e puoi ulteriormente proteggerle con una piccola tecnica di hovering.

Due consigli importantissimi che spero tu faccia tesoro (non tanto del primo, ma il secondo):
- Hai i link che ti danno una piccola linea rossa quando ci passi sopra nell'angolo in basso al sinistra. dovresti eliminare la decoration
- Non usare MAI SE POSSIBILE css inline. Questi tag hanno una specificità che potrebbe stravolgere altre assegnazioni fatte. E' sempre bene usare css inline solo in casi eccezionali e per mantenere un codice più leggero e pulito nonché veloce.

[frank]

Ho fatto una prova: ho tolto tutti i tuoi codici e ho modificato il mio originale, sembra che vada bene, prova a vedere:

Codice: Seleziona tutto

<!-- Immagini-link nella parte alta -->
<div style="width:auto; margin-bottom:15px; text-align:center;">
<a href="http://www.ilgiardinodeilibri.it/__libri/_alimentazione_cucina/?pn=5106">
<img style="width:150px; height:70px; margin-left:15px;" src="styles/prosilver/theme/images/libri.jpg" alt="Libri" title="I libri del benessere">
</a>

<a href="https://www.idealandia.it/cucina_estrattori_slow_juicer/?a=9LPnN&b=h50LM">
<img style="width:160px; height:70px; margin-top:10px; margin-left:15px;" src="styles/prosilver/theme/images/estrattori.jpg" alt="Estrattori" title="Estrattori di succhi vivi">
</a>

<a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=frullatore&linkCode=ur2&tag=gruppoitforum-21">
<img style="width:110px; height:70px; margin-top:10px; margin-left:15px;" src="styles/prosilver/theme/images/frullatori.jpg" alt="Frullatori" title="Frullatori di ogni genere">
</a>

<a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=vaporiera&linkCode=ur2&tag=gruppoitforum-21">
<img style="width:110px; height:70px; margin-top:10px; margin-left:15px;" src="styles/prosilver/theme/images/vaporiere.jpg" alt="Vaporiere" title="Vaporiere di tutti i tipi">
<a>

<a href="http://www.macrolibrarsi.it/home/prodotti.php?pn=4632">
<img style="width:180px; height:70px; margin-top:10px; margin-left:15px;" src="styles/prosilver/theme/images/bio-shop.jpg" alt="Bio-shop" title="Prodotti biologici">
<a>
</div>

[Sir Xiradorn]

I link ancora hanno quel problema sull'hover. Il posizionamento delle immagini pare ok

[frank]

Nel mio codice il decoration non c'è

[Sir Xiradorn]

Appunto devi aggiungere ai link

Codice: Seleziona tutto

text-decoration: none !important;

[frank]

L'ho messo nel css principale ma la riga rossa non va via

Codice: Seleziona tutto

<div style="width:auto; margin-bottom:15px; text-align:center; text-decoration: none !important;">

[Sir Xiradorn]

Link = a non div quindi

Codice: Seleziona tutto

<a href=" ... " style=" ... text-decoration: none !important;" ...

[frank]

Ok, a posto.

Ancora una cosa poi sarebbe a posto del tutto: metterei una cosa del tipo che quando metto sopra il mouse, l'immagine si ingrandisce (effetto primo piano), oppure si illumina, proviamo

[Sir Xiradorn]

Con il codice inline non lo puoi fare! Ma soprattutto con il codice da te scritto ti sei complicato la vita. Inoltre con le immagini è un po più difficile da fare. In ogni caso per l'effetto di primo piano devi fare si che:
- i link siano abbiano overflow in hidden
- le immagini quando fai l'hover sui link e sulle stesse immagini cambino le dimensioni crescendo di un po. Ma essendo contenute nel link si zoomano senza dilatare il link stesso.
Per questo io creai delle classi ad hoc.

Se vuoi farco facendo illuminare per così dire le immagini usa l'opacity