Tabelle fisse allo scroll

BMercer · 24 Feb 2009

Salve a tutti, sono nuovo qui e volevo chiedervi una cosa che mi stà facendo mangiare il fegato.
Io ho creato una tabella :

HTML:

<div style="bottom:-1; position:fixed; text-align:center;">
<table margin="auto" border="0" cellspacing="0" cellpadding="0" width="1100px" height="25px">
<tbody>
<td width="3%" height="26px" style="border:1px solid #b4b4b4" background="immaginedibackground">&nbsp;&nbsp;<img src="Immaginenellabarra" width="16" height="16" align="absmiddle">&nbsp;</td>
<td width="3%" height="26px" style="border-right:1px solid #b4b4b4; border-left:0px; border-top:1px solid #b4b4b4; border-bottom:1px solid #b4b4b4" background="Immaginenellabarra">&nbsp;&nbsp;<img src="Immaginenellabarra" width="16" height="16" align="absmiddle">&nbsp;</td>
<td width="9%" height="26px" bordercolor="0" background="background" style="border-right:1px solid #b4b4b4; border-left:0px; border-top:1px solid #b4b4b4; border-bottom:1px solid #b4b4b4" margin="auto">&nbsp;<span class="Stile2">&nbsp;<em><span class="Stile3"><font face="Verdana" size="2px">testo</font></span></em></span></td>

<td width="3%" height="26px" bordercolor="0" background="immaginebackground" style="border-right:1px solid #b4b4b4; border-left:0px; border-top:1px solid #b4b4b4; border-bottom:1px solid #b4b4b4" margin="auto">&nbsp;<span class="Stile2">&nbsp;<img src="immaginenellabarra" width="16" height="16" align="absmiddle"> </span></td>

<td width="82%" height="26px" bordercolor="0" background="immaginebackgorun" style="border-right:1px solid #b4b4b4; border-left:0px; border-top:1px solid #b4b4b4; border-bottom:1px solid #b4b4b4" margin="auto">&nbsp;<span class="Stile2">&nbsp; <img src="immaginebarra" width="16" height="16" align="absmiddle">&nbsp;&nbsp;<span class="Stile4"><font face="Verdana" size="1px">testo</font></span></span></td>





</tbody>
</table>
</div>

Il problema è che la tabella resta ferma in basso allo scroll, ma non riesco a centrarla.

In più con IE7 Non resta ferma allo scroll come vorrei ma viene posizionata in fondo alla pagina.

La mia idea era di creare una barra menù come quella di facebook :

E poi aggiungere le mie immagini e i miei link.
Poi per ultima cosa volevo chiedervi come fare quegli effetti di mouse over con la quale, quando passi su una cella della barra di facebook, essa si colora da grigio a bianco e sopra in nero viene fuori una finestrella nera con scritto la descrizione del tasto:

Insomma, sono davvero intenzionato a fare questa barra e spero che voi mi aiutiate

grazie.

PoLe · 25 Feb 2009

Ecco qui

https://www.mrw.it/css/articoli/floating-menu-resta-fisso-fondo-pagina_955.html

:byebye:

BMercer · 25 Feb 2009

Da sottolineare, ancora, che "position: fixed" funzionerà correttamente con IExploer 7 solo se è stato settato correttamente il doctype della pagina!.

In che senso bisogna settare correttamente il doctype della pagina?
Io all'inizio del documento ho scritto:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Comunque, non risco a centrarlo... come faccio? Il codice attuale è :

HTML:

   <style type="text/css">

body
{
  margin: 10px 0px 0px 0px;
}
#FOOTER
{
  position: fixed;
  bottom: -1px;
  width: 1100px;
  text-align: center;
}

html #FOOTER
{
  position: absolute;
  top: expression((0-(FOOTER.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}


   </style>
</head>
<body>
<div id="FOOTER">
	<table background="Backgroundtabella" border="0" cellspacing="0" cellpadding="0" width="1100px" height="25px" >
  		
		<tbody>
			

			<td width="3%" height="26px" style="border:1px solid #b4b4b4" >&nbsp;&nbsp;<a href="Link"><img src="Immaginedellink" width="16" height="16" border="0" align="absmiddle"></a>&nbsp;</td>
            
			<td width="3%" height="26px" style="border-right:1px solid #b4b4b4; border-left:0px; border-top:1px solid #b4b4b4; border-bottom:1px solid #b4b4b4" background="Background">&nbsp;&nbsp;<a href="Link"><img src="Immaginedellink" width="16" height="16" border="0" align="absmiddle"></a>&nbsp;</td> 

           		<td width="9%" height="26px" style="border-right:1px solid #b4b4b4; border-left:0px; border-top:1px solid #b4b4b4; border-bottom:1px solid #b4b4b4" >&nbsp;<span class="Stile2">&nbsp;<em><span class="Stile3"><font face="Verdana" size="2px">testo</font></span></em></span></td>
            
            		<td width="3%" height="26px" style="border-right:1px solid #b4b4b4; border-left:0px; border-top:1px solid #b4b4b4; border-bottom:1px solid #b4b4b4" >&nbsp;<span class="Stile2">&nbsp;<a href="link"><img src="immaginedellink" width="16" height="16" border="0" align="absmiddle"></a> </span></td>
            
            		<td width="82%" height="26px" style="border-right:1px solid #b4b4b4; border-left:0px; border-top:1px solid #b4b4b4; border-bottom:1px solid #b4b4b4" >&nbsp;<span class="Stile2">&nbsp; <img src="immagine" width="16" height="16" align="absmiddle">&nbsp;&nbsp;<span class="Stile4"><font face="Verdana" size="1px">testo</font></span></span></td>
            
            
            	
		</tbody>
	
	</table>
</div>



</body>
</html>

Grazie ancora

PoLe · 25 Feb 2009

Nello style del #FOOTER aggiungi
margin:0 auto;

Serve a centrare l'oggetto automaticamente

BMercer · 25 Feb 2009

PoLe ha scritto:
Nello style del #FOOTER aggiungi
margin:0 auto;

Serve a centrare l'oggetto automaticamente

Risulta ancora tutto a sinistra...

borgo italia · 25 Feb 2009

ciao
non vorrei dire una ca...ta, ma prova
ad inserire in #FOOTER

left: 50%;
margin-left: -550px;/*metà di width*/

al massimo non funzia

comunque su "articoli" di html trovi come centrare un div

BMercer · 26 Feb 2009

borgo italia ha scritto:
ciao
non vorrei dire una ca...ta, ma prova
ad inserire in #FOOTER

left: 50%;
margin-left: -550px;/*metà di width*/

al massimo non funzia

comunque su "articoli" di html trovi come centrare un div

Sei il mio idolo

grazie ... ha funzionato

EDIT: Risolto il problema postato prima di editare
Un ultimissima cosa: per creare l'effetto mouse over che è in figura 2 nel primo post, come faccio? Grazie

borgo italia · 27 Feb 2009

ciao
se parli della scritta che appare prova a digitare su googlr tooltip dovrebbero apparirti una caterva di soluzioni.

p.s.

Sei il mio idolo

ESAGERATO

BMercer · 27 Feb 2009

borgo italia ha scritto:
ciao
se parli della scritta che appare prova a digitare su googlr tooltip dovrebbero apparirti una caterva di soluzioni.

p.s.
ESAGERATO

Ok, ne ho trovato uno fighissimo qui che farebbe il caso mio: http://onehackoranother.com/projects/jquery/tipsy/

Ho trovato e vorrei usare quello Gravity south...
Ho capito il codice da mettere nei css della pagina e pure che devo mettere l'id ="south" nel testo ... ma non so dove posizionare le cartelle.

Nel senso che ho scaricato il pacchetto che contiene una cartella docs e una src con all'interno altre sotto cartelle e file... dove devo metterle?

HELP ME grazie

BMercer · 27 Feb 2009

Ho trovato un documento readme che era in un formato strano e lo aperto con blocco note e diceva:

tipsy - Facebook-style tooltip plugin for jQuery
(c) 2008 Jason Frame (jason@onehackoranother.com)
Released under The MIT License.

==DESCRIPTION:

tipsy is a simple jQuery plugin for generating Facebook-style tooltips.

== HOMEPAGE:

http://onehackoranother.com/projects/jquery/tipsy

== SOURCE:

Hosted at GitHub; browse at:

http://github.com/jaz303/tipsy/tree/master

Or clone from:

git@github.com:jaz303/tipsy.git

== USAGE:

1. Copy the contents of src/{images,javascripts,stylesheets} to the corresponding asset directories in your project.
If the relative path of your images directory from your stylesheets directory is not "../images", you'll need to adjust tipsy.css appropriately.

2. Insert the neccesary elements in your document's <head> section,
e.g.:

<script type='text/javascript' src='/javascripts/jquery.tipsy.js'></script>
<link rel="stylesheet" href="/stylesheets/tipsy.css" type="text/css" />

Remember to include jquery.tipsy.js *after* including the main jQuery library.

3. Initialise Tipsy in your document.onload, e.g.:

<script type='text/javascript'>
$(function() {
$('a[rel=tipsy]').tipsy({fade: true, gravity: 'n'});
});
</script>

Please refer to the docs directory for more examples and documentation.

Cosa dovrei fare scusate? Io di inglese so poco

:dipser:

Poi non vi romperò più i co****i

(Forse solo per una cosa strana)

borgo italia · 2 Mar 2009

ciao
da quello che si capisce devi creare delle cartelle nella root del tuo sito
e metterci dentro il js e il css e le immagini, se combi i nomi (o posizioni) delle cartelle devi aggiustare anche i relativi riferimenti negli script
in particolare per le immagini che se le metti in ina cartella di nome diverso devi cercare sul tipsy.css il loro richiamo e modificarlo

BMercer · 2 Mar 2009

Si, quella era l'unica cosa che avevo capito...
Inanzitutto non posso aggiungere i dati nell <head> perchè io ho inserito la tabella in un template di un forum che è solo un pezzo del body.
Poi non ho capito
qua:

Codice:

<script type='text/javascript' src='/javascripts/jquery.tipsy.js'>QUI NON DOVREBBE ANDARCI QUALCOSA?</script>
<link rel="stylesheet" href="/stylesheets/tipsy.css" type="text/css" />

e poi questo:

Codice:

<script type='text/javascript'>
$(function() {
$('a[rel=tipsy]').tipsy({fade: true, gravity: 'n'});
});
</script>

In che senso devo metterlo nel document.onload?

E poi dov'è che scrivo il messaggio che deve apparire?

borgo italia · 2 Mar 2009

ciao
non so, se non hai head probailmente devi scriverlo dentro il body (se hai il tag body subito sopra
comunque quando hai scaricato i file dovresti avere una cartella chiamata docs dove ci sono altre istruzioni ed esempi

Please refer to the docs directory for more examples and documentation.

Cerca

Cerca

Tabelle fisse allo scroll

BMercer

Nuovo Utente

PoLe

MRW Moderator

BMercer

Nuovo Utente

PoLe

MRW Moderator

BMercer

Nuovo Utente

borgo italia

Super Moderatore

BMercer

Nuovo Utente

borgo italia

Super Moderatore

BMercer

Nuovo Utente

BMercer

Nuovo Utente

borgo italia

Super Moderatore

BMercer

Nuovo Utente

borgo italia

Super Moderatore

Discussioni simili