Vai al contenuto
Max

4.x FollowTab IPS 4.0

Recommended Posts

Max

Ciao a tutti, avrei un problemino con una modifica fatta al forum, in sostanza è una tab inserita a lato del forum con i pulsanti che puntano ai vari social, sul forum nessun problema ma quando si usano dispositivi mobili ecco che si presenta il problema e in sostanza in fondo al forum con un dispositivo mobile si vede così:

 

tmp_2927-Screenshot_2015-07-22-18-29-17-

 

il codice corrispondente per questa modifica è il seguente:

 <style type="text/css">#followTab{list-style:none;position:fixed;z-index:5;right:0;top:250px;width:29px;padding:8px 0px;border:3px solid #fff;border-right:none;-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;-moz-box-shadow:0 0 7px rgba(0,0,0,.6);-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);box-shadow:0 0 7px rgba(0,0,0,.6);background: #DCDCDC;}#followTab li{margin:9px 0 0 0;line-height:0}#followTab li:first-child{margin-top:0}#followTab a{display:block;width:24px;}#followTab a span{position:absolute;top:-999em}@media (max-width: 979px) {#followTab {    position: relative !important;  }   </style><ul id="followTab"><li><a href="https://www.facebook.com/gameinvadersforumfanpage" title="Seguici su Facebook" target=_blank><img src="http://www.gameinvaders.it/forum/images/modernvb/facebook.png" onmouseover="this.src='http://www.gameinvaders.it/forum/images/modernvb/facebook_span.png'" onmouseout="this.src='http://www.gameinvaders.it/forum/images/modernvb/facebook.png'" /></a></li><li><a href="https://twitter.com/Forum_GInvaders" title="Seguici su Twitter" target=_blank><img src="http://www.gameinvaders.it/forum/images/modernvb/twitter.png" onmouseover="this.src='http://www.gameinvaders.it/forum/images/modernvb/twitter_span.png'" onmouseout="this.src='http://www.gameinvaders.it/forum/images/modernvb/twitter.png'" /></a></li><li><a href="https://www.youtube.com/channel/UCcCyv3DsBo7SkqA7S8CO0VA" title="Seguici su Youtube" target=_blank><img src="http://www.gameinvaders.it/forum/images/modernvb/youtube.png" onmouseover="this.src='http://www.gameinvaders.it/forum/images/modernvb/youtube_span.png'" onmouseout="this.src='http://www.gameinvaders.it/forum/images/modernvb/youtube.png'" /></a></li><li><a href="https://plus.google.com/u/0/117850802626541556261/posts" title="Seguici su Google+" target=_blank><img src="http://www.gameinvaders.it/forum/images/modernvb/google.png" onmouseover="this.src='http://www.gameinvaders.it/forum/images/modernvb/google_span.png'" onmouseout="this.src='http://www.gameinvaders.it/forum/images/modernvb/google.png'" /></a></li><li><a href="http://www.gameinvaders.it/forum/search/'>http://www.gameinvaders.it/forum/search/" title="Ricerca Avanzata"><img src="http://www.gameinvaders.it/forum/images/modernvb/search.png" onmouseover="this.src='http://www.gameinvaders.it/forum/images/modernvb/search_span.png'" onmouseout="this.src='http://www.gameinvaders.it/forum/images/modernvb/search.png'" /></a></li><li><a href="http://www.gameinvaders.it/forum" title="Home"><img src="http://www.gameinvaders.it/forum/images/modernvb/home.png" onmouseover="this.src='http://www.gameinvaders.it/forum/images/modernvb/home_span.png'" onmouseout="this.src='http://www.gameinvaders.it/forum/images/modernvb/home.png'" /></a></li></ul>

il codice è stato inserito alla fine del template footer prima della chiusura </div>

 

BomAle mi ha già risposto sul forum ufficiale e l'immagine è stata fornita da lui ma purtroppo l'inglese non è il mio forte ecco il motivo di questo topic.

Qualche suggerimento per far in modo che la tab sui mobile non risulti prendere tutto lo schermo ma visualizzarla come sul forum?

Grazie a tutti, in particolare a BomAle  ;)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
Askancy

CSS

@media (max-width: 979px) {#followTab li {  display: inline-block;}#followTab {text-decoration: none;list-style: none;float: left;display: inline-block;-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;-moz-box-shadow:0 0 7px rgba(0,0,0,.6);-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);box-shadow:0 0 7px rgba(0,0,0,.6);background: #DCDCDC;border-right:none;border:3px solid #fff;padding:8px 0px;width:29px;top:250px;}}
 

Fammi sapere :)

post-2-0-02425700-1437592622_thumb.png

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
Max

Ciao, si và bene per il mobile ma per il forum no...così và in fondo a tutto e la visualizzazione è in verticale tutto spostato sinistra.

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
Askancy

Ciao, si và bene per il mobile ma per il forum no...così và in fondo a tutto e la visualizzazione è in verticale tutto spostato sinistra.

Mi puoi mettere il css di come lo hai inserito? Hai sostituito solo la parte mobile?

Comunque il codice css mettilo nel file .css ( ci dovrebbe stare custom.css se non ricordo male )

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
BomAle

forse hai sbagliato a posizionare il codice proposto da askancy, ricontrolla appena possibile.

edit: sembra che prima di </style> manchi una parentesi graffa di chiusura... aggiungila } e inserisci subito dopo il codice di askancy...

altrimenti combinalo con l'altra dichiarazione @media

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
Max

Grazie ragazzi...penso che così potrebbe andare, sia sul forum che sul mobile.

 

Mi puoi mettere il css di come lo hai inserito? Hai sostituito solo la parte mobile?
Comunque il codice css mettilo nel file .css ( ci dovrebbe stare custom.css se non ricordo male )

Ho messo il codice postato da te nel custom.css, ho aggiunto la parentesi graffa mancante al mio codice presente nel template footer.

Modificato da Max

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
Askancy

Grazie ragazzi...penso che così potrebbe andare, sia sul forum che sul mobile.

 

Ho messo il codice postato da te nel custom.css, ho aggiunto la parentesi graffa mancante al mio codice presente nel template footer.

Ovviamente se il codice CSS lo hai messo nel custom.css ricordati di levarlo dall'html lo style...

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
Max

Ovviamente se il codice CSS lo hai messo nel custom.css ricordati di levarlo dall'html lo style...

levando il css dal template footer sul forum si vede così:

 

csi6NQ3.png

 

mentre se lo lascio si vede in maniera corretta:

 

cBxMwIp.png

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
Askancy

Ovvio devi mettere anche quel css nel custom css...

Sennò lascia stare così almeno non ti complichi la vita, anche se non è la maniera corretta...

#followTab{list-style:none;position:fixed;z-index:5;right:0;top:250px;width:29px;padding:8px 0px;border:3px solid #fff;border-right:none;-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;-moz-box-shadow:0 0 7px rgba(0,0,0,.6);-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);box-shadow:0 0 7px rgba(0,0,0,.6);background: #DCDCDC;}#followTab li{margin:9px 0 0 0;line-height:0}#followTab li:first-child{margin-top:0}#followTab a{display:block;width:24px;}#followTab a span{position:absolute;top:-999em}@media (max-width: 979px) {#followTab li {display: inline-block;}#followTab {text-decoration: none;list-style: none;float: left;display: inline-block;-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;-moz-box-shadow:0 0 7px rgba(0,0,0,.6);-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);box-shadow:0 0 7px rgba(0,0,0,.6);background: #DCDCDC;border-right:none;border:3px solid #fff;padding:8px 0px;width:29px;top:250px;}}

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
Askancy

mmm...ok, ma perchè sul mobile lo vedo in orizzontale e non in verticale come sul pc?

Perchè il codice HTML lo devi mettere dopo il tag </footer> sennò prende il width: 100% del footer e ti da quel problema.

post-2-0-02857300-1437653195_thumb.png

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
Askancy

Ma quindi il codice html non và inserito nel template footer ma nel global dopo il tag </footer>?

Esattamente. :) fammi sapere se va bene così o altro

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Crea un account o accedi per lasciare un commento

You need to be a member in order to leave a comment

Crea un account

Iscriviti per un nuovo account nella nostra comunità. È facile!

Registra un nuovo account

Accedi

Sei già registrato? Accedi qui.

Accedi Ora

×