Jump to content

Css Menus

Diablo

By Diablo
in CSS

 Share

Recommended Posts

Diablo Newbie

Diablo

Posted
Posted (edited)

i have the same menu on ever page of my website. is there a way to only have to create the menu once and load html pages into the body of the website. sort of like frames, but with out having to use frames.My websitehttp://ultrapcgear.comMy Website code

<!--I used notpad to edit the text. still have not figured out all the end and outs of css, but i am having a lof to fun learning about it.--><html>	<head>		<meta name="author" content="Diablo, admin@ultrapcgear.com">	<meta name="content-language" content="English">	<meta name="revisit-after" content="1 day">	<title>UltraPcGear.com</title>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		<meta name="description" content="computers, help, components, examples" />		<meta name="keywords" content="Computer Components, Computer Parts, LCD Monitors, Video Cards, Processors and 	CPUs, Computer Memory, RAM, 	Laptops, Motherboards, PC Speakers, Sound cards" />		<link href="mycss.css" rel="stylesheet" type="text/css" />	</head>	<body>	<div id="header">			<a href="http://UltraPcGear.com"><img src="ultrabanner.JPG" alt="Banner">		</div>		<div id="navigation">		<h2>Navigation</h2>		<a href="http://ultrapcgear.com/index.html"><strong>HOME</strong></a><br>		<a href="http://ultrapcgear.com/phpbb/index.php" target="_blank"><strong>FORUM</strong></a><br>		<a href="http://ultrapcgear.com/cblog" target="_blank"><strong>BLOG</strong></a><br>		<a href="http://ultrapcgear.com/mwiki/index.php?title=Main_Page" target="_blank"><strong>WIKI</strong></a><br>		<a href="http://ultrapcgear.com/cpg/index.php" target="_blank"><strong>PHOTOS</strong></a><br>		<a href="http://ultrapcgear.com/jobs.html"><strong>JOBS</strong></a><br>		<a href="http://ultrapcgear.com/FeedBack_New.html" target="_blank"><strong>FEEDBACK</strong></a><br>		<a href="http://ultrapcgear.com/links.html"><strong>LINKS</strong></a><br>		<a href="http://ultrapcgear.com/resume.html"><strong>RESUME</strong></a><br></div><div id="centerDoc">	<h1>Articles</h1>			<h2>November 2nd, 2006</h2><h3><a href="http://ultrapcgear.com/windows1.html">Windows Logo Key short cuts</a></h3><li>Windows: Display the Start menu.<br><li>Windows + D: Minimize or restore all windows. <br><li>Windows + E: Display Windows Explorer. <br><li>Windows + F: Display Search for files. <br><li>Windows + Ctrl + F: Display Search for computer. <br><li>Windows + F1: Display Help and Support Center. <br><li>Windows + R: Display Run dialog box. <br><li>Windows + break: Display System Properties dialog box. <br><li>Windows + shift + M: Undo minimize all windows. <br><li>Windows + tab: Move through taskbar buttons. <br><li>Windows + L: Lock the workstation (or switch to the Logon screen w/Fast User Switching enabled). <br><li>Windows + U: Open Utility Manager.<br>	</div></body></html>

My Css Code

/* Generic Selectors */body {background-color: #B0C4DE;font-family: Georgia, "Times New Roman", Times, serif;font-size: 14px;color: #000000;}h1 {font-family: Georgia, "Times New Roman", Times, serif;font-size: 18px;font-weight: bold;color: #000000;}h2 {font-family: Georgia, "Times New Roman", Times, serif;font-size: 16px;font-weight: bold;color: #000000;border-bottom: 10px solid #6A5ACD;}h3 {font-family: Georgia, "Times New Roman", Times, serif;font-size: 14px;color: #000000}/**************** Pseudo classes ****************/:link {color: #0000FF;text-decoration: underline;font-weight: bold;}/*:visited {color: #00FF00;text-decoration: underline;font-weight: bold;}*/:hover {color: rgb(0, 255, 0);padding-bottom: 5px;font-weight: bold;text-decoration: underline;}:active {color: rgb(255, 0, 102);font-weight: bold;}/************************* ID's *************************/#navigation {position: absolute;z-index: 10;width: 150px;height: 800px;margin: 0;margin-top: 10px;border-right: 15px solid #778899;font-weight: bold;}#centerDoc {z-index: 15;padding: 0 0 20px 210px; /*top right bottom left*/margin-top: 10px;}#header {position: top;border-bottom: 15px solid #778899;}

Edited by Diablo
Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

The only ways that I know how to do this are 1) using server side solution (ASP.NET, PHP, etc) to either include your navigation from another file or write it directly to the page or 2) using javascript to write the HTML directly to your page.If you had a javascript file - let's call it navigation.js - like this:

document.write('<a href="page1.html">Page One</a><br />');

Your HTML page could then look like this:

<html><head></head><body><!-- Some content goes here --><!-- Navigation goes here --><script type="text/javascript" src="navigation.js"></script><!-- More content goes here --></body></html>

The main limitation with this is that a visitor could have javascript disabled in his/her browser which would mean that your navigation wouldn't be included for that visitor. The best bet, if you can do it, is to use a server side solution (ASP, ASP.NET, PHP, etc).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...