www.webdeveloper.com
Results 1 to 10 of 10

Thread: Menu HTML Code

  1. #1
    Join Date
    Jun 2012
    Posts
    7

    Menu HTML Code

    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

  2. #2
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,097
    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
    Last edited by donatello; 08-03-2012 at 07:20 AM. Reason: Fixed DIVs

  3. #3
    Join Date
    Jun 2012
    Posts
    7
    Quote Originally Posted by donatello View Post
    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

  4. #4
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,097
    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/

  5. #5
    Join Date
    Jun 2012
    Posts
    7
    Quote Originally Posted by donatello View Post
    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

  6. #6
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,097
    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.

  7. #7
    Join Date
    Jun 2012
    Posts
    7
    Quote Originally Posted by donatello View Post
    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?

  8. #8
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,097
    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.

  9. #9
    Join Date
    Jun 2012
    Posts
    7
    Quote Originally Posted by donatello View Post
    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>

  10. #10
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,097
    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>
    Last edited by donatello; 08-07-2012 at 04:22 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles