個人檔案Arti e bagagli相片部落格清單更多 工具 說明
4月2日

Mary Poppins

Stiamo per spremere le ultime gocce di sangue dalla rapa. Di cosa parliamo oggi? Parliamo di Mary Poppins.  Vi siete mai chiesti come facesse Mary Poppins a tenere tutta quella roba nella sua borsa? Io non ci dormivo la notte. Ho fatto una piccola ricerca e oggi posso svelarvi il segreto:

la borsa di Mary Poppins aveva lo scroll!

Lo scroll è quella barra che trovate alla destra della vostra finestra (dove state guardando? Sto parlando del monitor ) e che vi permette di vedere anche il resto del mio blog che stà più in basso e che adesso non vedete. Oppure è l'effetto che ottengono quelli che hanno l'apposita rotellina sul mouse. Quando scriviamo lunghi interventi (o usiamo caratteri molto grandi) diventa difficile per chi visita il nostro blog distinguere o trovare gli interventi precedenti, i cui titoli si perdono in un mare di parole. Se l'area dei nostri scritti fosse più limitata il problema non ci sarebbe, ma avremmo poco spazio per i nostri pensieri. La possibilità di accedere al codice HTML del nostro editor può risolvere brillantemente la questione.

Ridimensioniamo il blog

Tra le cose che possiamo fare quando costruiamo la nostra scatola c'è la possibilità di definirne le dimensioni. Riprendiamo la riga di codice che abbiamo scritto ieri:

<DIV style="BACKGROUND-COLOR:#ccccff;BORDER:#336699 6px dotted; WIDTH:100%;HEIGHT:100%;">

Troviamo due parametri che definiscono la grandezza della scatola. WIDTH: (larghezza) e HEIGHT: (che sarebbe altezza, ma la intendiamo come lunghezza in questo caso). Sono entrambi impostati al 100% e questo vuol dire che il nostro testo sarà automaticamente adattato in larghezza, per sfruttare il massimo spazio disponibile sul video, e in lunghezza, per contenere tutto il nostro testo.
Questa indicazione può essere sostituita da una nostra dimensione utilizzando i pixel invece del percento (es. WIDTH:350px; HEIGHT:500px;). Avremo così una scatola di dimensioni fisse (decise da noi), col relativo problema che non si allunga automaticamente se il nostro testo è troppo lungo. Quando succede questo abbiamo quello che tecnicamente si definisce un overflow. Per caso OVERFLOW: ... ; è il parametro che dobbiamo aggiungere alla riga di codice per rendere possibile la gestione dell'effetto Mary Poppins.

Anche OVERFLOW: (al pari del tipo di bordo, come dicevamo ieri ricordate?) sfrutta una terminologia convenzionale, ma a noi, in questo contesto basta un solo valore

OVERFLOW: scroll;

Questo dice all'editor che per visualizzare il contenuto che supera la dimensione della scatola vogliamo utilizzare le barre di scorrimento, o la rotellina del mouse.

Comunque, per chi fosse interessato a fare esperimenti, vi scrivo la lista completa dei termini utilizzabili:

auto
hidden
inherit
scroll
visible

 

La nostra prima riga di codice diventera quindi qualcosa di simile:

<DIV style="BORDER: #0000ff 3px double; OVERFLOW: scroll; WIDTH: 50%; HEIGHT: 170px; BACKGROUND-COLOR: #66ff99">

Una cosa che si intuiva, ma che non ho mai detto è che dentro una scatola ce ne possono stare altre. Fino ad ora vi ho solo detto di mettere la prima riga di codice in testa al vostro blog e la seconda (il coperchio) in coda. Ma nessuno vi impedisce, una volta fatto questo, di entrare in modalità HTML, individuare una parte di testo che vi interessa e intrappolarla tra due righe di codice di una nuova scatola. E così via.
Non dimenticate di chiudere sempre il coperchio con </DIV>

Divertitevi.

 

Per quanto riguarda i bordi trattati ieri, valerana83 li ha provati tutti. Fate un salto sul suo blog per vederne i risultati. Grazie a valerana83 e a tutti quelli che passano di qua.

 

回應 (42)

請稍候...
很抱歉,您輸入的回應過長。請縮短您的回應。
您尚未輸入內容,請再試一次。
很抱歉,目前無法新增您的回應,請稍後再試。
若要新增回應,您的父母必須先給您權限。要求權限
您的家長已關閉回應功能。
很抱歉,目前無法刪除您的回應,請稍後再試。
您已超過每日回應上限次數,請於 24 小時後再試一次。
由於系統顯示您可能傳送垃圾郵件給其他使用者,因此您帳號中的回應功能已遭停用。 如果您認為自己帳號遭錯誤停用,請連絡 Windows Live 支援
請完成下列安全檢查,以完成回應。
您輸入的安全檢查字元必須與圖片或音訊中的字元相符。

若要新增回應,請以您的 Windows Live ID 登入 (若您使用 Hotmail、Messenger 或 Xbox LIVE,則您已擁有 Windows Live ID)。登入


沒有 Windows Live ID?註冊

MilkshakeN​ami撰寫:
...ehm, grazie per il link... ho fatto tutto, solo che non so inserire il codice...ho provato a piazzarlo dopo OVERFLOW: scroll;, poichè mi sembrava il posto + ovvio, ma è evidente che sbaglio.....mio suggeriresti dove devo metterlo?
9 月 10 日
MilkshakeN​ami撰寫:
...hoLa, grazie, sono riuscita a mettere lo scroll...unico problema: esiste un modo, non so codici da qualche parte, per cambiare stile dello scroll stesso?, scusami a quanto ho capito te l hanno chiesto in 20000 ma nn vedo risposte...
mi fai un favore se mi rispondi grazie
9 月 10 日
LoriniRosa​nna撰寫:
Cyndi Crawford
........*.........*
.....*...............*
...*....................*
..*.....................*
.*........................*.........*....*
*.........................*...*..............*ciao passavo di qui!
.*.........................*...................*
..*.........................*................*il tuo blog è veramente karino!
...*.......................................*
.....*..................................*se ti va passa nel mio
........*...........................*
.........*......................*e lascia una traccia!
...............*...............*
..................*..........*
.....................*.....*
......................*..*
........................*
........................*
.......................*
........................*
.........................*
.............................*
...............................*
.................................*  baci8 Roxanne!!
..............................*
.........................*
...........................*
.........................*
.......................*
..........................*
.............................*
.............................

_______________.OO.__________
________________.OOO.____________.O. * .* .
________________.OOOO.______-.OOO. * .* ..
________________.OOOOO._-.OOOO. * .* ..
_______________.OOOOOOOOOOO. * . * . *
__________-.OOOOOOOOOOOOO. * .* ..
_____.OOOOOOOO0000000OOOO. * . * . * .
__________-.OOOOOOOOOOOOO. * . * . * ..
_______________.OOOOOOOOOOO. * . * . *
________________.OOOOO._-.OOOO. * . *. *
________________.OOOO.______-.OOO. * .* ..
________________.OOO.____________.O. * . *..
________________.OO.__________
________________.O.__________
1 月 24 日
Tãtø¤Tãtã撰寫:
aiutoooooooo stò impazzendo.. non riesco a rendere la barra dello scroll invisibile :( aiutami ti prego non la voglio bianca.. complimentissimi per lo space mi ha aiutato tantissimo è stupendo.. ti lascio la mia mail se ti va rispondimi grazie rory_91@hotmail.it
1 月 10 日
匿名 的圖片
Steve 撰寫:
Grazie per lo scroll fatti un giro nel mio blog
8 月 11 日
Maria Pia撰寫:
ciao......
grazie tante per il tuo intervento..
senza i tuoi consigli non ce l'avrei mai fatta....
7 月 12 日
Ciao, a me lo scroll orizzontale rimane bloccato. Dove sbaglio?
Il codice che inserisco è esattamente quello dell'esempio (ma con testo diverso naturalmente, molto più lungo in orizzontale).
Il problema può dipendere dal fatto che c'è una tabella?
2 月 8 日
匿名 的圖片
Hey_lyla_1 撰寫:
OddioOoOooo quante cose ci sono qua dentroo sembra il paradisOoOo!
^^ cmq...cerkero di seguire le tue indicazioni =)
Anke se sono al quanto imbranata ih
buona serata ila*
1 月 26 日
匿名 的圖片
₪Vignos₪ 撰寫:
ciao..complimenti x il tuo blog.
volevo chiederti se potevi dirmi il codice html x mettere dentro uno scoll un'immagine,naturalmente presa da un link.
risp sulla mia mail.
grazie mille.
ciao.
1 月 16 日
匿名 的圖片
_Rubia_Caliente_1 撰寫:
ciao, io non so come ridimensionarlo, mi si vede tutto spostato a sinistra ed è piccolino uffi!
se vuoi ti do il mio contatto msn oppure rispondi nel mio blog se ti va. grazie infinite.
12 月 29 日
匿名 的圖片
lihoincontratinchattepoi 撰寫:
bene scopro finalmente di il tuo blog ne ho sentito tanto parlare....ed ora ho la certezza di quello che si dice...complimenti..!
il mio problema e' che sto proprio a zero con queste cose..comincero' a studiare...!
sara' il tuo blog a farmi da giuda..
grazie..:)
APEREGINA
12 月 9 日
匿名 的圖片
Amythevampire 撰寫:
Ma tu..sei da santificare ^_________^


GRAZIE GRAZIE GRAZIE


Viola
10 月 19 日
匿名 的圖片
4639Marco 撰寫:
ci sono riuscito nn serve +
10 月 3 日
匿名 的圖片
4639Marco 撰寫:
non o capito, sono riuscito a metterla la barra soltanto nn o capito dove si scrive il testo per farlo diventare dentro come fai te.
se mi devi risponder fallo nel mio blog sull intervenyto che vuoi
ciao
10 月 3 日
匿名 的圖片
Antonella4511 撰寫:
GRAZIEEEE
CE L HO FATTA ANCHE CON LO SCROLL

ALL INIZIO NN AVEVO CAPITO DOVE INSERIRE LA RIGA.. è OVVIO CHE BISOGNAVA METTERLA NELL INTERVENTO (MODIFICA SPAZIO PERSONALE, BLOG, MODIFICA INTERVENTO E ANDARE IN HTML.. ) SEMBRA UN BANALITà MA L UNICO PICCOLO OSTACOLO è STATO QUELLO
PER IL RESTO è UNA FIGATA.. BASTA COPIARE E INCOLLARE..
SMACK SMACK
BBRAVISSIMO
10 月 3 日
匿名 的圖片
simo90thebest 撰寫:
ciao bruno...volevo solo dirti ke ho creato un intervento con lo scroll invisibile...non so se ti possa interessare cmq involontariamente è uscito così e lo trovo molto bello!!!!se è una cosa nuova e t interessasse ti posso passare l HTML dello scroll trasparente
9 月 12 日
匿名 的圖片
jacaranda188 撰寫:
non vorrei disturbarti, ma non riesco...
volevo mettere 2 brani di un libro con diversi colori e bordi,in uno stesso intervento, ma nonostante molteplici tentativi ho dovuto arrendermi
quando tento di fare la seconda "scatola", pur tornando in HTML, la stringa si piazza nel post normale... ho provato almeno 6 maniere diverse, inutilmente.
La stessa cosa mi succede con l'orologio.. parto da HTML, e quando torno in normale non si vede nulla e da HTMLè sparito tutto.
DOVE SBAGLIO? GRAZIE
8 月 13 日
匿名 的圖片
LadyLùcy 撰寫:
ciao! complimenti ho capito come si fa! solo ke nn so i codici dei colori..... potresti aiutarmi?? spero in una tua risposta :*
7 月 10 日
匿名 的圖片
STEO_TNT 撰寫:
ciao...ho una domanda forse un po' troppo incasinata da farti.... si può mettere uno scroll con dentro un sito?magari il blog di un'altra persona? se si quali sono i codici? prima mi devo costruire lo scroll...e poi il codice per il sito?bhòòò...sei tu l'esperto...la mia è una proposta... ^_^ ciaoooooooo
7 月 3 日
匿名 的圖片
sassyzullo 撰寫:
scusa ma come faccio a scaricarmi hedit
6 月 13 日

引用通告 (1)

此內容的引用通告是:
http://bberti.spaces.live.com/blog/cns!7E4B1E86FC5DD69C!743.trak
引述這則內容的部落格