Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 132
  • Last Modified:

html - template

I just want to create a static simple template page where user can user can click on link and it redirect to different pages with this same template.
1. How can I add space between links? I can use " , but is it the right way to do this?
2. When the mouse hoover link, can it turns it to a button or highlighted like image attached?
3. How can I remove border on this table?


<!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>
</head>
<body>
    <div id="menu" style="background-color: #4d8f75;">
        <img src="test.gif" />
        <a href="http://mysite/home.html">Home</a>
        <a href="http://mysite/documents.html">Documents</a>
        <a href="http://mysite/purchased.html">Purchased</a>
        <a href="http://mysite/Ordered_by.html">Orderedby</a>
        <a href="http://mysite/internal_sales.html">Internal Sales</a>
        <a href="http://mysite/Customername.html">Customer Name</a>
       
    </div>
    <div>
        Content goes here
    </div>
</body>
</html>
button.jpg
0
VBdotnet2005
Asked:
VBdotnet2005
  • 4
  • 2
1 Solution
 
RobOwner (Aidellio)Commented:
Yes you can do that with some help from JavaScript and more specifically, jQuery as it will make it easier and not so long winded.

Is there a reason you're using a HTML4 doctype?  All the major browsers support HTML5 so it is now accepted practice to use the HTML5 doctype.

This is untested but should do what you want:
<!DOCTYPE html>
<html>
	<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
		<meta charset="utf-8">
		<title>JS Bin</title>
	</head>
	<body>
		<div id="menu" style="background-color: #4d8f75;">
			<img src="aspen.gif" />
			<a href="#" onclick='$("#content").load("home.html");'>Home</a>
			<a href="#" onclick='$("#content").load("documents.html");'>Documents</a>
			<a href="#" onclick='$("#content").load("purchased.html");'>Purchased</a>
			<a href="#" onclick='$("#content").load("Ordered_by.html");'>Orderedby</a>
			<a href="#" onclick='$("#content").load("internal_sales.html");'>Internal Sales</a>
			<a href="#" onclick='$("#content").load("Customername.html");'>Customer Name</a>

		</div>
		<div id="content">
			Content goes here
		</div>
	</body>
</html>

Open in new window

0
 
VBdotnet2005Author Commented:
Where can I download this jury file?
0
 
RobOwner (Aidellio)Commented:
It will do it automatically.  jQuery is in the top of the code i posted:

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
VBdotnet2005Author Commented:
It does not work for me. I am using Visual Studio 2010. Does it makes a difference? Also, how does it knows to go to Home when you changed <a href="http://mysite/home.html">Home</a>   to <a href="#" onclick='$("#content").load("home.html");'>Home</a>

<!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>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
		<meta charset="utf-8">
		<title>JS Bin</title>
	</head>
	<body>
		<div id="Div1" style="background-color: #4d8f75;">
			<img src="aspen.gif" />
			<a href="#" onclick='$("#content").load("home.html");'>Home</a>
			<a href="#" onclick='$("#content").load("documents.html");'>Documents</a>
			<a href="#" onclick='$("#content").load("purchased.html");'>Purchased</a>
			<a href="#" onclick='$("#content").load("Ordered_by.html");'>Orderedby</a>
			<a href="#" onclick='$("#content").load("internal_sales.html");'>Internal Sales</a>
			<a href="#" onclick='$("#content").load("Customername.html");'>Customer Name</a>


		</div>
		<div id="content">
			Content goes here
		</div>
	</body>
</html>

Open in new window

0
 
RobOwner (Aidellio)Commented:
<a href="#" onclick='$("#content").load("home.html");'>Home</a>

this just says when you click me, load the html from home.html into the tag with the id = "content"
0
 
RobOwner (Aidellio)Commented:
Sorry, I'm not sure if Visual Studio makes a difference.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now