Solved

Creating a website with a floating menu.

Posted on 2010-09-11
7
323 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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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 the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now