Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Creating a website with a floating menu.

Posted on 2010-09-11
7
Medium Priority
?
330 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 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 4

Expert Comment

by:acashok
ID: 33659703
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
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…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

609 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