Jag använder en position:fixed-baserad layout på en webbplats, där jag har en fast meny upptill (position:fixed) och en till vänster (position:fixed) medan själva innehållet är position:absolute.
Ett litet problem uppstår om jag har ett långt textdokument med bookmarks, för då hamnar bokmärket ungefär på top:0px, vilket gör att det döljs under den övre menyn.
Jag har testat att sätta position:fixed på innehållet, men då går det inte att scrolla.
Finns det någon lösning? Det behöver bara fungera i Mozilla och nyare Opera, då äldre browsers som t ex MSIE får position:absolute på allt pga att jag lagt position:fixed stildeklarationerna i css2-selectors.
position:fixed och bookmarks
5 svar · 307 visningar · startad av higa
Kan du visa lite kod? Vad menar du med bookmarks?
Men bokmärken menar jag a[name]-taggar
Här är en strippad version, utan bugwardskompatibilitet med MSIE och sånt (vill inte nuka tråden :))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body {margin: 0px; padding: 0px;}
#head, #menu {position: fixed}
#head {left: 0px; top: 0px; right: 0px; background: silver; border: 2px solid gold; height: 100px; z-index:20}
#menu {left: 0px; top: 102px; bottom: 0px; background: silver; border: 2px solid gold; width: 150px; z-index: 30}
#content {position: absolute; left: 154px; top: 104px; padding: 4px; z-index:10}
#content p {word-spacing: 20px; letter-spacing: 4px; font-size: 20px; line-height: 200%; width: 200px;}
-->
</style>
</head>
<body>
<div id="head">
Logotyp och sånt här...
</div>
<div id="menu">
Navigering
<a href="#underrubrik">Länk</a>
...
</div>
<div id="content">
<h1>Rubrik</h1>
<p>Text text text text Text text text text<br />Mer text text text text
Text text text text Text text text text<br />Mer text text text text</p>
<h2><a name="underrubrik">Syns jag?</a></h2>
<p>Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text</p>
</div>
</body>
</html>
När jag klickar på länken i menyn till vänster för att komma åt bokmärket a[name="underrubrik"] så hamnar bokmärket (som nu för tydlighetens skull ligger i en h2) på top: 0px istället för top: 104px som skulle krävas för att bokmärkstexten inte ska döljas under #head.
Hur gör jag för att få önskat beteende?
Ah, nu förstår jag din fråga. Interessant sådan.
Om du använder dig av bokmärken så kan du tyvärr inte addera px, utan det blir automatiskt som du säger top:0;
Borde gå med Javascript/DOM dock.
Här är en lösning med lite javascript. Det finns ett bra skäl till varför jag använder en separat javascript-funktion. Man måste använda en setTimeout, eftersom onclick infaller före browsern går till href. Och då blir det enklare att bara anropa en funktion.
Funktionen kollar efter IE, men räknar då in Opera (Som är känd för att fejka IE)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body {margin: 0px; padding: 0px;}
#head, #menu {position: fixed}
#head {left: 0px; top: 0px; right: 0px; background: silver; border: 2px solid gold; height: 100px; z-index:20}
#menu {left: 0px; top: 102px; bottom: 0px; background: silver; border: 2px solid gold; width: 150px; z-index: 30}
#content {position: absolute; left: 154px; top: 104px; padding: 4px; z-index:10}
#content p {word-spacing: 20px; letter-spacing: 4px; font-size: 20px; line-height: 200%; width: 200px;}
-->
</style>
<script language="javascript" type="text/javascript"><!--
function fixScroll(){
if (!document.all || window.opera)
setTimeout ("window.scrollBy(0,-100)",50)
}
//--></script>
</head>
<body>
<div id="head" style="-moz-opacity: .5;">
Logotyp och sånt här...
</div>
<div id="menu">
Navigering
<a href="#underrubrik" onclick="fixScroll();">Länk (fixad)</a>
...
</div>
<div id="content">
<h1>Rubrik</h1>
<p>Text text text text Text text text text<br />Mer text text text text
Text text text text Text text text text<br />Mer text text text text</p>
<h2><a name="underrubrik">Syns jag?</a></h2>
<p>Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text
Text Text text text text</p>
</div>
</body>
</html>
Stort tack, nu funkar det perfa!