[CSS] Domanda su position fixed

Craig Willmore · 06-04-2007, 17: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

andbin · 06-04-2007, 17:59

Quote:

Originariamente inviato da Craig Willmore

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, 18:39

Quote:

Originariamente inviato da andbin

Peccato che il position:fixed non è supportato da IE 6 ....

E allora?

06-04-2007, 19:38

Quote:

Originariamente inviato da Craig Willmore

E allora?

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

Ciao.

Craig Willmore · 07-04-2007, 08:51

Quote:

Originariamente inviato da Sgurbat

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

07-04-2007, 11:02

No ti sbagli è proprio un problema di compatibilità browser visto che position:fixed non è supportata da IE6

Guarda qui c'è un modo senza JS.

Craig Willmore · 07-04-2007, 12:20

Quote:

Originariamente inviato da Sgurbat

No ti sbagli è proprio un problema di compatibilità browser visto che position:fixed non è supportata da IE6

Guarda qui 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

Craig Willmore · 09-04-2007, 13:16

In alternativa è possibile raggiungere lo stesso scopo con i container, sapete come si può procedere?

09-04-2007, 17: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, 09:59

Qui 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, 10:26

Quote:

Originariamente inviato da Craig Willmore

Qui 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

).
La soluzione (l'unica credo) è basata su Javascript. Prova questa pagina, scrollala e vedi che l'immagine del feed rimane in alto.

Codice:

<!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, 11:38

Ma in questo modo quale sarà il punto di riferimento dell'oggetto?

andbin · 10-04-2007, 11:49

Quote:

Originariamente inviato da Craig Willmore

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, 12:47

Grazie mille, ora provo. Come si chiama questo script?

ciao

andbin · 10-04-2007, 13:43

Quote:

Originariamente inviato da Craig Willmore

Come si chiama questo script?

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 ...

06-04-2007, 17:42	#1
Craig Willmore Member Iscritto dal: Feb 2006 Città: BEAM ME UP SCOTTY! Messaggi: 68	[CSS] Domanda su position fixed 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

07-04-2007, 11:02	#6
anonimizzato Messaggi: n/a	No ti sbagli è proprio un problema di compatibilità browser visto che position:fixed non è supportata da IE6 Guarda qui c'è un modo senza JS.

09-04-2007, 13:16	#8
Craig Willmore Member Iscritto dal: Feb 2006 Città: BEAM ME UP SCOTTY! Messaggi: 68	In alternativa è possibile raggiungere lo stesso scopo con i container, sapete come si può procedere?

09-04-2007, 17:54	#9
anonimizzato Messaggi: n/a	Sarebbe meglio che postassi il codice che hai preparato sin ora magari con uno screenshot di quello che vorresti ottenere. Ciao.

10-04-2007, 09:59	#10
Craig Willmore Member Iscritto dal: Feb 2006 Città: BEAM ME UP SCOTTY! Messaggi: 68	Qui 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.

10-04-2007, 11:38	#12
Craig Willmore Member Iscritto dal: Feb 2006 Città: BEAM ME UP SCOTTY! Messaggi: 68	Ma in questo modo quale sarà il punto di riferimento dell'oggetto?

10-04-2007, 12:47	#14
Craig Willmore Member Iscritto dal: Feb 2006 Città: BEAM ME UP SCOTTY! Messaggi: 68	Grazie mille, ora provo. Come si chiama questo script? ciao

Strumenti
Mostra una versione stampabile Invia questa pagina per email