PDA

View Full Version : [CSS] Domanda su position fixed

Craig Willmore
06-04-2007, 18:42
Ciao, vorrei posizionare un oggetto fisso in una pagina web, ma vorrei che esso stia in un preciso punto indipendentemente dalla risoluzione dello schermo del visitatore.
In pratica quando si decide di posizionare un oggetto, si specifica la sua distanza in pixel dai margini della pagina, che userà come punto di riferimento per ancorarsi, ma se cambia la risoluzione, cambia di conseguenza anche la distanza dell'oggetto rispetto ad un punto assoluto della pagina.
Come è possibile ovviare alla cosa?
Se per esempio la distanza dal margine sinistro deve essere 200px (con risoluzione 800x600), come è possibile aumentare proporzionalmente questa distanza quando è attiva un'altra risoluzione, in modo che compaia nello stesso punto della pagina?
Spero più o meno di essermi spiegato:p
andbin
06-04-2007, 18:59
Ciao, vorrei posizionare un oggetto fisso in una pagina web, ma vorrei che esso stia in un preciso punto indipendentemente dalla risoluzione dello schermo del visitatore.Peccato che il position:fixed non è supportato da IE 6 ....
Craig Willmore
06-04-2007, 19:39
Peccato che il position:fixed non è supportato da IE 6 ....

E allora?
anonimizzato
06-04-2007, 20:38
E allora?

Cerca bene sul web perchè il problema si può aggirare tramite l'uso di Javascript.

Ciao.
Craig Willmore
07-04-2007, 09:51
Cerca bene sul web perchè il problema si può aggirare tramite l'uso di Javascript.

Ciao.
Ma il mio non è un problema di compatibilità browser, è di semplice posizionamento dell'oggetto in modo assoluto rispetto a qualsiasi risoluzione.
Intendevi che esiste uno script per risolverlo?
Hai qualche riferimento da ricercare a proposito?
ciao
anonimizzato
07-04-2007, 12:02
No ti sbagli è proprio un problema di compatibilità browser visto che position:fixed non è supportata da IE6 :D

Guarda qui (http://tagsoup.com/cookbook/css/fixed/) c'è un modo senza JS.
Craig Willmore
07-04-2007, 13:20
No ti sbagli è proprio un problema di compatibilità browser visto che position:fixed non è supportata da IE6 :D

Guarda qui (http://tagsoup.com/cookbook/css/fixed/) c'è un modo senza JS.
Scusa ma io ho lo stesso problema con IE7 e firefox 2.0.3. Secondo me è un "semplice" problema di codice: se posiziono l'oggetto con le percentuali (es 50% 50%) la distanza varierà proporzionalmente alla risoluzione video, e l'oggetto si troverà esattamente e sempre dove desiderato; con le distanze espresse in pixel (quelle che mi servono) ciò naturalmente non accade, e l'oggetto si ancorerà al browser posizionandosi più vicino o più lontano rispetto a un punto fisso assoluto della schermata.
L'ideale penso sia uno script in grado di aumentare la distanza in pixel dai margini man mano che da una risoluzione di 800x600 si passa a risoluzioni superiori.
Spero sia chiaro:D :read:
Craig Willmore
09-04-2007, 14:16
In alternativa è possibile raggiungere lo stesso scopo con i container, sapete come si può procedere?
anonimizzato
09-04-2007, 18:54
Sarebbe meglio che postassi il codice che hai preparato sin ora magari con uno screenshot di quello che vorresti ottenere.

Ciao.
Craig Willmore
10-04-2007, 10:59
Qui (http://www.quickonlinetips.com/) l'esempio. Come vedi l'icona fissa rss si ancora al browser e varia di posizione a risoluzioni differenti. Io vorrei che sia fissa rispetto al container centrale, sostanzialmente che non si sposti sull'asse orizzontale, ma solo verticale rispetto ad esso.
andbin
10-04-2007, 11:26
Qui (http://www.quickonlinetips.com/) l'esempio. Come vedi l'icona fissa rss si ancora al browser e varia di posizione a risoluzioni differenti. Io vorrei che sia fissa rispetto al container centrale, sostanzialmente che non si sposti sull'asse orizzontale, ma solo verticale rispetto ad esso.Sì ma hai usato position:fixed, che come abbiamo già detto non è compatibile con tutti i browser (IE :D ).
La soluzione (l'unica credo) è basata su Javascript. Prova questa pagina, scrollala e vedi che l'immagine del feed rimane in alto.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Prova</title>
<script type="text/javascript">
<!--
function truebody ()
{
return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
}

function scroll_func (e)
{
var feed_obj = document.getElementById ("feed");

var body = truebody ();

feed_obj.style.top = (body.scrollTop + 10) + "px";
feed_obj.style.left = "10px";
}

window.onscroll = scroll_func;
window.onload = scroll_func;
//-->
</script>
<style type="text/css">
<!--
#feed { position: absolute; }
-->
</style>
</head>
<body>

<img id="feed" src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" width="32" height="32" alt="">

Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>
Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>
Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>
Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>
Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>
Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>

</body>
</html>Testato con FF 2, IE 5.5 & 6, Opera 7 & 8
Craig Willmore
10-04-2007, 12:38
Ma in questo modo quale sarà il punto di riferimento dell'oggetto?
andbin
10-04-2007, 12:49
Ma in questo modo quale sarà il punto di riferimento dell'oggetto?feed_obj.style.top = (body.scrollTop + 10) + "px";
feed_obj.style.left = "10px";

Vuol dire: metti il top a +10px dal scrollTop del body, metti left a 10px. Dove scrollTop del body è l'ammontare di pixel scrollati in senso verticale.

EDIT: tra l'altro bisogna precisare che se la pagina può anche scrollare orizzontalmente, sarebbe più corretto mettere:
feed_obj.style.left = (body.scrollLeft + 10) + "px";

Poi comunque la posizione da "mantenere" la gestisci programmaticamente come vuoi tu. Ad esempio: vuoi che l'immagine stia sempre in alto a destra?? Allora aggiungi:
window.onresize = scroll_func;

e poi fai:
feed_obj.style.left = (body.scrollLeft + body.clientWidth - 32 - 10) + "px";
Craig Willmore
10-04-2007, 13:47
Grazie mille, ora provo. Come si chiama questo script?:read:
ciao
andbin
10-04-2007, 14:43
Come si chiama questo script?:read:Beh, non so se c'è un nome particolare per script di questo tipo .... serve per mantenere fissa la posizione di un elemento nella finestra. Trovi spesso siti del genere, che magari tengono fisso un menù o un banner.
Ma non saprei se c'è un nome ... ;)