|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
 Salve a Tutti! Ho iniziato ad usare HTML-kit....GRANDE! (e Grande chi me lo suggerì...1024 Grazie!) Ho preso confidenza coi CSS (La cosa più utile per me, almeno per ora, è il {position: ....} OK, mi devo scrivere tutto ma almeno posso mettere ogni elemento ESATTAMENTE dove voglio!! Ora sto costruendo la pag. con: *.htm + *.css +...... +*.js Ora però ho un problema coi Rollover: Ne ho messo uno e funziona, ok .....ma ne devo mettere altri 5 !!!! Gasp....si, Proprio Devo!!  Mi aiutate a capire come devo impostare il tutto? Ho provato un paio di tutorials ma non ho capito bene.. Vi ringrazio, A presto.
|
|
|
|
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
Per rollover penso tu intenda i bottoni (associati ai link) che cambiano colore ? Puoi farli usando i CSS o con javascript. La prima soluzione mi pare più moderna e non devi necessariamente ricorrere a programmi di grafica per disegnare i bottoni stessi. Ti do un link utile: http://software.aiutamici.com/software?ID=11282Ciao.
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
Si, scusa ma ho letto talmente tante volte 'sta parola che l'ho data per scontata. Prima di scaricare il prog. ti dico quello che vorrei ottenere:  Bottone=Mattonella  Bottone=Mattonella che, schiacciata giù fa apparire la voce del menù (pensavo di mettere un <p> sotto la prima immagine e, quando appare la seconda dargli uno z-index più basso del tag <p> in modo da fare apparire il testo Mi servono 5 di questi pulsanti non so se il programma che mi consigli gestisce solo pulsanti predefiniti o ci posso mettere immagini create da me. Che mi dici?
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
Sinceramente non ho mai visto soluzioni di questo tipo: di solito il testo è inserito nel pulsante-immagine. A prima vista ho però l'impressione che la tua idea non funzioni, perché non conosco un rollover che agisca sul testo. Non conosco bene neanche il programma che c'è su Aiutamici; da un bel pezzo non uso più i pulsanti-immagine rollover ma preferisco invece utilizzare i CSS (che trovo più eleganti e, spesso, più facili da adattare alle personali esigenze). Un tempo usavo Namo 3 per i rollover, ma ho abbandonato anche questo web editor poiché talvolta il codice era poco compatibile con Firefox. Ti posso postare dei link che potrebbero servirti per i codici: http://www.allwebfree.it/articolo_javascript_rollover_immagini.phphttp://www.allwebfree.it/articolo_javascript_precarica_immagini.phphttp://javascript.html.it/articoli/leggi/1492/rollover-istantaneo/http://www.mrwebmaster.it/script/effetto-rollover_329.htmlCiao.
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
archimede70 ha scritto:Bottone=Mattonella che, schiacciata giù fa apparire la voce del menù (pensavo di mettere un <p> sotto la prima immagine e, quando appare la seconda dargli uno z-index più basso del tag <p> in modo da fare apparire il testo Così non può funzionare...  Se sei curioso di vedere una possibile soluzione (con l'uso dei soli CSS), mi sono inventato questo giochino per te! Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it-IT"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Pagina di prova</title> </head> <body> <style type="text/css"> <!-- a.pulsante { background:url('http://www.iouppo.com/life/img/02a5e5a6ba14356324c6baed215d9a99.png') no-repeat 0 0; display:block; height:96px; width:96px; line-height:85px; text-decoration:none; font-weight:bold; text-indent:-50000000px; margin-bottom:3px; } a.pulsante:hover { background: url('http://www.iouppo.com/life/img/02a5e5a6ba14356324c6baed215d9a99.png') no-repeat 0 -97px; display:block; height:96px; width:96px; line-height:85px; text-decoration:underline; font-weight:bold; text-indent:14px; color:red; } --> </style> <div id="content"> <a class="pulsante" href="http://www.aiutamici.com/" target="_blank">Clicca qui</a> <a class="pulsante" href="http://www.aiutamici.com/" target="_blank">Clicca qui</a> <a class="pulsante" href="http://www.aiutamici.com/" target="_blank">Clicca qui</a> <a class="pulsante" href="http://www.aiutamici.com/" target="_blank">Clicca qui</a> </div> </body> </html> Non devi far altro che copiare questo codice, incollarlo in un nuovo documento vuoto di Html-kit (Doctype e prologo html ci sono già), salvarlo e aprirlo con un browser qualunque...  L'immagine di sfondo che funge da rollover l'ho creata io partendo dai tuoi due pulsanti e l'ho caricata su IoUppo:  I link, che sono attivi, non rimandano a nessun sito pericoloso: schiaccia pure e vedi un po' dove vieni indirizzato! Questo è un esempio un po' avanzato: se qualcosa non ti è chiaro, posso commentartelo. Ad ogni modo, la tecnica del rollover è molto importante e suscita la creatività. Se vuoi una sintesi completa su tutto ciò che bisogna sapere sul rollover, ecco un gran bell'articolo --> I fondamenti del rollover grafico: immagini, sprite e text-replacement (HTML.it). Un consiglio: concentrati sui Fast-rollover...
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
Wubullo, sei pazzescamente bravo. L'unica cosa su cui non concordo è definire il sito dell'esempio come non pericoloso ... Ciao.
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Eco, sul lavoro nessuno mi fa tanti complimenti... Ti faccio una proposta: non è che ti vada di assumermi? Scherzi a parte: grazie, davvero, sei troppo buono! P.S.: ho risistemato il codice che avevo postato sopra; funziona allo stesso modo, ho solo aggiunto una altezza definita ai quadratini e dato alle istruzioni un ordine più sensato. P.P.S.: cambiando il valore di display in entrambe le dichiarazioni (da block a inline-block), i quadratini vengono messi in fila orizzontalmente.
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
Non sono io che sono buono, sei tu che sei veramente bravo. E non scherzo.
Ciao.
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
wubullo ha scritto:P.P.S.: cambiando il valore di display in entrambe le dichiarazioni (da block a inline-block), i quadratini vengono messi in fila orizzontalmente. Grazie WuBullo (Kenobi) aggiungerei; La Forza è con te !!.... E da Padawan avrei un po' di domande da pòrti: Sto imparando pian piano le potenzialità dei CSS (infatti avevo abbandonato l'idea del JS in favore di questi) e in particolare attraverso l'uso di ID (e CLASS), credo. 1)domanda: Che significa l'uso di DIV id "content" se non lo avevi definito nel CSS? 2)domanda: Che numero strano hai usato nel primo TEXT-INDENT:-50000000 !! Che significa? (forse che il testo c'è ma è microscopico?) 3)domanda: Se ho capicchiato un po': Posso scrivere nel CSS- a.pulsante1 {..... || a.pulsante2 {.....ecc e nel BODY- <a id="pulsante1..... || <a id="pulsante2.......... ecc? IL fatto è che li devo posizionare sulla stessa linea (grazie infatti per l'aggiunta di inline-block) ma distanziati di 4px l'uno dall'altro.(o forse di più) Io avevo usato 4 ID diversi (uno per ogni pulsante) e li avevo richiamati con i <div id.....> ma andando a naso in verità! ...sto cercando di capire la logica con cui i CSS gestiscono i contenuti Per ora GRAZIE!! e complimenti.  PS. (domani mi vado a leggere l'articolo)
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
archimede70 ha scritto:1)domanda:
Che significa l'uso di DIV id "content" se non lo avevi definito nel CSS? In questo caso non significa nulla perché effettivamente non è definito tra le regole di stile: l'ho messo per abitudine... archimede70 ha scritto:2)domanda:
Che numero strano hai usato nel primo TEXT-INDENT:-50000000 !!
Che significa? (forse che il testo c'è ma è microscopico?) Questo è un trucco da vecchio lupo di mare... In pratica significa che il testo è indentato di un numero di pixel astronomico verso sinistra... E' solo un trucco per far vagare quel testo (che pure c'è, effettivamente) fuori dal riquadro del browser e fare in modo che non sia visibile: il numero -50000000 è messo a caso, va bene qualunque numero a patto che sia esagerato! archimede70 ha scritto:3)domanda: Se ho capicchiato un po': Posso scrivere nel CSS- a.pulsante1 {..... || a.pulsante2 {.....ecc e nel BODY- <a id="pulsante1..... || <a id="pulsante2.......... ecc? IL fatto è che li devo posizionare sulla stessa linea (grazie infatti per l'aggiunta di inline-block) ma distanziati di 4px l'uno dall'altro.(o forse di più) Io avevo usato 4 ID diversi (uno per ogni pulsante) e li avevo richiamati con i <div id.....> ma andando a naso in verità! ...sto cercando di capire la logica con cui i CSS gestiscono i contenuti Attenzione. I selettori CSS sono due: id e classi. Tutto ciò che ha un ID viene richiamato in una dichiarazione CSS anticipando il valore di id con un cancelletto: #container {regole .css}. Perciò: Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it-IT"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Questa è una pagina di prova</title> </head> <body> <style type="text/css"> #container { width:850px; height:550px; margin: 20px auto 20px auto; padding:5px; text-align:left; background-color: #FFFF99; border:3px solid #000000; } </style> <div id="container"></div> </body> </html> Tutto ciò che ha una classe viene richiamato in una dichiarazione CSS anticipando il valore della classe con un punto fermo: .pulsante {regole .css} (vale l'esempio del codice postato nella mia precendente risposta). Le classi sono comode quando devi associare un certo numero di istruzioni sempre uguali a tutti gli elementi che hanno la stessa classe. In questo caso, non serve dare ai pulsanti quattro ID diversi, ma puoi gestire tutto con un'unica classe. Se vuoi distanziare di più i riquadri (disposti orizzontalmente), vedi un po' che succede a cambiare margin-bottom:3px; con margin-right:10px; nelle proprietà di a.pulsante! Ciao e a presto
|
|
Rank: AiutAmico
Iscritto dal : 5/15/2008
Posts: 236
|
archimede70 ha scritto: Salve a Tutti! Ho iniziato ad usare HTML-kit....GRANDE! (e Grande chi me lo suggerì...1024 Grazie!) Ho preso confidenza coi CSS (La cosa più utile per me, almeno per ora, è il {position: ....} OK, mi devo scrivere tutto ma almeno posso mettere ogni elemento ESATTAMENTE dove voglio!! Ora sto costruendo la pag. con: *.htm + *.css +...... +*.js Ora però ho un problema coi Rollover: Ne ho messo uno e funziona, ok .....ma ne devo mettere altri 5 !!!! Gasp....si, Proprio Devo!! Mi aiutate a capire come devo impostare il tutto? Ho provato un paio di tutorials ma non ho capito bene.. Vi ringrazio, A presto. Hai scaricato la versione HTML-Kit 292? Mi sembra sia l'unica free. Bel prodotto.
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
marquis ha scritto:Hai scaricato la versione HTML-Kit 292? Mi sembra sia l'unica free. Bel prodotto. Esatto!A me,che non ho pratica con Tags e loro nidificaz.-sintassi e attributi leciti serve per andare con ordine ma per chi sa cosa scrivere è proprio un Buon Dattilografo che dà il tempo a chi crea di stare focalizzato sull'idea anziché perdere tempo a scrivere e,a volte,nella fretta correggere!
Grazie dei chiarimenti WUBULLO,vado subito a sperimentare...(ma prima son curioso di leggere l'articolo..) A Presto. GIGA-ciaos a tutti.
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Archimede, vista la piega che ha preso la discussione, potresti rinominare il topic con una cosa del tipo "Rollover con i css" o simili? In modo tale che chi, in futuro, avesse lo stesso problema possa risalire più facilmente a questa discussione.
Ciao e a presto
|
|
Rank: AiutAmico
Iscritto dal : 5/15/2008
Posts: 236
|
archimede70 ha scritto:marquis ha scritto:Hai scaricato la versione HTML-Kit 292? Mi sembra sia l'unica free. Bel prodotto. Esatto!A me,che non ho pratica con Tags e loro nidificaz.-sintassi e attributi leciti serve per andare con ordine ma per chi sa cosa scrivere è proprio un Buon Dattilografo che dà il tempo a chi crea di stare focalizzato sull'idea anziché perdere tempo a scrivere e,a volte,nella fretta correggere!
Grazie dei chiarimenti WUBULLO,vado subito a sperimentare...(ma prima son curioso di leggere l'articolo..) A Presto. GIGA-ciaos a tutti. Terrò presente questo programmino caso mai avessi voglia di rimettermi in allenamento con l'html (1 giorno per scrivere una pagina semplice quando FrontPage ci mette pochi minuti è un pò troppo per me  ).
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
Marquis, potresti provare KompoZer: esiste anche la versione che non occorre installare (Zip archive): http://www.kompozer.net/download.phpCiao.
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
wubullo ha scritto:Archimede, vista la piega che ha preso la discussione, potresti rinominare il topic con una cosa del tipo "Rollover con i css" o simili? In modo tale che chi, in futuro, avesse lo stesso problema possa risalire più facilmente a questa discussione. Ne sarei felicissimo... Ma non so come si fa! -Altre 2 cosette: 1 Come si fa a far aprire il link al posto della pagina attuale? (a schermo intero, intendo) Con : target="#" non mi è riuscito.... 2 Sul link "visited" rimane il contorno della "mattonella" Si può fare in modo che non appaia? ho provato a mettere text-decoration:none sia nel css (definendo a.visited {text-dec...none} sia nel div #content......... niente, acc! - - - - - - - - - - - - - - - - - - - - - - - Non vedo l'ora di finire e di condividere con voi "Michelangioleschi" amici....
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
archimede70 ha scritto:wubullo ha scritto:Archimede, vista la piega che ha preso la discussione, potresti rinominare il topic con una cosa del tipo "Rollover con i css" o simili? In modo tale che chi, in futuro, avesse lo stesso problema possa risalire più facilmente a questa discussione. Ne sarei felicissimo... Ma non so come si fa! Tutte le volte che schiacci su "Edit", compare la maschera in cui puoi modificare il testo di un tuo messaggio. In cima ad essa, solo a te (perché hai aperto tu il topic), compare anche il titolo del topic: scrivici dentro per cambiarlo! Quanto alla questione del target, se vuoi che la pagina a cui il link rimanda si apra al posto di quella corrente... Togli proprio tutta la stringa target="_blank" e lascia solo <a href="eccetera">. Per il "visited", ti faccio una domanda. InterrogazioneChe significa "a .visited"? C'è differenza con "a :visited"? Risposta... Ciao!
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
Meno male, questa la so (ma non la dico, perché non sono in classe durante l'interrogazione e non posso suggerire con un link ...).
Scherzi a parte, quando si lavora con i codici, bisogna stare attentissimi a ciò che si batte. Un "." o un ":" hanno significati del tutto diversi. Ricordo che ai bei tempi, quando programmavo in Basic ... beh, è un'altra storia.
Ciao.
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
ecofive ha scritto:Meno male, questa la so (ma non la dico, perché non sono in classe durante l'interrogazione e non posso suggerire con un link ...) Eco, tu non puoi rispondere perché non sei studente, ma professore di HTML...
|
|
|
Guest |
