Vorrei realizzare, una barra menù aggiuntiva a scompara.
Ovvero la vorrei collocare nel lato sinistro dell'index del forum, accessibile da tutte le pagine di navigazione, con una piccola freccetta che la faccia scomparire per chi vuole.
In questa barra, vorrei metterci in fila, quindi in verticale, una serie di bottoni (non scritte quindi), carini, di accesso rapido a determinate funzioni, che so, magari il regolamento, o sezioni determinate.
LA barra di navigazione di SMF rimarrebbe cosi come si trova, ma ne vorrei una aggiuntiva editabile e modificabile nei contenuti.
Potrei incentivare il menù di navigazione, ma aggiungendo funzioni avrebbero problemi di navigazione gli utenti con piccoli schermi.
Qualcuno sa indicarmi una mod specifica o come posso muovermi in tal senso?
Buon divertimento
http://www.gleenk.com/menu-comparsa-laterale-jquery/ (http://www.gleenk.com/menu-comparsa-laterale-jquery/)
Woow, è proprio quello che cercavo.......
Ma ho bisogno di aiuto però, se voglio piazzare il menù a sinistra dell'index del forum, e di tutte le pagine, tranne la HP, in quale file devo intervenire, e dove andare a copiare quei codici?
Credo dovrei creare un nuovo file, tipo come una mod.... bò attendo vostre indicazioni.
Il codice html drevi meterlo nel file comune a tutte le pagine del forum (qualcuno ti dirà quale,)
Inoltre dovrai includere il file javascript che includerà il codice relativo.
Infine una porzione di css che gestisce questo menu verrà inserito nel file css del template.
Citazione di: titanium il Sabato - 07 Settembre 2013 - 19:14
Ma ho bisogno di aiuto però, se voglio piazzare il menù a sinistra dell'index del forum, e di tutte le pagine, tranne la HP
C'è qualche motivo particolare per escludere la home page?
Citazione di: Filippo il Domenica - 08 Settembre 2013 - 18:57
Il codice html drevi meterlo nel file comune a tutte le pagine del forum (qualcuno ti dirà quale,)
Inoltre dovrai includere il file javascript che includerà il codice relativo.
Infine una porzione di css che gestisce questo menu verrà inserito nel file css del template.
Mi sa che mi devi spiegare passo passo.....
Citazione di: emanuele il Domenica - 08 Settembre 2013 - 20:44
C'è qualche motivo particolare per escludere la home page?
No, possiamo anche nella HP, l'importante che sia a sx, e sempre al centro della pagina...
Non vi dimenticate di me :(
;D
Busy, busy...
Ho capito è troppo complicato da spiegare...
Ho provato a smanettare in Xampp, ma è una cosa più grande di me. :(
Se l'intento è provarci tu (cosa che approvo! ;)), il principio è semplice ed è spiegato in nel link postato da Filippo: crei una lista in cui ogni voce è uno dei menù che vuoi, gli assegni lo stile via css e poi gli "attacchi" l'effetto con jQuery.
Puoi anche solo copiare ed incollare l'esempio e vedi come funziona, da lì poi costruisci.
Secondo me l'intento è: imboccamelo che è meglio :P
Citazione di: Filippo il Martedì - 17 Settembre 2013 - 15:09
Secondo me l'intento è: imboccamelo che è meglio :P
Infatti....
Ho bisogno della prima nota....
Dove andare a mettere il codice Html, ecc ecc.... mi dispiace, ma non ci riesco, non pretendo una spiegazione però, capisco che è laborioso... ;)
Dato che vuoi averlo in tutte le pagine, il posto è sempre il solito: index.template.php.
Il dove è relativamente importante, mettilo magari alla fine, appena prima di </body>.
All'interno di un div?
Allora sto provando con XAMPP
operazioni effettuare, ho preso questo codice:
<ul id="navigation">
<li><a href="#" class="voce1"></a></li>
<li><a href="#" class="voce2"></a></li>
<li><a href="#" class="voce3"></a></li>
<li><a href="#" class="voce4"></a></li>
</ul>
Al posto di # ho messo 4 link a caso del forum, ed ho incollato il tutto nel file index.template.php del Tema in uso, il tutto subito prima della stringa </body>
poi ho preso questo codice, così come sta:
body{
background:#fff;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
text-decoration:none;
display: block;
margin-left: -2px;
width: 60px;
height: 40px;
font-size:16px;
font-weight:bold;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
background-repeat:no-repeat;
border-radius:0px 10px 10px 0px;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
border:1px solid #ccc;
}
.voce1 {background: url(blue_monster_happy.png)}
.voce2 {background:url(green_monster_angry.png)}
.voce3 {background:url(red_monster_angry.png)}
.voce4 {background:url(yellow_monster_happy.png)}
e lo incollato nel file index.css del tema corrente, alla fine di tutto.
Il risultato è che mi sono spuntate 4 finestre cliccabili, da sistemare ecc ecc, ora vorrei sapere dove andare a mettere Lo script jQuery
$('#navigation a').stop().animate({'marginLeft':'-50px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-7px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
Lo puoi mettere in script.js (quello del tuo tema)...anche se per far così bisogna modificarlo un po':
$(document).ready(function() {
$('#navigation a').stop().animate({'marginLeft':'-50px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-7px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
};
E devi caricare jQuery *prima* di script.js (quindi aggiungere la linea che carica jQuery nel tema prima di quella che carica script.js).
Scusa emanuele, nella cartella scripts del tema in uso, sempre in Xampp trovo il file theme.js, devo aprire quello giusto?
o devo creare un file.
Scusami ma devi spiegarmelo meglio questo ultimo passaggio.
EDIT:
Il file script.js lo trovo solo se entro nella cartella script del tema di default, mentre se entro nel tema in uso ho solo il file theme.js
EDIT2:
E devi caricare jQuery *prima* di script.js (quindi aggiungere la linea che carica jQuery nel tema prima di quella che carica script.js).
Dove e come? ???
Se il file script.js non c'è nel tuo tema, cambi quello del tema di default e SMF dovrebbe fare il resto.
Dovrai aggiungere qualcosa tipo:
<script type="text/javascript" src="', $context['default_theme_url'], '/scripts/jquery.min.js"></script>
oppure:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
prima di:
<script type="text/javascript" src="http:', $context['default_theme_url'], '/scripts/script.js?fin20"></script>
Scritto a memoria, potrebbe essere sbagliato.
La scelta tra la prima e la seconda versione dipende se vuoi avere il file di jquery sul tuo server, oppure delegare il suo caricamento ad esempio a google.
Fatto non ottengo nessuna animazione ho provato sia la prima che la seconda messa prima di:
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>
nel index.template.php del tema in uso non di DEFAULT...
EDIT
ma jquery.min.js deve essere un file?
questo ciò che esce, sempre in xampp
Citazione di: titanium il Giovedì - 19 Settembre 2013 - 18:21
ma jquery.min.js deve essere un file?
Sì, devi scaricare jquery e metterlo nella directory scripts del tema, a meno che non usi il cnd di google (o altri).
Per scaricarlo...va beh, apri: http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js e salvalo dove devi.
Forse è meglio riepilogare i miei movimenti in quanto continua a non funzionare.
1. inserito nel file index.template.php del tema in uso (non il default) il seguente codice:
<ul id="navigation">
<li><a href="http://www.idaf.it/index.php?board=19.0" class="voce1"></a></li>
<li><a href="http://www.idaf.it/index.php?action=googlemap" class="voce2"></a></li>
<li><a href="http://www.idaf.it/index.php?action=downloads" class="voce3"></a></li>
<li><a href="http://www.idaf.it/index.php?action=profile" class="voce4"></a></li>
<li><a href="http://www.idaf.it/index.php?action=profile" class="voce5"></a></li>
</ul>
il tutto prima della stringa:
</body></html>'
2. nel file index.css del tema in uso (non di default) in basso a tutto ho inserito il seguente codice:
body{
background:#fff;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 350px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
text-decoration:none;
display: block;
margin-left: -2px;
width: 20px;
height: 40px;
font-size:16px;
font-weight:bold;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
background-repeat:no-repeat;
border-radius:0px 10px 10px 0px;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
border:2px solid #C2C2C2;
}
.voce1 {background: url(blue_monster_happy.png)}
.voce2 {background:url(green_monster_angry.png)}
.voce3 {background:url(red_monster_angry.png)}
.voce4 {background:url(yellow_monster_happy.png)}
.voce5 {background:url(yellow_monster_happy.png)}
3. la libreria JQuery ovvero questo codice:
$('#navigation a').stop().animate({'marginLeft':'-50px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-7px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
modificato come detto da emanuele in:
$(document).ready(function() {
$('#navigation a').stop().animate({'marginLeft':'-50px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-7px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
};
è stato inserito nel file script.js in basso a tutto, ma nella cartella script del Tema di Default, in quanto il mio Tema corrente non conteneva quel file nella cartella script.
4. nel file index.template.php di cui al punto 1, prima di questa riga:
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>
ho inserito la seguente riga:
<script type="text/javascript" src="', $context['default_theme_url'], '/scripts/jquery.min.js"></script>
5. non capendo cosa è il jquery o il CND di google, ho salvato il file http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js , all'interno della cartella script Del tema corrente, e NON funziona l'animazione, poi ho provato a metterla nella cartella script del tema di default e NON funziona nuovamente.
Ricordo che il tutto l'ho sto provando con XAMPP, non ho caricato le immagini, penso che non sia un problema in quanto mi dovrebbe comparire l'icona di windows senza foto.
Leggo però nella guida: http://www.gleenk.com/menu-comparsa-laterale-jquery/ che nel primo codice Html:
PS: ricordatevi di includere la libreria jQuery all'interno del tag !
è forse questo il passaggio che manca? Se si ditemi dove e cosa scrivere.... ;)
Se può servire agli sviluppatori:
l'esempio: http://www.gleenk.com/demo/jquery/menu-comparsa-laterale/ da cui trarre la sorgente della pagina.
Prova con questo:
$(document).ready(function() {
$('#navigation a').stop().animate({'marginLeft':'-50px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-7px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
Mancava una parentesi chiusa alla fine.
No, nessuna animazione
<script type="text/javascript" src="', $context['default_theme_url'], '/scripts/jquery.min.js"></script>
dovrebbe essere:
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jquery.min.js"></script>
oppure:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Allora inserendo sia il primo che il secondo codice,si inizia a vedere qualche miglioramento, solo che le finestre scompaiono sulla sinistra, mentre si carica la pagina ovvero le vedo per un attimo e poi scompaiono per non ritornare mai più....
Edit: FUNZIONA, devo solo capire dove caricare le icone.....
Mettile dove vuoi, basta che le linki esattamente
Non capisco filippo, in tutti i codici della funzione, credo che ciò che riguarda le immagini da visualizzare, ovvero i link compare nel file index.css del Tema Corrente, ed in particolare;
.voce1 {background: url(blue_monster_happy.png)}
.voce2 {background:url(green_monster_angry.png)}
.voce3 {background:url(red_monster_angry.png)}
.voce4 {background:url(yellow_monster_happy.png)}
.voce5 {background:url(yellow_monster_happy.png)}
quindi supponiamo che io alla voce1 voglio un immagine, trovo una icona in .png e la rinomino "blue_monster_happy.png" ad esempio, o quello che voglio, ho provato a collocarla nella cartalla images del Tema corrente, ma non mi appare...
Dove sbaglio?
EDIT Risolto
Allora, è il momento di provare il tutto sul web, sino ad ora in Xampp tutto ok.
Installato il tutto sul web, la funzione va tranquilla, unica cosa che per ora noto:
1. tutte le scritte del forum si sono ridotte un po.....
2. ho posizionato i tasti al centro della pagina intervenendo sulla seguente stringa del file index.css
top: 350px;
Io con Crome li vedo al centro, adesso alcuni utenti mi dicono di vederli in basso invece.
Come posso riparare?
EDIT:
Presumo che in css ci sia bisogno di un valore che centri i tasti in automatico nella pagina, e che sia compatibile con tutti i Browser di navigazione, o almeno credo
Funziona, a quanto pare. Ah, dovevo scriveree url e ho scritto link
1. tutte le scritte del forum si sono ridotte un po.....
dove devo intervenire per aumentare il font dei caratteri del sito, sicuramente nel file index.css del tema in uso... in quale riga?
Dopo l'installazione del menù tutto si è ridotto.
Altra cosa, il menù laterale mi permette di inserire appena una icona di 32x32 px, ora non è che abbia tanto spazio di manovra per scriverci magari "Regolamento".
Mi chiedevo se non fosse troppo difficile, anche se credo che lo sia, realizzare che:
- l'utente passa il mouse sul menù, questo si anima, mostra l'icona, e mostra la descrizione della stessa, con la classica finestrella che compare un o ovunque quando passiamo il mouse senza cliccare.
Citazione di: titanium il Martedì - 24 Settembre 2013 - 18:16
1. tutte le scritte del forum si sono ridotte un po.....
dove devo intervenire per aumentare il font dei caratteri del sito, sicuramente nel file index.css del tema in uso... in quale riga?
Dopo l'installazione del menù tutto si è ridotto.
Mentre creavi il menù, hai aggiunto questo css:
body{
background:#fff;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}rimuovilo.
Ottimo Ottimo, grazie.... lo sai ci ero arrivato, ma non a cancellarlo del tutto, ma a modificarlo... il tutto stanotte mentre non riuscivo a dormire :)
Citazione di: titanium il Martedì - 24 Settembre 2013 - 19:26
Altra cosa, il menù laterale mi permette di inserire appena una icona di 32x32 px, ora non è che abbia tanto spazio di manovra per scriverci magari "Regolamento".
Mi chiedevo se non fosse troppo difficile, anche se credo che lo sia, realizzare che:
- l'utente passa il mouse sul menù, questo si anima, mostra l'icona, e mostra la descrizione della stessa, con la classica finestrella che compare un o ovunque quando passiamo il mouse senza cliccare.
Filippo che ne pensi?
Ho notato che la mod Scrolling Botton, ovvero i tasti di destra fanno un po i capricci dopo l'installazione del menù, così ho deciso di disinstallarlo.
Voglio inserire il comando vai su e vai giù nel menù, quindi per andare su ho inserito:
http://www.idaf.it/index.php?action=forum#top
ed il comando funziona, tranquillamente.
Per andare invece giù ho messo il seguente link:
http://www.idaf.it/index.php?action=forum#bottom
ma non funziona.....
Perché hai inserito "#sc_bottom" e non "#bottom". ;)
Citazione di: titanium il Martedì - 24 Settembre 2013 - 19:26
- l'utente passa il mouse sul menù, questo si anima, mostra l'icona, e mostra la descrizione della stessa, con la classica finestrella che compare un o ovunque quando passiamo il mouse senza cliccare.
<a href="http://blabla.it" title="Questo viene visualizzato on hover">testo</a>Ad ogni modo puoi controllare dimensioni e forma del pulsante via css, quindi puoi fare quello che vuoi: se lo vuoi più grande lo ingrandisci, se lo vuoi più piccolo lo riduci. ;)
Citazione di: emanuele il Mercoledì - 25 Settembre 2013 - 18:00
Perché hai inserito "#sc_bottom" e non "#bottom". ;)
Ho seguito una guida nel web.
In pratica, ho messo in index.template.php prima di
</body>questo codice:
<div id="sc_bottom"></div>poi il link di rimando ai tasti l'ho fatto così:
<li><a href="http://www.idaf.it/index.php?action=forum#top" title="Vai su" class="voce6"></a></li>
<li><a href="http://www.idaf.it/index.php?action=forum#sc_bottom" title="Vai giù" class="voce7"></a></li>Però giustamente se si va nella HP, i tasti su e giu rimandano all'index del forum, quindi ho provato a cambiarli in:
<li><a href="http://www.idaf.it/#top" title="Vai su" class="voce6"></a></li>più altre varianti, ma non trovo quella giusta per rendere i tasti compatibili con la HP ed tutto il resto delle pagine de Forum
Citazione di: titanium il Mercoledì - 25 Settembre 2013 - 19:01
<li><a href="http://www.idaf.it/#top" title="Vai su" class="voce6"></a></li>
Non devi mettere tutto i llink, ma solo la parte "#top" e "#sc_bottom" (comunque non considerare quello che ho detto prima, stavo pensando ad un altro script).
<li><a href="#top" title="Vai su" class="voce6"></a></li>
perfetto funziona.... grazie
U'altra cosa, cliccando sulle varie funzioni del menù, la nuova pagina si sovrappone alla stessa, che modifica devo fare per farla aprire in un'altra pagina del browser?
Es su questo link:
<li><a href="http://www.idaf.it/index.php?board=19.0" title="Regolamento" class="voce1"></a></li>
EDIT Risolto
<li><a href="http://www.idaf.it/index.php?board=19.0" title="Regolamento" target="_blank" class="voce1"></a></li>
perfetto ;D
se vuoi rendere + largo il menu devi agire così:
riga 3704
ul#navigation li a {
text-decoration: none;
display: block;
margin-left: -2px;
width: 60px;
Aumenta width
Così facendo ti diventerà + largo anche in fase di "riposo".
Per nasconderlo nuovamente dovresti agire su margin-left: -50px; che è un elemento in line all'interno dello script
In tutta onestà, non vedo perché i link si debbano aprire in una nuova finestra: sono tutti link del tuo sito che da altre posizioni possono essere aperti nella stessa pagina...
Ed anche tralasciando qeste considerazioni, il forzare l'apertura in una nuova pagina è una pratica piuttosto irritante...
Vorrei posizionare il menù al centro della pagina, avendo un monitor da 22 pollici non posso regolarmi con i vari monitor e cell degli altri, quindi volevo un valore standard una sorta di "center" uguale per tutti.
La posizione penso vada bene così
perchè questo comando
<li><a href="#top" title="Vai su" class="voce8"></a></li>
quando si è nell'index del forum manda direttamente in alto quindi visualizzando l'header, in vece basta entrare che so in una board e cliccarlo non arriva sino in cima?
averlo caricato sul server il file jquery, potrebbe aver rallentato il caricamento delle pagine?
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jquery.min.js"></script>
o forse è il caso di lasciarlo caricare a google?
Citazione di: titanium il Giovedì - 26 Settembre 2013 - 11:41
perchè questo comando
<li><a href="#top" title="Vai su" class="voce8"></a></li>
quando si è nell'index del forum manda direttamente in alto quindi visualizzando l'header, in vece basta entrare che so in una board e cliccarlo non arriva sino in cima?
Perché nei topic "top" è a livello del già esistente pulsante "vai su", quindi se vuoi che vada "più su", devi cambiare l'id dell'ancora (ed il link ovviamente).
Citazione di: titanium il Giovedì - 26 Settembre 2013 - 11:49
averlo caricato sul server il file jquery, potrebbe aver rallentato il caricamento delle pagine?
Non significativamente.
Quindi dovrei creare ad esempio
<div id="s_top"></div>
e modificare il link del menù in
<li><a href="#s_top" title="Vai su" class="voce8"></a></li>
ma una domanda, il primo codice dove lo vado a piazzare? Ho provato diverse posizioni, ma addirittura cliccandolo mi porta nella HP.
EDIT:RISOLTO
Be tutto sommato una bella funzione molto utile, consigliata a tutti.
Grazie ancora a tutti per il prezioso contributo, senza di voi dove andavo....
Ma diciamo che sto imparando tante cose.
Aggiungo, sarebbe bello creare una Mod con un menù del genere del tutto personalizzabile dall'utente...
Allora devo intervenire su una modifica, certe cose le si capiscono solo con il funzionamento.
Ora il menù al passaggio del mouse si apre, e si apre solo in un solo punto, io voglio rettificare l'animazione, ovvero al passaggio de mouse, si aprono tutti contemporaneamente , tolto il mouse tutti insieme rientrano.
Dove intervengo nel JQuery?
$('#navigation a').stop().animate({'marginLeft':'-50px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-7px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
EDIT: RISOLTO.
$(document).ready(function() {
$('#navigation a').stop().animate({'marginLeft':'-50px'},1000);
$('#navigation > li').hover(
function () {
$('#navigation a').stop().animate({'marginLeft':'-7px'},200);
},
function () {
$('#navigation a').stop().animate({'marginLeft':'-50px'},200);
}
);
});
Presa la mano oggi ho inserito un copyright personalizzato seguendo questo modello:
http://www.gleenk.com/realizzare-carte-animate-con-i-css3/
ora la mia domanda è, ho capito che per proporre un qualcosa in tutte le pagine si interviene sul file index.template.php, ma se invece io vorrei creare una cosa qualsiasi su una pagina specifica, ad esempio dopo essere entrati in una board, come faccio?
Quindi visualizzo ciò che creo solo in quella pagina non in tutte.
AGGIUNGO:
Come sempre accade dopo un lungo lavoro, provo ad aprire con diversi browser ed ognuno lo visualizza a modo suo, il lo vedo cosi:
(https://www.italiansmf.net/forum/proxy.php?request=http%3A%2F%2Fi213.photobucket.com%2Falbums%2Fcc17%2F007maury007%2FSenzatitolo-1_zpsd972024a.jpg&hash=d6c243fba5f4ac7e646721ffa7d08fa475413cb8)
al passaggio del mouse il riquadro si ingrandisce un po, diventa giallo e cliccandolo si va nella pagina relativa.
Voi come lo vedete?
Le diverse visualizzazioni per vari browser a cosa sono dovute, al codice css?
Cmq vi po sto quello che ho fatto:
index.template.php
<div id="container">
<ul id="carte" class="clearfix">
<li id="carta-1">
<a href="http://www.idaf.it/index.php?page=page2634" target="_blank" </a>
<h2>Staff, chi siamo</h2>
</li>
<li id="carta-2">
<a href="http://www.idaf.it/index.php?page=page1395" target="_blank" </a>
<h2>Le Guide "fai da te" - © 2013 </h2>
</li>
<li id="carta-3">
<a href="http://www.idaf.it/index.php?page=page3699" target="_blank" </a>
<h2>It Discussioni Auto Ford - © 2013</h2>
</li>
</ul>
</div>
index.css
/* Carte
------------------------------------------------------- */
#container {
width:1500px;
margin:0 auto;
padding-top:10px;
}
#carte {
margin:0;
padding:0;
}
#carte li {
background:#E0E0E0;
margin:0;
color:#fff;
height:15px;
width:190px;
font-size:10px;
display:block;
float:left;
border:0px solid #666;
padding:5px;
position:relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 10px #000;
box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-text-shadow:10px 10px 10px #fff;
-webkit-text-shadow:0px 0px 0px #fff;
text-shadow:0px 0px 0px #000;
}
#carta-1 {
z-index:1;
left:10px;
top:25px;
}
#carta-2 {
z-index:2;
left:-150px;
top:35px;
}
#carta-3 {
top: 45px;
left:-300px;
z-index:3;
}
#carte li:hover {
z-index:4;
background:#f90;
color:#333;
-moz-text-shadow:1px 1px 0px #fff;
-webkit-text-shadow:1px 1px 0px #fff;
text-shadow:1px 1px 0px #fff;
}
#carta-1:hover {
-moz-transform: scale(1.1) rotate(0deg);
-webkit-transform: scale(1.1) rotate(0deg);
-ms-transform: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
}
#carta-2:hover {
-moz-transform: scale(1.1) rotate(0deg);
-webkit-transform: scale(1.1) rotate(0deg);
-ms-transform: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
}
#carta-3:hover {
-moz-transform: scale(1.1) rotate(0deg);
-webkit-transform: scale(1.1) rotate(0deg);
-ms-transform: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
}
Citazione di: titanium il Domenica - 29 Settembre 2013 - 19:48
ora la mia domanda è, ho capito che per proporre un qualcosa in tutte le pagine si interviene sul file index.template.php, ma se invece io vorrei creare una cosa qualsiasi su una pagina specifica, ad esempio dopo essere entrati in una board, come faccio?
index.template => tutto
BoardIndex => dove c'è la lista delle board
MessageIndex => dove c'è la lista dei topic
Display => una discussione
Citazione di: titanium il Domenica - 29 Settembre 2013 - 19:48
Come sempre accade dopo un lungo lavoro, provo ad aprire con diversi browser ed ognuno lo visualizza a modo suo, il lo vedo cosi:
(https://www.italiansmf.net/forum/proxy.php?request=http%3A%2F%2Fi213.photobucket.com%2Falbums%2Fcc17%2F007maury007%2FSenzatitolo-1_zpsd972024a.jpg&hash=d6c243fba5f4ac7e646721ffa7d08fa475413cb8)
al passaggio del mouse il riquadro si ingrandisce un po, diventa giallo e cliccandolo si va nella pagina relativa.
Prima cosa guardiamo l'html che hai usato:
<ul id="carte" class="clearfix">
<li id="carta-1">
<a href="http://www.idaf.it/index.php?PHPSESSID=8f31e796e2b9d3043bbde2cfb0fa333d&page=page2634" target="_blank" </a>
<h2>Staff, chi siamo</h2>
</li>
<li id="carta-2">
<a href="http://www.idaf.it/index.php?PHPSESSID=8f31e796e2b9d3043bbde2cfb0fa333d&page=page1395" target="_blank" </a>
<h2>Le Guide "fai da te" - © 2013 </h2>
</li>
<li id="carta-3">
<a href="http://www.idaf.it/index.php?PHPSESSID=8f31e796e2b9d3043bbde2cfb0fa333d&page=page3699" target="_blank" </a>
<h2>It Discussioni Auto Ford - © 2013</h2>
</li>
</ul>0) i tag devono: o essere "auto-chiusi" (tipo img), oppure devono essere aperti <a> e poi chiusi </a>. Il tuo tag a e sbagliato perché quello di apertura non è propriamente scritto (manca il ">" finale)
1) i link devono "circondare" il testo che deve essere cliccabile.
2) un tag h2 (ed in generale ogni hX) non può essere messo *dentro* ad un a.
Quindi il tuo codice dovrebbe essere:
<ul id="carte" class="clearfix">
<li id="carta-1">
<h2><a href="http://www.idaf.it/index.php?PHPSESSID=8f31e796e2b9d3043bbde2cfb0fa333d&page=page2634" target="_blank">Staff, chi siamo</a>
</h2>
</li>
<li id="carta-2">
<h2><a href="http://www.idaf.it/index.php?PHPSESSID=8f31e796e2b9d3043bbde2cfb0fa333d&page=page1395" target="_blank">Le Guide "fai da te" - © 2013</a>
</h2>
</li>
<li id="carta-3">
<h2><a href="http://www.idaf.it/index.php?PHPSESSID=8f31e796e2b9d3043bbde2cfb0fa333d&page=page3699" target="_blank">It Discussioni Auto Ford - © 2013</a>
</h2>
</li>
</ul>Citazione di: titanium il Domenica - 29 Settembre 2013 - 19:48
Voi come lo vedete?
Tutti ammassati.
Adesso non posso controllare il css...sorry.
Citazione di: titanium il Domenica - 29 Settembre 2013 - 19:48
Le diverse visualizzazioni per vari browser a cosa sono dovute, al codice css?
1) al codice html sbagliato come ho scritto sopra (diversi browser interpretano diversamente codice erroneamente annidato/scritto perché non seguendo lo standard cercando di "immaginare" cosa l'autore volesse fare, ma ovviamente ognuno parte da assunzioni diverse e quindi arriva a risultati diversi),
2) al fatto che magari non tutti i browser supportano allo stesso modo i css3,
3) ad altre differenze tra browser.
ETA: se ci tieni a supportare diverse risoluzioni: hai messo troppi pulsanti.
Ok adeguato, grazie per la preziosissima delucidazione.
Per quando riguarda il css, ho scelto io di metterli sovrapposti, come nella foto che ho postato.
Okay... I gusti sono gusti, ma messi così la prima cosa che mi viene in mente è che sia un errore, dato che dei primi due nemmeno si legge quel che c'è scritto...
Ho un problema grossissimo, gli utenti vedono male il sito sui dispositivi ecco come:
http://www.howtogomo.com/it/d/esegui-il-test-del-t/#mobile-meter
basta inserire www.idaf.it
Mi serve una mano urgente...
EDIT:
Ricordo che le ultime modifiche sono state:
MEnu laterale a comparsa lato sx
Frecce su e giu lato destro,
Copyright personalizzato.
pare che il problema si risolto rimuovento il copyright personalizzato ovvero:
index.template.php
<div id="container">
<ul id="carte" class="clearfix">
<li id="carta-1">
<h2><a href="http://www.idaf.it/index.php?PHPSESSID=8f31e796e2b9d3043bbde2cfb0fa333d&page=page2634" target="_blank">Staff, chi siamo</a>
</h2>
</li>
<li id="carta-2">
<h2><a href="http://www.idaf.it/index.php?PHPSESSID=8f31e796e2b9d3043bbde2cfb0fa333d&page=page1395" target="_blank">Le Guide "fai da te" - © 2013</a>
</h2>
</li>
<li id="carta-3">
<h2><a href="http://www.idaf.it/index.php?PHPSESSID=8f31e796e2b9d3043bbde2cfb0fa333d&page=page3699" target="_blank">It Discussioni Auto Ford - © 2013</a>
</h2>
</li>
</ul>
</div>
e index.css
/* Copyright personalizzato.
------------------------------------------------------- */
#container {
width:1500px;
margin:0 auto;
padding-top:10px;
}
#carte {
margin:0;
padding:0;
}
#carte li {
background:#E0E0E0;
margin:0;
color:#fff;
height:15px;
width:190px;
font-size:10px;
display:block;
float:left;
border:0px solid #666;
padding:5px;
position:relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 10px #000;
box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-text-shadow:10px 10px 10px #fff;
-webkit-text-shadow:0px 0px 0px #fff;
text-shadow:0px 0px 0px #000;
}
#carta-1 {
z-index:1;
left:10px;
top:25px;
}
#carta-2 {
z-index:2;
left:-150px;
top:35px;
}
#carta-3 {
top: 45px;
left:-300px;
z-index:3;
}
#carte li:hover {
z-index:4;
background:#f90;
color:#333;
-moz-text-shadow:1px 1px 0px #fff;
-webkit-text-shadow:1px 1px 0px #fff;
text-shadow:1px 1px 0px #fff;
}
#carta-1:hover {
-moz-transform: scale(1.1) rotate(0deg);
-webkit-transform: scale(1.1) rotate(0deg);
-ms-transform: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
}
#carta-2:hover {
-moz-transform: scale(1.1) rotate(0deg);
-webkit-transform: scale(1.1) rotate(0deg);
-ms-transform: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
}
#carta-3:hover {
-moz-transform: scale(1.1) rotate(0deg);
-webkit-transform: scale(1.1) rotate(0deg);
-ms-transform: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
}
c'è qualcosa che rende le pagine a metà sui sistemi Android, forse non legge i Css3