Solved

Creating a website with a floating menu.

Posted on 2010-09-11
7
326 Views
Last Modified: 2012-05-10
I am trying to get the navigation to travel with me, how do i do this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<LINK REL=StyleSheet HREF="css/main.css" TYPE="text/css" MEDIA="screen">
<LINK REL=StyleSheet HREF="css/print.css" TYPE="text/css" MEDIA="print">
<style>
<style>
#caption {
	font-size: 8pt;
	text-transform:uppercase;
	color: #ffffff;
	height: 512px;
	width: 357px;
	padding: 38px;
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	vertical-align: middle;
	white-space: normal;
}
#caption-text {
	overflow: scroll;
	position: relative;
	height: 512px;
	width: 357px;
	visibility: visible;
	text-align: left;
	vertical-align: middle;
	clear: both;
}
</style>
</head>
<body>
	<table id="inside" width="95%" border="5">
    	<tr>
        	<td valign="top" align="left" width="10%">
		<div id="navigation">
<p style="font-weight:bold">Navigation</p>
<p>
  <?
$base == "http://www.somewebsite.com";
echo "<p><a href=\"$base/index.php\">Home</a></p>";
if (file_exists ("page002.php")) {
echo "<p><a href=\"$base/page002.php\">Page 2</a></p>";
} else {
}
if (file_exists ("page003.php")) {
echo "<p><a href=\"$base/page003.php\">Page 3</a></p>";
} else {
}
if (file_exists ("page004.php")) {
echo "<p><a href=\"$base/page004.php\">Page 4</a></p>";
} else {
}
if (file_exists ("page005.php")) {
echo "<p><a href=\"$base/page005.php\">Page 5</a></p>";
} else {
}
if (file_exists ("page006.php")) {
echo "<p><a href=\"$base/page006.php\">Page 6</a></p>";
} else {
}
if (file_exists ("page007.php")) {
echo "<p><a href=\"$base/page007.php\">Page 7</a></p>";
} else {
}
if (file_exists ("page008.php")) {
echo "<p><a href=\"$base/page008.php\">Page 8</a></p>";
} else {
}
if (file_exists ("page009.php")) {
echo "<p><a href=\"$base/page009.php\">Page 9</a></p>";
} else {
}
if (file_exists ("page010.php")) {
echo "<p><a href=\"$base/page010.php\">Page 10</a></p>";
} else {
}
if (file_exists ("page011.php")) {
echo "<p><a href=\"$base/page011.php\">Page 11</a></p>";
} else {
}
if (file_exists ("page012.php")) {
echo "<p><a href=\"$base/page012.php\">Page 12</a></p>";
} else {
}
if (file_exists ("page013.php")) {
echo "<p><a href=\"$base/page013.php\">Page 13</a></p>";
} else {
}
if (file_exists ("page014.php")) {
echo "<p><a href=\"$base/page014.php\">Page 14</a></p>";
} else {
}
if (file_exists ("page015.php")) {
echo "<p><a href=\"$base/page015.php\">Page 15</a></p>";
} else {
}
if (file_exists ("page016.php")) {
echo "<p><a href=\"$base/page016.php\">Page 16</a></p>";
} else {
}
if (file_exists ("page017.php")) {
echo "<p><a href=\"$base/page018.php\">Page 17</a></p>";
} else {
}
if (file_exists ("page018.php")) {
echo "<p><a href=\"$base/page011.php\">Page 18</a></p>";
} else {
}
if (file_exists ("page019.php")) {
echo "<p><a href=\"$base/page011.php\">Page 19</a></p>";
} else {
}
if (file_exists ("page020.php")) {
echo "<p><a href=\"$base/page011.php\">Page 20</a></p>";
} else {
}
echo "</td>";
?>
</p>
<p></p>
</div>
            </td>
            <td valign="top">
              <table id="pic-n-capt" border="1">
                <tr>
              			<td width="357" height="512">
			            	<img src="image file path.png" alt="" width="357" height="512" />
    					</td>
<td align="center" valign="middle" id="caption">
                        	<div id="caption-text">
                            	<p>long string of text</p>
                            </div>
          			</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
          <!-- End Body Table -->
</body>
</html>

Open in new window

0
Comment
Question by:RalphS007
7 Comments
 
LVL 2

Expert Comment

by:WilliamStam
ID: 33655429
use position:fixed in a style

<div style="background-color:#0F0; display:block; height:30px; position:fixed; top:0px;">stays at the top</div>

this isnt quite a php issue :P
0
 
LVL 2

Accepted Solution

by:
WilliamStam earned 500 total points
ID: 33655435
lol ok im new to actualy answering things on this site..
<div style="background-color:#0F0; display:block; height:30px; position:fixed; top:0px;">
stay at the top
</div>

<div style="background-color:#0F0; display:block; height:30px; position:fixed; bottom:0px;">
stay at the bottom
</div>

Open in new window

0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 33656049
Hi There,
Was this something you were looking for the way the menu moves as you move up and down the page?

http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm

Dynamic Drive is a fantastic tool for things like this....

Hope it helps
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 33657743
Here is a good floating menu http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/ with demo and tutorial.

I used that script on my website www.bmwvideopost.com with the Social Media icons on the right. And for a customer here:http://www.vm-online.nl/
0
 
LVL 2

Expert Comment

by:WilliamStam
ID: 33657967
the jquery is just to cause the animated effect on it.. and to support ancient browsers. the basic position scroll works on all the current browsers (doesnt work in IE6 but then again... if the user uses ie6 them should go die...)

position fixed keeps the div in 1 place... no fluid motions etc. depends on what you want to do i guess. personaly i prefer the menu to stay in 1 place rather than "bounce" when i scroll
0
 
LVL 2

Expert Comment

by:WilliamStam
ID: 33657969
0
 
LVL 4

Expert Comment

by:acashok
ID: 33659703
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
php56-php-mcrypt for rhel7 php56 1 54
Accessing specific element - DOM PHP HTML 8 35
Wordpress Only run code if on a certain page 11 23
Copying table data to one another 15 31
Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question