http://tagsoup.com/cookbook/css/fixed/top/fandt også den her i et andet spørgsmål, men kan bare ikke få lortet til at virke.. jeg aner ikke hvad jeg gør galt, for kopierer kilden direkte ind som den er?
her har jeg dog smidt style og js filen ind også, men det virkede heller ikke hvor de var i seperate filer
<!-- quirksmode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Demo: fixed top bar for IE/windows >= 5</title>
<style type='text/css'>
body
{
margin: 0;
padding: 8em 0 0 0;
color: #000;
background: #fff;
font-size: 1em;
}
div#fixedbox
{
overflow: auto;
width: 100%;
height: 8em;
position: absolute;
top: 0;
left: 0;
color: #000;
background: #ddd;
}
div#content
{
padding: 1em;
}
@media screen
{
body>div#fixedbox
{
position: fixed;
}
/* Very ugly fix for page anchors */
ol>li#dog3
{
margin-top: -8em;
padding-top: 8em;
}
}
</style>
<!--[if lte IE 7]>
<link href="./fixed4ie.css" rel="stylesheet" type="text/css">
<script type="text/javascript">onload = function() { content.focus() }</script>
<![endif]-->
<script type='text/javascript'>
if(document.getElementById)
{
if(window.attachEvent)
{
window.attachEvent('onload',init);
}
else if(window.addEventListener)
{
window.addEventListener('load',init,false);
}
var initialContent,initialFixed;
}
function init()
{
document.getElementById('scriptkid').innerHTML =
'<input id="play" type="button" value="Start playing">';
document.getElementById('play').onclick = scriptIt;
}
function scriptIt()
{
initialContent = document.getElementById('content').innerHTML;
initialFixed = document.getElementById('fixedbox').innerHTML;
var topLess = (window.location.pathname.toString().match(/top(-left)?\/$/))
? 'jump to <a href="#dog2">2nd</a>, '
+ '<a href="#dog3">3rd</a> or '
+ '<a href="#dog100">last</a> dog'
: '<a href="#dog100">end of file</a>'
;
var colSwap = (window.location.pathname.toString().match(/legacy\/$/))
? '<input id="swap" type="hidden" value="Swap contents"> '
: '<input id="swap" type="button" value="Swap contents"> '
;
var quirk = (document.compatMode)
? ' <small>(<code>document.compatMode</code>: ' + document.compatMode + ')</small>'
: null
;
var dogs = '';
for(var i = 2; i < 100; i++)
{
dogs += '<li id="dog' + (i + 1) + '">The quick brown fox jumped over ' + i + ' lazy dogs.</li>\n';
}
document.getElementById('content').innerHTML =
'<h1>Acid tests' + quirk + '</h1>' +
'<p>' + colSwap +
'<input id="camel" type="button" value="Toggle non-breaking string"> ' +
'<input id="go" type="button" value="Toggle list"> ' +
'<span id="eof"> | ' + topLess + ' </span> || ' +
'<input id="reset" type="button" value="Reset"> ' +
'</p>' +
'<p id="caravan">thisIsAnIncrediblyLongStringOfTextIn' +
'<a href="
http://catb.org/~esr/jargon/html/C/camelCase.html">CamelCase</a>' +
'WhichIsReallyAnnoyingToReadButUsefulToDemonstrateWhatHappensWhen' +
'AHorizontalScrollbarMaterialisesOnAPageLikeThisParticularOneNevertheless.</p>' +
'<ol id="fox">' +
'<li id="dog1">The quick brown fox jumps over the lazy dog.</li>' +
'<li id="dog2">The quick brown fox jumped over 1 lazy dog.</li>' +
dogs +
'</ol>'
;
var widgets = document.getElementsByTagName('INPUT');
var i = widgets.length;
while(i--)
{
widgets[i].style.verticalAlign = 'middle';
}
document.getElementById('caravan').style.display = 'none';
getIt();
}
function getIt()
{
document.getElementById('swap').onclick = swapIt;
document.getElementById('camel').onclick = camelCase;
document.getElementById('go').onclick = dogHausse;
document.getElementById('reset').onclick = reloadIt;
}
function swapIt()
{
var col1 = document.getElementById('fixedbox');
var col2 = document.getElementById('content');
var con1 = col1.innerHTML;
var con2 = col2.innerHTML;
col1.innerHTML = con2;
col2.innerHTML = con1;
getIt();
}
function reloadIt()
{
document.getElementById('content').innerHTML = initialContent;
document.getElementById('fixedbox').innerHTML = initialFixed;
init();
}
function camelCase()
{
disTract('caravan');
}
function dogHausse()
{
disTract('fox');
document.getElementById('eof').style.display =
(document.getElementById('fox').style.display == 'none')
? 'none'
: ''
;
}
function disTract(elm)
{
state = document.getElementById(elm).style;
state.display = (state.display == 'none') ? '' : 'none' ;
}
</script>
</head>
<body>
<div id='content'>
<div><a href='../#gtev5'>context</a></div>
<hr>
<h1>Fixed top bar for <abbr>IE</abbr>/windows <code>>=</code> 5</h1>
<p id='scriptkid'>This is a simple template page; for browsers with support for J(ava)Script some additional test features are available.</p>
<h2>Caveats</h2>
<p>This is a potentially harmful usage scenario for fixed content.</p>
<ul>
<li>the height of the top bar is dependant on the unknown ratio between its content’s length and the viewport width</li>
<li>in <em>other</em> UAs than IE/Windows you need to resort to ugly hacks in order to make page anchors work</li>
<li>the browser’s back button does generally not work after jumping to a page anchor in an overflowing box; for IE/Windows this also affects the content area</li>
</ul>
<hr>
<address>2004–2006 Eric Bednarz</address>
</div>
<div id='fixedbox'>
The quick brown fox is stuck in this box.
</div>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
