ೡLink navigazione :.


ೡ Box fisso che scrolla con la pagina

- Testato personalmente su
Internet Exsplorer Firefox Google Chrome

Box che scrollano insieme alla pagina nei quali poter postare dal classico "Torna su"
ad un particolare menu, i bottoni dei social network, informazioni specifiche, ecc. ecc. sicuro
non passeranno inosservati ^_^ tra l'altro sono semplicissimi da settare, basta scrivere
l'apposita classe nei css e il relativo richiamo nella pagina

- la pagina in cui andremo ad inserire un box deve essere completa di dichiarazione "Doctype" ovvero
il tag che ci consente di specificare che tipo di documento abbiamo preparato, quindi per pagine html sarà:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

⇜ ↭ ↭ ↭ ⇝

Classe da scrivere nei css

Il box sarà contenuto in un div, quindi sono validi tutti i parametri personalizzabili previsti, nel menu html
trovi la guida necessaria. In questo caso sfrutteremo il parametro per la posizione "position:fixed;"

Saranno poi determinati i parametri per la distanza dai bordi della pagina, e quali dei 4
andremo a personalizzare, ovvero top: bordo pagina superiore, botton: bordo pagina inferiore,
left: bordo pagina destro e right: bordo pagina sinistro. Ne dovremmo specificare due

- Varie combinazioni che possiamo utilizzare

<style type="text/css">
div#box1 {
position:fixed;
border: 0px;
bottom:0px;
right:0px;
width: xx px;
height: xx px;
}
</style>		 <style type="text/css">
div#box2 {
position:fixed;
border: 0px;
top:0px;
right:0px;
width: xx px;
height: xx px;
}
</style>
<style type="text/css">
div#box3 {
position:fixed;
border: 0px;
bottom:0px;
left:0px;
width: xx px;
height: xx px;
}
</style>		 <style type="text/css">
div#box4 {
position:fixed;
border: 0px;
top:0px;
left:0px;
width: xx px;
height: xx px;
}
</style>

Se impostiamo i parametri per le distanze dai bordi a zero, come negli esempi sopra,
bottom:0px; right:0px; il box sarà bello appiccicato ai bordi settati, ovviamente potremmo
mettere la misura che ci fa più comodo in base anche alla grafica della nostra pagina

- Per il gufetto che vi invita a vedere altri esempi ho impostato top:400px; left:20px;

- Potremmo richiamare la classe o le classi nel caso ne avessimo per più box,
in qualunque punto della pagina purché sotto il tag <body>

<div id="box1">Testo - immagine - link </div>

⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝
Come ho detto molto semplice, basterà fare attenzione a scrivere per bene la classe,
ad esempio scriviamo sempre px; dopo il valore dato per il bordo, tipo, "top:xx px;" altrimenti
il box potrebbe non visualizzarsi bene, specie con IE. Se volete inserire più box, per evitare confusione,
scrivete dei nomi specifici, tipo div#boxtoppage, div#boxmenu, div#boxmex, ecc. ecc.

Se avete seguito il consiglio del mio gufetto, vi ho mostrato alcune soluzioni che possiamo utilizzare ^_^

Cliccate qui per vedere le classi che ho scritto per realizzare la pagina

- Box fisso 1

<style type="text/css">
div#box1 {
position:fixed;
border: 5px solid #e7920d;
background-color: #f1dab5;
top:0px;
left:20px;
width:100px;
height: 70px;
text-align:center;
font-family : "Comic Sans MS";
color : #e7920d;
font-size : 10px;
}
</style>
- Richiamo nella pagina

<div id="box1">
<img border="0" src="images/JFBQ00184070402A.gif" width="50" height="50" alt="">
<br>Box fisso 1</div>


- Box fisso 2

<style type="text/css">
div#box2 {
position:fixed;
border: 5px solid #ffffff;
background-color: #7dc2f9;
bottom:300px;
left:250px;
width:100px;
height: 80px;
padding:5px;
text-align:center;
font-family : "Verdana";
color : #ffffff;
font-size : 10px;
}
</style>
- Richiamo nella pagina

<div id="box2">
<img border="0" src="images/kumokumo.gif" width="97" height="71" alt="">
<br>Box fisso 2</div>


- Box fisso 3

<style type="text/css">
div#box3 {
position:fixed;
border: 5px solid #f0cae9;
background-color: #f9f1f8;
top:0px;
right:50px;
width:100px;
height: 150px;
text-align:center;
font-family : "Tahoma";
color : #f0cae9;
font-size : 10px;
}
</style>
- Richiamo nella pagina

<div id="box3">
<img border="0" src="images/1227957wfupf85i0e.gif" width="79" height="133" alt="">
<br>Box fisso 3</div>


- Box fisso 4

<style type="text/css">
div#box4 {
position:fixed;
border: 5px solid #84de8c;
background-color: #e5f9e7;
bottom:0px;
right:20px;
width:100px;
height: 80px;
padding:5px;
text-align:center;
font-family : "Palatino Linotype";
color : #84de8c;
font-size : 10px;
}
</style>
- Richiamo nella pagina

<div id="box4">
<img border="0" src="images/2199.gif" width="73" height="48" alt="">
<br>Box fisso 4<br><a href='#top'>::TopPage::</a></div>

Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


ೡ Dai un giudizio a questa guida... Grazie ^_^
90%
Voti totali: 8
Rating... 4.5


Un clik dai!
Se il telaio ti piace e pensi che sia utile votalo nelle top 100... :: Clicca qui! :: Clicca!


e... condividi questa pagina ^_^


Se hai problemi con la guida scrivimi qui...

mulberry handbags sale
20/05/2013 11:03:22
Home Page
Best wishes!Your blog is very good
ೡ Commento scritto dalla pagina '/tutorial/script_pagina/cursore_scrittina.php'
Sabry
01/05/2013 15:25:02
Home Page
Ciao Penelope, sei proprio brava ... ... provo una sana invidia ... hehehe .... Posso chiederti una cosa?Per farmi mandare un messaggio sulla mia posta elettronica come devo fare? Vorrei mettere una sorta di bannerino tipo "mail me" nel mio bloggino ...:-) grazie per la pazienza
ೡ Commento scritto dalla pagina '/tutorial/index_basi.php'
star
24/04/2013 15:07:32
***
scusa su un sito ho visto una che ha creato un certo tag dell'umore a quanto pare lo ha preso da qui, posso sapere come averlo?? ti prego è urgenteeeeeeeeeeeeeeeeeeeeeeeeeeeee*_*
ೡ Commento scritto dalla pagina '/tutorial/script_pagina/link_effetto_arcobaleno.php'
Saray
24/03/2013 18:48:16
Home Page
Ciao cara Penelope oggi sono stata qui quasi due orette a guardare la tua bellissima grafica. Ho preso un tuo vestitino per la mia Cbox. E' venuta molto bene e ti ringrazio moltissimo. Baci
ೡ Commento scritto dalla pagina '/tutorial/index.php'
Ylenia
12/03/2013 11:11:43
***
Brava, sito molto carino, utile e ben fatto. Continua così!..: Ylenia :..
ೡ Commento scritto dalla pagina '/tutorial/html/link.php'

⇜ ↭ ↭ ↭ ⇝

  Nickname
 		   Home Page
 
[ ^_^ ] [ =^_^= ] [ O_O ] [ *_* ] [ ♥ ]






- Pagina visitata da 339 utenti 		 

ೡ Menu script page



Penelope guide web

More banner





ೡ Mini anteprime articoli...





ೡ News dal telaio...



ೡ Altre sezioni utili...

- Fare un sito...
Guida completa alla realizzazione
e gestione di un sito web
- Un sito su AlterVista
Guida completa alla realizzazione
e gestione di un sito su AlterVista
- Tenplate Webset and Blog
Basi complete per siti web
e kit per i blog Blogger
- Gif... more gif!
Tutte le gif che vuoi!



38 Twitter follower
PenelopeLive




 
Torna indietro Torna su