Visualizza Versione Completa : Aiutini con l'html



gabrylux
23-02-2012, 02:16
Salve a tutti ragazzi, apro questo topic per chiede qualche suggerimento con l'html, visto che sto creando un sito su altervista ma ho bisogno di alcuni aiuti..
Non me la cavo male, anzi.. siccome altervista è un po limitato purtroppo non posso pretendere il massimo ^^
Ma passiamo al dunque.. Qualcuno sa dirmi come si crea un "continua a leggere" negli articoli? In diversi siti ho visto questa scritta e bastava un click per far comparire il resto del testo! Ho cercato un po ovunque ma non ho trovato ne codici e ne altro.. Qualcuno bravo che mi illumina??? ^^

The Stig
23-02-2012, 08:34
Ho trovato questo Come rendere accessibili i link “continua a leggere” - TomStardust.com (http://www.tomstardust.com/archives/come-rendere-accessibili-i-link-continua-a-leggere/) e su questo ci sono ottime guide sull'html che penso possa esserti utili HTML.it (http://www.html.it/)

gabrylux
23-02-2012, 11:23
Ho trovato questo Come rendere accessibili i link “continua a leggere” - TomStardust.com (http://www.tomstardust.com/archives/come-rendere-accessibili-i-link-continua-a-leggere/) e su questo ci sono ottime guide sull'html che penso possa esserti utili HTML.it (http://www.html.it/)

Avevo letto questo articolo stig e l'ho provato ma mi pare non funzioni, mi crea una stringa continua e basta :( A me servirebbe qualcosa come il tasto spoiler che cliccandoci mi compare il resto del contesto T_T

The Stig
23-02-2012, 11:38
Si infatti è un simil spoiler. Il nome usato è "post espandibili" Su google si trovano molti tutorial. Ne ho trovati alcuni, spero ti aiutino Creare riassunti di post espandibili (leggi tutto il resto del post) (http://trucchi-suggerimenti-guida.blogspot.com/2008/02/riassunti-post-espandibili-blogger.html) - Risorse per blogger: Post espandibili in blogger (http://risorse-blogger.blogspot.com/2008/01/post-espandibili-in-blogger.html) - Come posso creare riassunti di post espandibili? - Guida di Blogger (http://support.google.com/blogger/bin/answer.py?hl=it&answer=42215)

Lele0086
23-02-2012, 11:39
C'è un ottimo sito per autodidatti sull'html, l'unico inconveniente è che è in inglese, ma è il più completo che io conosca: W3Schools Online Web Tutorials (http://www.w3schools.com)

gabrylux
23-02-2012, 16:00
Si infatti è un simil spoiler. Il nome usato è "post espandibili" Su google si trovano molti tutorial. Ne ho trovati alcuni, spero ti aiutino Creare riassunti di post espandibili (leggi tutto il resto del post) (http://trucchi-suggerimenti-guida.blogspot.com/2008/02/riassunti-post-espandibili-blogger.html) - Risorse per blogger: Post espandibili in blogger (http://risorse-blogger.blogspot.com/2008/01/post-espandibili-in-blogger.html) - Come posso creare riassunti di post espandibili? - Guida di Blogger (http://support.google.com/blogger/bin/answer.py?hl=it&answer=42215)
Perfetto penso sia proprio quello che cercavo adesso gli ho un occhio,grazie!! :):)


C'è un ottimo sito per autodidatti sull'html, l'unico inconveniente è che è in inglese, ma è il più completo che io conosca: W3Schools Online Web Tutorials (http://www.w3schools.com)
Può sempre essere utile :) Ultimamente sto leggendo molto su HTML/XHTML | xhtml.HTML.it (http://xhtml.html.it) ed è un buon sito, non spiega tutto ma l'essenziale diciamo che si trova ^^

Un altra cosa ragazzi.. scusate se sono esigente ma sapete dirmi come faccio a inserire una foto su altra foto con un collegamento diretto ad una pagina?
Mi spiego meglio, ho una foto e dentro questa foto gli voglio mettere un banner o un testo dove una volta inserita sul mio sito è possibile cliccare sul banner o testo (a seconda di cosa si vuole mettere) e indirizzarti su quel link.. ho provato con photo impact e sul programma stesso funzionava ma quando l'ho salvata e impostata sulla mia pagina mi compariva come una normale immagine senza collegamenti :(
Guardate questo sito ad esempio http://www.diretta.it/ nell'immagine dove si vede il calciatore è possibile cliccare su diretta.it sempre nell'immagine, mentre il resto rimane non cliccabile

The Stig
23-02-2012, 16:28
Perfetto penso sia proprio quello che cercavo adesso gli ho un occhio,grazie!! :):)


Può sempre essere utile :) Ultimamente sto leggendo molto su HTML/XHTML | xhtml.HTML.it (http://xhtml.html.it) ed è un buon sito, non spiega tutto ma l'essenziale diciamo che si trova ^^

Un altra cosa ragazzi.. scusate se sono esigente ma sapete dirmi come faccio a inserire una foto su altra foto con un collegamento diretto ad una pagina?
Mi spiego meglio, ho una foto e dentro questa foto gli voglio mettere un banner o un testo dove una volta inserita sul mio sito è possibile cliccare sul banner o testo (a seconda di cosa si vuole mettere) e indirizzarti su quel link.. ho provato con photo impact e sul programma stesso funzionava ma quando l'ho salvata e impostata sulla mia pagina mi compariva come una normale immagine senza collegamenti :(
Guardate questo sito ad esempio Diretta.it: Risultati calcio in tempo reale e partite in diretta (http://www.diretta.it/) nell'immagine dove si vede il calciatore è possibile cliccare su diretta.it sempre nell'immagine, mentre il resto rimane non cliccabile
Facendo "ispeziona elemento" con Chrome ho trovato questo. Ti ho selezionato la parte interessata del banner. Spero si veda 2401

Manuc95
23-02-2012, 16:49
inanzitutto: per il continua a leggere ti basta prendere un codice dello spoiler e modificarlo a tuo piacimento togliendo magari il bottone spoiler e inserendoci la scritta continua a leggere.

per la seconda ti basta inserire un'immagine normale e crearci sopra una "map code"
il lavoro è un pochetto complicato ma se ci perdi un pò di tempo ti viene ottimo
se ti serve una guida per creare le map code sulle immagini vai qui: Le mappe di immagine | Guida HTML | Xhtml.HTML.it (http://xhtml.html.it/guide/lezione/1680/le-mappe-di-immagine/) è il miglior sito per l'html che puoi trovare in rete!


p.s. the stig: non fidarti di "Ispeziona Elemento" perchè molte volte il codice interessato è difficile da trovare perchè nascosto :)

gabrylux
23-02-2012, 17:19
Facendo "ispeziona elemento" con Chrome ho trovato questo. Ti ho selezionato la parte interessata del banner. Spero si veda 2401

L'immagine è troppo ridotta stig, non si capisce XD


inanzitutto: per il continua a leggere ti basta prendere un codice dello spoiler e modificarlo a tuo piacimento togliendo magari il bottone spoiler e inserendoci la scritta continua a leggere.

per la seconda ti basta inserire un'immagine normale e crearci sopra una "map code"
il lavoro è un pochetto complicato ma se ci perdi un pò di tempo ti viene ottimo
se ti serve una guida per creare le map code sulle immagini vai qui: Le mappe di immagine | Guida HTML | Xhtml.HTML.it (http://xhtml.html.it/guide/lezione/1680/le-mappe-di-immagine/) è il miglior sito per l'html che puoi trovare in rete!


Infatti mi era venuta l'idea di creare un pulsante spoiler per semplificarmi la vita :asd:
Il codice sarebbe il seguente?
<div id='spoiler_1'></div>
<button onClick="document.getElementById('spoiler_1').innerHTML = 'Contenuto dello spoiler';">Spoiler</button>
Perchè avevo provato a inserire il testo dove dice Contenuto dello spoiler ma è uscito un casino assurdo.. non so se avevo sbagliato io o il codice è errato :mmm

Ps: Mi correggo, ho riprovato con lo spoiler e funge, però se dentro il contesto gli metto il link diretto di una foto con altri codici html non va più, come mai?

Manuc95
23-02-2012, 20:24
prova uno di questi due, io uso il primo di solito ma anche il secondo dovrebbe funzionare:

Sostituisci APRI SPOILER con il link che vuoi vedere (nel tuo caso continua a leggere) e CONTENUTO SPOILER con il testo che vuoi che venga aperto..

<div class="spoiler">
<a href="#" onclick="showSpoiler(this); return false">APRI SPOILER</a>
<div class="inner" style="display:none;">
CONTENUTO SPOILER
</div>
</div>
poi nella head devi inserire:

.spoiler {
border:1px solid #ddd;
padding:3px; }
.spoiler .inner {
border:1px solid #eee;
padding:3px;margin:3px; }

function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none"; }



Altrimenti prova questo:

<div class="smallfont" style="margin-bottom: 2px;"><b><font size="2">Archivio Edizioni:</font></b> <input value="Mostra" style="margin: 0px; padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Nascondi'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Mostra'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> TESTO TESTO</div>


se riesci usa il primo che è migliore.. dimmi se ti funziona.

per la map code tutto apposto?

gabrylux
24-02-2012, 12:05
Ho provato come hai detto tu manu, il tasto spoiler mi esce però quando ci clicco mi riporta in cima alla pagina senza aprire il contenuto, dove sbaglio?O_O
Potresti farmi un esempio con questa riga? Così mi regolo meglio e prendo spunto (Non ho inserito l'head perchè non capisco dove mettere quel codice forse è questo il problema.. :mmm

PROVA SPOILER <div class="spoiler"><a href="#" onclick="showSpoiler(this); return false">APRI SPOILER</a><div class="inner" style="display:none;"> <center><font color="FF0033"><font size="4">BOX regala 50 Gb di spazio Cloud a tutti gli utenti Android</center></b></font> <br><center><img src=" http://i41.tinypic.com/nqz404.png " /></center><br/></br><b><font color="FFFFFF"> Box, uno dei servizi di spazio libero in cloud più noto e utilizzato in mobilità, si aggiorna per l'utenza Android e offre delle interessanti novità in termini di funzionalità. </div></div>

Comunque riguardo il map code niente da fare, ho letto un po quel sito che mi hai linkato ma li chiede di mettere le coordinate O_O Troppo difficile! XD

wipol
24-02-2012, 12:13
Il problema è proprio che nella head mancano quei pezzi di codice, che sono rispettivamente degli stili e una funzione js (che è indispensabile per far funzionare lo spoiler ;))

metti così il codice che ha postato manu (nella head):



<STYLE type="text/css">
.spoiler {
border:1px solid #ddd;
padding:3px; }
.spoiler .inner {
border:1px solid #eee;
padding:3px;margin:3px; }
</STYLE>

<SCRIPT type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none"; }
</SCRIPT>

Manuc95
24-02-2012, 14:01
allora quel codice lo devi inserire nella head, cioè tra i tag <HEAD> e </HEAD> che si trovano all'inizio del documento.

la map code è una cavolata, le cordinate non sono altro che i pixel, per vederli ti basta aprire l'immagine con paint e spostandoti con il cursore sopra di essa in basso a destra vedi dei numeri, quelle sono le coordinate, ovvero la distanza in pixel (x e y) dall'angolo in alto a sinistra.

gabrylux
05-03-2012, 13:42
Alla fine tutto sommato ci sono riuscito :)
Grazie a tutti per gli aiuti :D
Se volete dare un occhiata al mio sito il link è questo :

Homepage (http://gabrytodroid.altervista.org)