CSS Fix header and footer
Assalamualaikum dan salam sejahtera bagi yang bukan Islam,ok sekarang aku ada problem baru...(muka aku nih muka problem je klu bab2 coding nih)
Aku cuba nak create fix header and footer using CSS..
alasan, aku dah tak tahu nak pakai code apa untuk generate fix header and footer nih..
so moh aku cite problem sebenarnye...
code yang aku retrieve dan aku guna balik kat page aku tuh actually menjadi,
ia menjadi bila aku guna google chrome,
so, bila aku guna dekat I E 8..
ianya problem..ia tak generate seperti mana yang aku nak..
header dan footer tuh tak "fix"..
so, aku try la study lebih sket pasal CSS nih..
but then, aku jumpa yang sebenarnya I E dan other browser tak sama..
dan problem ini timbul dekat I E...
tapi bos aku nak menda tuh boleh running dalam I E sekali...
skrang aku dah buntu dah..
aku learn tutorial dekat page nih..korang try la klu free...
http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/comment-page-1/#comment-367
korang try check jadi tak dekat I E and other browser..
aku dah pening kepala dah..
tolong aku cari solution nih..
thanks guys...
yang pening (@_@)
dune1989 salam, sape tahu solution untuk problemaku nih ek?
bile aku try jadikan code CSS aku nih external dia punye scroll kat dalam page bukan dkat browser..mcam dalam gambar nih..
http://img168.imageshack.us/img168/3610/gambo1.jpg
ini code html:-<html>
<head><title>testing for header and footer</title></head>
<link href="css/retest.css" rel="stylesheet" type="text/css" />
<body>
<div id="content">
<h1>Sed ut perspiciatis unde<></h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus. Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut. Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae, blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.</p>
<p>Aenean aliquam erat neque. Mauris scelerisque vestibulum posuere. Praesent aliquet, quam vel fermentum posuere, leo felis varius magna, in pretium arcu mi vel ipsum. Sed porttitor venenatis tortor, semper pellentesque nisl placerat quis. Etiam ornare turpis id massa consectetur vestibulum. Pellentesque vitae suscipit lectus. Pellentesque in nisi eget velit scelerisque placerat a vitae ipsum. Mauris eu diam tortor, at blandit felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum volutpat pulvinar. Etiam congue risus ut turpis dictum nec dictum ligula porta. Nulla sit amet ipsum at ligula vulputate imperdiet. Nulla posuere, justo commodo mattis hendrerit, leo dolor auctor ligula, sed accumsan tellus ligula eu eros. Fusce pulvinar risus sed sapien facilisis at scelerisque risus bibendum. Quisque orci quam, porta sed ultrices vitae, faucibus sed mauris.</P>
<p>Cras turpis nisi, condimentum nec convallis at, lacinia sit amet diam. Proin dapibus luctus quam ac varius. Sed ornare venenatis magna, vel mollis dui dapibus quis. Suspendisse nisl lectus, porta ac tempor vel, gravida et mi. Cras tristique nisl at dolor adipiscing fermentum. Curabitur vitae lacinia quam. Phasellus urna sem, condimentum ut sagittis sed, dictum at lacus. Pellentesque felis turpis, interdum a adipiscing id, ornare eget ipsum. Aenean scelerisque diam sed orci lacinia rutrum dictum nisl congue. Curabitur vitae nunc velit, a pulvinar magna. Etiam venenatis placerat justo, sed rhoncus lectus venenatis at. Ut sagittis diam eu libero volutpat tempor. Phasellus non quam orci, malesuada volutpat eros. Suspendisse malesuada bibendum aliquet. Donec auctor, justo ut luctus consectetur, diam neque pellentesque velit, eu vehicula mi neque sed sem. Pellentesque neque est, vulputate non euismod ut, accumsan ac nibh. Vivamus dignissim, sapien mollis eleifend tempor, tellus nulla ultrices velit, at tincidunt ligula sapien sed metus.</p>
</div>
<div id="footer">
Footer is here</div>
</body>
</html>ini code external css<style type="text/css">
html, body{
height:100%;
overflow:hidden;
padding:0px;
margin:0px;
}
body {
padding-bottom:70px;
}
#content {
overflow:auto;
height:99.9%;
background-color:yellow;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:69px;
background-color:green;
}
</style>and then bila aku setkan jadi internal CSS pulak, dia punye scroll berada kat browser lak...
erm..gambar kat bawah...
http://img64.imageshack.us/img64/6706/gambo.jpg
ini code dia:-<html>
<head><title>testing for header and footer</title></head>
<!--<link href="css/retest.css" rel="stylesheet" type="text/css" />-->
<style type="text/css">
html, body{
height: 100%;
overflow: hidden;
padding: 0px;
margin: 0px;
}
body {
padding-bottom: 70px;
}
#content {
overflow: auto;
height: 99.9%;
background-color: yellow;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 69px;
background-color: green;
}
</style>
<body>
<div id="content">
<h1>Sed ut perspiciatis unde<></h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus. Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut. Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae, blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.</p>
<p>Aenean aliquam erat neque. Mauris scelerisque vestibulum posuere. Praesent aliquet, quam vel fermentum posuere, leo felis varius magna, in pretium arcu mi vel ipsum. Sed porttitor venenatis tortor, semper pellentesque nisl placerat quis. Etiam ornare turpis id massa consectetur vestibulum. Pellentesque vitae suscipit lectus. Pellentesque in nisi eget velit scelerisque placerat a vitae ipsum. Mauris eu diam tortor, at blandit felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum volutpat pulvinar. Etiam congue risus ut turpis dictum nec dictum ligula porta. Nulla sit amet ipsum at ligula vulputate imperdiet. Nulla posuere, justo commodo mattis hendrerit, leo dolor auctor ligula, sed accumsan tellus ligula eu eros. Fusce pulvinar risus sed sapien facilisis at scelerisque risus bibendum. Quisque orci quam, porta sed ultrices vitae, faucibus sed mauris.</P>
</div>
<div id="footer">
Footer is here</div>
</body>
</html>so apa pendapat korang?
tolong aku solve problem aku nih..
problem nih masalahnye kat I E je..
browser lain ok je..waduh problem la I E nih!!! ko guna overflow: hidden; tu sebab scroll dok dlm page....
ko nak fix yg mcm mana? ko guna overflow: hidden; tu sebab scroll dok dlm page....
ko nak fix yg mcm mana?
BorderManager Post at 1-2-2010 02:01 PM http://mforum3.cari.com.my/images/common/back.gif
aku nak fix kan footer tu..so, aku hiddenkan overflow html...
and then aku setkan element "content" tuh je yang scroll..
tapi bukan gune scroll sendiri tapi guna browser scroll..
ke ko ada cara lain tak nak buat fix header anf footer..
actuallya ku dah try buat..
masalahnye ia problem dekat most IE punye browser..
tapi dekat browser lain ok.. guna iframe guna iframe
BorderManager Post at 1-2-2010 02:10 PM http://mforum3.cari.com.my/images/common/back.gif
iframe?
camne tuh?
erk..iframe tuh dekat laptop aku dia detect sbgai virus uuu...{:3_89:} http://www.w3schools.com/TAGS/tag_iframe.asp
Pages:
[1]