Menu HTML Code

**Casterina** · 08-03-2012 05:07 AM

I'm trying to put three rectangle menu like this on the website,

http://i.imgur.com/Hh04v.png

Here's the link to the website,

http://tinyurl.com/csxobsa

**donatello** · 08-03-2012 07:06 AM

HTML Code:

<html>
<head>
 <title>Three DIVs</title>
<style type="text/css">
div.container {width:900px; margin:auto}
div.left {float:left; width:278px; padding:10px;background:#eef;border:1px dotted #0f0;}
div.center {float:left; width:278px; padding:10px;background:#fee;border:1px dotted #f00;}
div.right {float:right; width:278px; padding:10px;background:#efe;border:1px dotted #00f;}
div.clear{width:100&#37;; clear:both;}
</style>
</head>
<body>
<div class="container" >
 <div class="left">
   <h1>Menu 1</h1>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
 </div>
 <div class="center">
      <h1>Menu 2</h1>
       <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
       </ul>
 </div>
 <div class="right">
      <h1>Menu 3</h1>
        <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
 </div>
<div class="clear"></div>
</div>
</body>
</html>

It works: http://companypolicies.org/test/test.html

**Casterina** · 08-03-2012 07:24 AM

Originally Posted by donatello

HTML Code:

<html>
<head>
 <title>Three DIVs</title>
<style type="text/css">
div.container {width:900px; margin:auto}
div.left {float:left; width:278px; padding:10px;background:#eef;border:1px dotted #0f0;}
div.center {float:left; width:278px; padding:10px;background:#fee;border:1px dotted #f00;}
div.right {float:right; width:278px; padding:10px;background:#efe;border:1px dotted #00f;}
div.clear{width:100%; clear:both;}
</style>
</head>
<body>
<div class="container" >
 <div class="left">
   <h1>Menu 1</h1>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
 </div>
 <div class="center">
      <h1>Menu 2</h1>
       <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
       </ul>
 </div>
 <div class="right">
      <h1>Menu 3</h1>
        <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
 </div>
<div class="clear"></div>
</div>
</body>
</html>

It works: http://companypolicies.org/test/test.html

Thanks for the help, is there a code for three rectangle menu which I'll use a JPG file and a URL to direct to a file which the align will be left, middle and right

**donatello** · 08-03-2012 07:49 AM

I'm not sure I understand what it is you are trying to do.

If you are trying to hand-code a site from scratch, I would recommend you look into a content management system like WordPress that will get the job done fast and it will look professional.

Template Monster has a lot of ready-to-go templates for restaurants. You can also get free ones from Wordpress.org

Here is exactly what you pictured and the code:
http://companypolicies.org/test/test2.html

HTML Code:

<html>
<head>
 <title>Three DIVs</title>
<style type="text/css">
div.container {width:900px; margin:auto; background:#eee; border:dashed #777; padding:50px; height:600px;}
div.left {float:left; width:240px; padding:10px; background:#eef; border:1px dotted #0f0;}
div.center {float:left; margin-left:50px; width:240px; padding:10px; background:#fee; border:1px dotted #f00;}
div.right {float:right; width:240px; padding:10px; background:#efe; border:1px dotted #00f;}

div.clear{width:100%; clear:both;}
.center {text-align:center}
</style>
</head>
<body>
<div class="container" >
<span class="center"><h1>Menus</h1></span>
 <div class="left">
   <h2>Sub-Menu 1</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
 </div>
 <div class="center">
      <h2>Sub-Menu 2</h2>
       <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
       </ul>
 </div>
 <div class="right">
      <h2>Sub-Menu 3</h2>
        <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
 </div>
<div class="clear"></div>
</div>
</body>
</html>

That's the way to do it.
You might also find the menus you like using jQuery, but that's a bit advanced.
http://jqueryui.com

If you want to try jQuery, they have a 'theme roller' where you can 'roll your own' theme using jQuery.

http://jqueryui.com/themeroller/

**Casterina** · 08-03-2012 08:00 AM

Originally Posted by donatello

I'm not sure I understand what it is you are trying to do.

In the three rectangle shown in the image below,

http://i.imgur.com/Hh04v.png

I want to put a JPG image file in each rectangle shape with a direct link to a PDF file which will open when clicked

**donatello** · 08-03-2012 08:08 AM

It's done.

All you need to do is put in your images with the links.

HTML Code:

<a href="http://www.YOURSITE.com/files/YOURPDF.pdf"><img src="http://YOURSITE.com/images/YOURIMAGE.jpg" border="0"></a>

Again, look into a content management system.
This is not the best way to put hyperlinks on your site as Google will not index the page optimally and you will lose customers.

Ideally, all documents you link to should have text links as well as an image link - if you MUST use image links.

Good luck.

**Casterina** · 08-03-2012 08:39 AM

Originally Posted by donatello

It's done.

All you need to do is put in your images with the links.

HTML Code:

<a href="http://www.YOURSITE.com/files/YOURPDF.pdf"><img src="http://YOURSITE.com/images/YOURIMAGE.jpg" border="0"></a>

Again, look into a content management system.
This is not the best way to put hyperlinks on your site as Google will not index the page optimally and you will lose customers.

Ideally, all documents you link to should have text links as well as an image link - if you MUST use image links.

Good luck.

How do I align the code to left, middle and right?

What's the best way to do it so Google will index the page?

**donatello** · 08-06-2012 05:05 AM

You really need to read a book on HTML, CSS and perhaps should look into learning a "CMS" (Content Management System) like "WordPress".

You have a long way to go, and it is best to get a good foundation from a simple book on HTML, or an online course.

Good luck!

To align something to the left, say all images, the best way is with CSS

HTML Code:

<style type="text/css">
img {
     text-align:left;
}
</style>

To get Google to index your page is a huge question and you need to read up on "SEO" - Search Engine Optimization.
It is far too involved and complex for people to teach you from zero on this site, but you MUST get some books on SEO and read them by yourself. There simply is no other way to learn it.

**Casterina** · 08-06-2012 05:48 AM

Originally Posted by donatello

You really need to read a book on HTML, CSS and perhaps should look into learning a "CMS" (Content Management System) like "WordPress".

You have a long way to go, and it is best to get a good foundation from a simple book on HTML, or an online course.

Good luck!

To align something to the left, say all images, the best way is with CSS

HTML Code:

<style type="text/css">
img {
     text-align:left;
}
</style>

To get Google to index your page is a huge question and you need to read up on "SEO" - Search Engine Optimization.
It is far too involved and complex for people to teach you from zero on this site, but you MUST get some books on SEO and read them by yourself. There simply is no other way to learn it.

Can I set the align using HTML code?

HTML Code:

<a href="http://www.YOURSITE.com/files/YOURPDF.pdf"><img src="http://YOURSITE.com/images/YOURIMAGE.jpg" border="0"></a>

**donatello** · 08-07-2012 04:19 AM

Yes.
I think CSS is better though.

HTML Code:

<a href="http://www.YOURSITE.com/files/YOURPDF.pdf"><img src="http://YOURSITE.com/images/YOURIMAGE.jpg" border="0" align="left" /></a>

You can also use 'inline CSS':

HTML Code:

<a href="http://www.YOURSITE.com/files/YOURPDF.pdf"><img src="http://YOURSITE.com/images/YOURIMAGE.jpg" border="0" style="text-align:left" /></a>

Thread: Menu HTML Code

Thread Tools

Display

Menu HTML Code

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions