Solved

Creating a website with a floating menu.

Posted on 2010-09-11
7
327 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
while read ID; do 4 56
Hide and Unhide Table 6 26
How to use 2 ON statements in inner join 3 27
Web page design problem 3 18
This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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 …

733 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