Tabelle fisse allo scroll

BMercer

Nuovo Utente
24 Feb 2009
19
0
0
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 :

barq.jpg


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:
barover.jpg


Insomma, sono davvero intenzionato a fare questa barra e spero che voi mi aiutiate :) grazie.
 

BMercer

Nuovo Utente
24 Feb 2009
19
0
0
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 :)
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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

Nuovo Utente
24 Feb 2009
19
0
0
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
 
Ultima modifica:

BMercer

Nuovo Utente
24 Feb 2009
19
0
0
ciao
se parli della scritta che appare prova a digitare su googlr tooltip dovrebbero apparirti una caterva di soluzioni.


p.s.
ESAGERATO :D

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

Nuovo Utente
24 Feb 2009
19
0
0
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 ([email protected])
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:

[email protected]: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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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

Nuovo Utente
24 Feb 2009
19
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
C tabelle dimensioni fisse Dreamweaver Webdesign e Grafica 0
max75 query su due tabelle e dati doppioni MS Access 2
S Consiglio si relazione tabelle MS Access 1
E Info relazione tabelle MySQL 17
E Query differenza tra tabelle MySQL 5
F Somma di più tabelle da script Javascript 0
T come ordinare dei record recuperati da due tabelle MySQL 0
K Estrazione di più risultati da tabelle correlate PHP 5
A Visualizzazione due tabelle PHP 1
T colonne di tabelle mysql ordinate MySQL 0
T Query su due tabelle con totali Database 4
L Import massivo di immagini in tabelle piattaforma IONIC Presentati al Forum 1
R Join articolato su 3 tabelle MySQL 5
M Join 3 tabelle PHP 0
M Aggiornare stesso campo in due tabelle PHP 0
M Problemi con query a più tabelle PHP 3
L estrarre valori max tra più tabelle MySQL 2
M Problema su query JOIN in tre tabelle PHP 0
MarcoGrazia Dati nulli su join tra più tabelle MySQL 1
S Problema esportazione tabelle Mysql in Excel PHP 0
M Problema su update di 3 tabelle PHP 1
M Aggiornare simultaneamente i campi di due tabelle collegate con id PHP 4
Tommy03 Unire dati da due tabelle MySQL 5
Tommy03 Unione query di 4 tabelle MySQL 1
G eseguire calcoli matematici su risultati 2 tabelle mysql PHP 4
G Problema caricamento tabelle MySql da PhP PHP 0
R Relazione tra tabelle MS Access 5
Tommy03 Query tra 3 tabelle MySQL 2
G Controllare valori in 2 tabelle PHP 5
L update tabelle in php mysql [risolto] PHP 6
K Unire più tabelle in una singola tabella PHP 3
M Esportare tabelle mdb con relazioni in mysql MS Access 0
elpirata [MySQL] Sincronizzare dati tra due tabelle sullo stesso host MySQL 0
M [HTML] Tool per tabelle complesse responsive HTML e CSS 0
Spenalzo Creare tabelle multiple con Access via VBA MS Access 2
P [PHP] Inserti su più tabelle PHP 3
L [PHP] CMS con DB/tabelle perdsonale PHP 0
felino [Wordpress] Tabelle appartenenti a plugin rimossi WordPress 0
T mysql tutorial per importare tabelle access in mysql aiuto MySQL 2
P [PHP] Stampare record di diverse tabelle ma con nomi uguali PHP 6
S [PHP] come esportare due tabelle in file excel su due fogli distinti PHP 8
G [PHP] backup manuale(o automatico) tabelle msql PHP 6
A [Javascript] Multi input su due tabelle correlate Javascript 1
D [MySQL] Tabelle "molti a molti", SELECT con troppe QUERY MySQL 7
K [PHP] Collegamento tra più tabelle PHP 10
K [MS Access] query da tabelle relazionate MS Access 4
S [PHP] Inner join su 4 tabelle PHP 6
I database mysql estrarre due tabelle Database 2
D [ASP] Motore di ricerca interno su 2 tabelle Classic ASP 3
A [PHP] Creazione tabelle dinamiche PHP 16

Discussioni simili