Web Analytics Made Easy -
StatCounter HTML sequence and positioning - CodingForum

Announcement

Collapse
No announcement yet.

HTML sequence and positioning

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • HTML sequence and positioning

    I have a problem with positioning. I have 3 menus, top, left and right. I want to make them as the following: one on the top, the next on the left, the page content and then the right menu.

    I made the following sequence in html: <div id="tmenu">Top menu</div>
    <div id="lmenu">Left Menu</div> <div id="content"> My content</div> <div id="rmenu">Right menu</div>

    but when I preview, everything is pretty messed up. How can I fix that? It is always a confusing thing to me to position menus and content the way I want. Can you help or explain how to, so I don't fall in the same problem again and again.

    I want something like this:

    top menu
    ---------------
    Menu | content | menu
    Last edited by Allen89; Aug 18, 2011, 11:47 AM.

  • #2
    That should be doable, but it depends on your css for all those styles you list. Can you show the css, or even better a link to the actual web page where you're testing this?

    Dave

    Comment


    • #3
      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>test!</title>
      <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
      </head>
      <body>
      
      <div id="tmenu">
      <ul>
      <li>Home</li>
      <li>Home Page</li>
      <li>Contact us</li>
      <li>Photos</li>
      <li>Help</li>
      </ul>
      </div>
      
      <div id="lmenu">
      <h3>Right menu</h3>
      <ul>
      <li>Home</li>
      <li>Home Page</li>
      <li>Contact us</li>
      <li>Photos</li>
      <li>Help</li>
      </ul>
      </div>
      
      <div class="content">
      
      <h1>Here my content goes</h1>
      
      </div>
      
      
      
      
      
      <div id="rmenu">
      <h3>Left menu</h3>
      <ul>
      <li>Home</li>
      <li>Home Page</li>
      <li>Contact us</li>
      <li>Photos</li>
      <li>Help</li>
      </ul>
      </div>
      
      
      
      
      
      </body>
      
      </html>

      Code:
      body {
      
      margin:0 auto;
      padding:10px;
      background:blue;
      border: 3px solid yellow;
      width:700px;
      height:900px;
      
      }
      
      div#tmenu li {
      
      list-style:none;
      float:left;
      padding:10px;
      
      }
      
      
      div#lmenu li {
      
      list-style:none;
      
      }
      
      div#rmenu li {
      
      list-style:none;
      
      
      }
      
      div#rmenu {
      
      float:left;
      
      }
      
      .content {
      
      float:left;
      
      }

      Comment


      • #4
        First, you're confusing me because in your #lmenu, you have the text that says "Right Menu" and in #rmenu, your text says "Left Menu". Regardless of the text inside, here's the css you need to accomplish what you want:

        Add these styles:
        Code:
        #tmenu {
        	width: 700px;
                overflow: hidden;
        }
        #lmenu {
        	float:left;	
        }
        and change the #rmenu from "float: left;" to "float: right;".
        WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

        Comment


        • #5
          Originally posted by resdog View Post
          First, you're confusing me because in your #lmenu, you have the text that says "Right Menu" and in #rmenu, your text says "Left Menu". Regardless of the text inside, here's the css you need to accomplish what you want:

          Add these styles:
          Code:
          #tmenu {
          	width: 700px;
                  overflow: hidden;
          }
          #lmenu {
          	float:left;	
          }
          and change the #rmenu from "float: left;" to "float: right;".
          Thank you so much! It works perfectly and sorry for the confusion. Can you explain why did you use "overflow"? I don't get it.

          Comment


          • #6
            because all of the elements inside the #tmenu div are floated, #tmenu isn't defined. Adding the overflow:hidden allows the items underneath it to treat it as a block element and go under it.
            WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

            Comment

            Working...
            X