- Home
- Categorie
- Coding e Sistemistica
- Coding
- mantenere fissi i margini dall' inizio e dalla fine della finestra
-
mantenere fissi i margini dall' inizio e dalla fine della finestra
come posso creare una tabella(o altro come un immagine o un menu) che mantenga fissi i margini dall'inizio e dalla fine della pagina per visualizzarlo anche quando uso lo scroll?se mi potete fare un esempio ve ne sarei molto grato. Grazie.
-
Usa { position: fixed; top: ??px; left: ??px; } o { position: fixed; top: ??px; right: ??px; } a secondo se l'elemento deve essere posizionato rispetto il lato sinistro o destro.
Non funziona su Internet Explorer <7.
Se per l'uso non è tanto importante puoi scegliere di lasciarlo scrollare in quei browser oppure usare un pò di javascript aggiuntivo per farlo rimanere fisso anche in IE6Ciao, Jess.
-
Grazie per la risposta, ma io vorrei ottenere un effetto come quello in questo sito:w w w.ischiahotel.net . Con il codice che mi hai dato ottengo un effetto diverso.
-
Quello non è fatto con css, ma con javascript.
Prima è dato alla tabella l'id="object1" che è posizionato con uno style in modo absolute a 83 pixel del margine superiore:#object1 {position:absolute;left:0px;top: 83px;width:98px;height:345px;z-index:1}Poi durante il caricamento della pagina vengono chiamati 3 funzioni javascript:> <body onLoad="invis();setVariables();checkLocation();">setVariables() e checkLocation() servono per calcolare la distanza dei bordi della finestra de browser e di posizionare il menu (in questo caso una tabella, ma può essere anche un div) ad un altezza di 83 px dal bordo superiore, se la pagina sta in alto e 10 px dal bordo quando l'utente ha scollato giù.
function setVariables(){
px="+'px'";
if (navigator.appName == "Netscape") {
if (parseInt(navigator.appVersion) >= 5){
v=".top=";
h=".left=";
dS="document.getElementById("";
sD="").style";
y="window.pageYOffset";
x="window.pageXOffset";
}
else {
v=".top=";
h=".left=";
dS="document.";
sD="";
y="window.pageYOffset";
x="window.pageXOffset";
px="";
}
}
else {
var validDoc=(document.compatMode && document.compatMode != "BackCompat")?1:0;
h=".left=";
v=".top=";
dS="";
sD=".style";
y=(validDoc)?"document.documentElement.scrollTop":"document.body.scrollTop";
x=(validDoc)?"document.documentElement.scrollLeft":"document.body.scrollLeft";
}
checkLocationA()
}movex=0,movey=0,xdiff=0,ydiff=0,ystart=0
,xstart=0
function checkLocation(){
object="object1";
yy=eval(y);
xx=eval(x);
ydiff=ystart-yy;
xdiff=xstart-xx;
if ((ydiff<(-1))||(ydiff>(1))) movey=Math.round(ydiff/10),ystart-=movey
if ((xdiff<(-1))||(xdiff>(1))) movex=Math.round(xdiff/10),xstart-=movex
if (ystart>=83){
eval(dS+object+sD+v+(ystart+10)+px);
} else {
eval(dS+object+sD+v+83+px);
}eval(dS+object+sD+h+xstart+px); setTimeout("checkLocation()",10);
}
function checkLocationA(){
ystart=eval(y);
xstart=eval(x);
}la fuction invis() serve per rendere il menu invisibile se la risoluzione è troppo piccolo per porterci stare dentro senza coprire il testo principale:function invis(){
var s_width ='';
var s_height ='';
s_width=screen.width
s_height=screen.heightif (s_width == "640"){
document.getElementById("object1").style.display="none";
}if (s_width == "800"){
document.getElementById("object1").style.display="none";
}if (s_width == "1024"){
document.getElementById("object1").style.display="block";
}if (s_width == "1280"){
document.getElementById("object1").style.display="block";
}}Se questo non interessa, basta scrivere:
function invis(){
document.getElementById("object1").style.display="block";
}Jess.
-
scusa mi potresti dire cosa dovrei modificare nella mia home?link: alexpanza.netsons.org/ .Ho creato il file come mi hai indicato,lo ho incluso, ma non va...
Ps il sito è creato con joomla, non so se importa..
Grazie ancora per l'attenzione
-
scusa mi ero dimenticato che vorrei spostare il menu di sinistra
ps scusate se non ho modificato il precedente ma non funzionava...
-
Nella tua pagina object1 si chiama left_outline. Basta che cambia nello script ogni object1 (ma non object da solo) con l'id di left_outline e dovrebbe funzionare.