html - Menu / Table, som følger dig... - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #8860 @ 09.03.06 18:50

Jeg har opdateret spørgsmålet, kig på min kommentar længere ned af sitet.

Tak

Indlæg senest redigeret d. 11.03.2006 12:33 af Bruger #8860

6 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #6088 @ 13.03.06 10:03

XyborX -> Den skal virke i IE - desværre :-(

Nicklas Oranen-> Din kode virker desværre heller ikke.

Men tusinde tak for jeres hurtige svar...

Kan I ikke blive ved med at prøve!

Ja så skulle det virke med det samme script jeg skrev før..

Kode

 <html>
  <head>
	<title>Blomster</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href="opgave.css" rel="stylesheet" type="text/css">
  </head>
  <style>
  /* CSS Document */

body {
	background-image: url("Back.jpg");
	margin: 0;
	}	
	
p {
	font-family: Verdana;
	font-size: 12px;
	line-height: 25px;
	margin-left: 20px; 
	margin-right: 20px;	
	}
	
h1 {
	font-family: Verdana;
	font-size: 15px;
	}

table {
	background: #FFFFFF;
	}

a {
	font-family: Verdana;
	font-size: 12px;
	line-height: 25px;
	color: #000000;
	}

#menu {
	background: #CCFFCC;
	}
	
#print {
	color: #FFFFFF;
	text-align: right;
	}
  </style>
  <body>
  <script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table id="menu" align="center" width="100%" cellpadding="0" cellspacing="0" border="1"><tr>
		<td align="center"><a id="menu" href="index.htm#0">0</a></td>
		<td align="center"><a id="menu" href="index.htm#1">1</a></td>
		<td align="center"><a id="menu" href="index.htm#2">2</a></td>
		<td align="center"><a id="menu" href="index.htm#3">3</a></td>
		<td align="center"><a id="menu" href="index.htm#4">4</a></td>
		<td align="center"><a id="menu" href="index.htm#5">5</a></td>
		<td align="center"><a id="menu" href="index.htm#6">6</a></td>
		<td align="center"><a id="menu" href="index.htm#7">7</a></td>
		<td align="center"><a id="menu" href="index.htm#8">8</a></td>
	</tr>
</table>
<!--END OF EDIT-->

</layer>


<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

var verticalpos="fromtop"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 0,
startY = 0;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

<br>
   <p id="print"><a id="print" href="blomster.doc">Udskriftsvenlig version</a></p>
  <br>
 
<table align="center" width="750" cellpadding="0" cellspacing="0" border="0">
<tr><td><a name="0"></a><h1>» 0</h1>
<p>H
</p></td></tr><tr><td><br><a name="1"></a><h1>» 1</h1>
<p>H
</p></td></tr><tr><td><br><a name="2"></a><h1>» 2</h1>
<p>H
</p></td></tr><tr><td><br><a name="3"></a><h1>» 3</h1>
<p>H
</p></td></tr><tr><td><br><a name="4"></a><h1>» 4</h1>
<p>H
</p></td></tr><tr><td><br><a name="5"></a><h1>» 5</h1>
<p>H
</p></td></tr><tr><td><br><a name="6"></a><h1>» 6</h1>
<p>H
</p></td></tr><tr><td><br><a name="7"></a><h1>» 7</h1>
<p>H
</p></td></tr><tr><td><br><a name="8"></a><h1>» 8</h1>
<p>H
</p></td></tr></table>

</body>
</html>

Ellers andet? :-D

Bruger #2737 @ 10.03.06 23:15

Hvis det ikke behøver at virke i IE, så kan du bruge css:

Kode

#menu {
    position: fixed;
    left: 1em;
    top: 2em;
}

Bruger #8422 @ 11.03.06 08:35

133

[code="HTML"]
<div style="position: absolute; left: 2; top: 2;">
<table align="left">
<tr><td><a href="korstog.htm#0">Indledning</a> <br></td></tr>
<tr><td><a href="korstog.htm#1">1. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#2">2. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#3">3. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#4">4. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#5">5. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#6">6. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#7">7. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#8">8. Korstog</a> <br></td></tr>
</table>
</div>
[/code]

Er ikke 100% sikker på det virker, men mener at den gerne skulle følge.

Bruger #6088 @ 10.03.06 13:31

Halløjsa

Jeg er ikke sikker på hvad du mener men her er en menu hvor den følger dig når man scroller ned af siden. Der er brugt noget javascript:

Kode

<html>

<body>
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tr><td><a href="korstog.htm#0">Indledning</a> <br></td></tr>
<tr><td><a href="korstog.htm#1">1. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#2">2. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#3">3. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#4">4. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#5">5. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#6">6. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#7">7. Korstog</a> <br></td></tr>
<tr><td><a href="korstog.htm#8">8. Korstog</a> <br></td></tr></table><!--END OF EDIT-->

</layer>


<script type="text/javascript">

var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

</body>
</html>

Indlæg senest redigeret d. 10.03.2006 13:32 af Bruger #6088

Bruger #8860 @ 10.03.06 17:51

Jeg har prøvet, at implementere den, men der virker ikke - den fiser ned i bunden. Ellers tak for forsøget.
Jeg skal have lavet en ligende på denne side (Den der skal kunne følge en, er her

Denne gang har jeg ikke lavet noget i ASP

Kode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
  <head>
	<title>Blomster</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href="opgave.css" rel="stylesheet" type="text/css">
  </head>
 <body>

  <!--Menu-->
	<table id="menu" align="center" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
		<td align="center"><a id="menu" href="index.htm#0">0</a></td>
			<td align="center"><a id="menu" href="index.htm#1">1</a></td>
				<td align="center"><a id="menu" href="index.htm#2">2</a></td>
					<td align="center"><a id="menu" href="index.htm#3">3</a></td>
						<td align="center"><a id="menu" href="index.htm#4">4</a></td>
					<td align="center"><a id="menu" href="index.htm#5">5</a></td>
				<td align="center"><a id="menu" href="index.htm#6">6</a></td>
			<td align="center"><a id="menu" href="index.htm#7">7</a></td>
		<td align="center"><a id="menu" href="index.htm#8">8</a></td></tr></table>
  <!--Menu-->
  <br>
   <p id="print"><a id="print" href="blomster.doc">Udskriftsvenlig version</a></p>
  <br>
 
<table align="center" width="750" cellpadding="0" cellspacing="0" border="0">
<tr><td><a name="0"></a><h1>» 0</h1>
<p>H
</p></td></tr><tr><td><br><a name="1"></a><h1>» 1</h1>
<p>H
</p></td></tr><tr><td><br><a name="2"></a><h1>» 2</h1>
<p>H
</p></td></tr><tr><td><br><a name="3"></a><h1>» 3</h1>
<p>H
</p></td></tr><tr><td><br><a name="4"></a><h1>» 4</h1>
<p>H
</p></td></tr><tr><td><br><a name="5"></a><h1>» 5</h1>
<p>H
</p></td></tr><tr><td><br><a name="6"></a><h1>» 6</h1>
<p>H
</p></td></tr><tr><td><br><a name="7"></a><h1>» 7</h1>
<p>H
</p></td></tr><tr><td><br><a name="8"></a><h1>» 8</h1>
<p>H
</p></td></tr></table>

</body>
</html>

Og CSS ser sådan ud:

Kode

/* CSS Document */

body {
	background-image: url("Back.jpg");
	margin: 0;
	}	
	
p {
	font-family: Verdana;
	font-size: 12px;
	line-height: 25px;
	margin-left: 20px; 
	margin-right: 20px;	
	}
	
h1 {
	font-family: Verdana;
	font-size: 15px;
	}

table {
	background: #FFFFFF;
	}

a {
	font-family: Verdana;
	font-size: 12px;
	line-height: 25px;
	color: #000000;
	}

#menu {
	background: #CCFFCC;
	}
	
#print {
	color: #FFFFFF;
	text-align: right;
	}

De tomme p tags o. lign. er fordi, den elev som skal lave teksten ikke er færdig...
Kan I bedre hjælpe mig med denne her?

PS, det skal være noget ligende fx http://www.milonic.com/mfa/2002-July/001001.html - prøv at scrolle ned, og se at menuen følger med - øverst!

Indlæg senest redigeret d. 11.03.2006 12:41 af Bruger #8860

Bruger #8860 @ 11.03.06 10:53

XyborX -> Den skal virke i IE - desværre :-(

Nicklas Oranen-> Din kode virker desværre heller ikke.

Men tusinde tak for jeres hurtige svar...

Kan I ikke blive ved med at prøve! :lol:

Menu / Table, som følger dig...

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler