Fixed header in HTML

#1
Taw

Posted 22 May 2009 - 11:51

Senior Member

Grup: Senior Members
Posts: 2,084
Înscris: 14.11.2003

Nu stiu daca aici e aria potrivita pentru acest topic dar sper sa fie ok.
Sunt total newb in HTML/CSS si trebuie sa modific un tabel a.i. sa aiba header-ul fix atunci cand se scroll-eaza in jos.
M-am uitat pe google, am gasit ceva solutii dar cam am probleme cu implementarea.Daca HTML-ul il mai bunghesc, cu CSS-ul sunt la pamant.Stiu ca ar trebui sa ma pun cu burta pe carte, dar am nevoie DOAR de chestia asta, in rest nu am nici o legatura cu programarea Web, si nici nu o sa am prea curand.
Atasez fisierul, poate cineva nu are ce face pt 10 min si ma poate ajuta.

Mersi frumos.

Attached Files

AMA17DB.rar 1.1K 8 downloads

Edited by Taw, 22 May 2009 - 11:52.

Back to top

#2
denverash

Posted 22 May 2009 - 14:53

Member

Grup: Banned
Posts: 694
Înscris: 19.04.2004

Taw, on May 22 2009, 12:51, said:

Nu stiu daca aici e aria potrivita pentru acest topic dar sper sa fie ok.
Sunt total newb in HTML/CSS si trebuie sa modific un tabel a.i. sa aiba header-ul fix atunci cand se scroll-eaza in jos.
M-am uitat pe google, am gasit ceva solutii dar cam am probleme cu implementarea.Daca HTML-ul il mai bunghesc, cu CSS-ul sunt la pamant.Stiu ca ar trebui sa ma pun cu burta pe carte, dar am nevoie DOAR de chestia asta, in rest nu am nici o legatura cu programarea Web, si nici nu o sa am prea curand.
Atasez fisierul, poate cineva nu are ce face pt 10 min si ma poate ajuta.

Mersi frumos.

din pacate ce vrei tu nu se poate face in 10 minute, explica celui care vrea asa ceva ca pe web nu ai header fix, decat cu artificii complicate.

Back to top

#3
shiva

Posted 22 May 2009 - 15:11

Nameless hero. Professional bug slayer mom.

Grup: Senior Members
Posts: 14,862
Înscris: 06.10.2003

Folosesti thead, tfoot si tbody.
La thead adaugi la style:

position:relative; top:expression(offsetParent.scrollTop);

La tbody, pt. FireFox:

overflow:auto; height:300px; overflow-x:hidden;

(height-ul e obligatoriu sa fie o valoare numerica!!!)

Iar pt. footer fix, adaugi style-ul urmator la tfoot:

position:relative; overflow-x:hidden; top:expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);

Back to top

#4
Taw

Posted 22 May 2009 - 15:58

Senior Member

Grup: Senior Members
Posts: 2,084
Înscris: 14.11.2003

Mersi de raspuns mane, m-a ajutat cineva cu asta:

<head>
<style type="text/css">
<!--
html>body tbody.scrollContent {

	height: 650px;
	overflow: auto;
	width: 100%
}
-->
</style>
</head>

.....
<thead class="fixedHeader" >
<tbody class="scrollContent">

Dar din pacate nu merge DECAT in Firefox, si mie imi trebe in IE.
O sa incerc varianta propusa de tine.

Back to top

#5
Alta_

Posted 22 May 2009 - 19:21

Active Member

Grup: Members
Posts: 1,197
Înscris: 22.05.2007

Pe aici ai fost?
Mai precis: working example. In IE6, Mozilla, Opera am testat si se pare ca merge. N-am IE7 sa vad, posibil aici sa fie probleme.

Back to top

Anunturi

Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

www.neurohope.ro

Fixed header in HTML

#1 Taw Posted 22 May 2009 - 11:51

Attached Files

#2 denverash Posted 22 May 2009 - 14:53

#3 shiva Posted 22 May 2009 - 15:11

#4 Taw Posted 22 May 2009 - 15:58

#5 Alta_ Posted 22 May 2009 - 19:21