Results 1 to 5 of 5

Thread: Menu position

  1. #1
    Join Date
    Jan 2013
    Location
    Sweden
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Menu position

    I am working on a website and I think it looks pretty good but I have a problem. The menu bar wont go to the place itīs supposed to be.
    I have uploaded the page here so you can take a look at it. Please Help.

  2. #2
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    Hey Grim Not really sure what you want to accomplish. Could you give a few more details about what you are trying to achieve?

  3. #3
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    Also in the code for your menu, you may want to seperate your hrefs into individual elements instead of including them all as a single <h1> element i.e.
    Code:
    <h1>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="portfolio.html">Portfolio</a>
      <a href="contact.html">Contact</a>
    </h1>
    This will allow for manipulation of each element in your menu individually.

    Also there is a closing paragraph </p> with no opening one.

  4. #4
    Join Date
    Jan 2013
    Location
    Sweden
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry for not telling what I want to accomplish. I want the menu to go up a bit to the dark top area.
    I have fixed the code a little now but it still looks the same.

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 313 Times in 311 Posts
    Blog Entries
    12

    Default

    Hi Grim

    The first thing is to ensure consistency across browsers, so use a valid DOCTYPE - with the Markup you have, I think this one will suit;
    Code:
    <!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>.....etc.
    Next thing is with those H1 tags.

    For SEO purposes, only include one set if those in a page (the other H tags can be used in any quantity). That being said, you need to make sure that you're using the most appropriate tag for the job and your menu isn't something that needs to be surrounded by the H1 tags - 1, they're telling Google that the menu is the main heading for the web page (which it isn't) and, 2, heading tags come with their own padding/margin so that's why you're having problems with positioning (you're wanting to put your menu to the top of the page but the default H1 padding is pushing it down)

    BTW - default H1 tag margin/padding varies in different browsers (as they do on other html elements) so its common practice to zero them out on critical elements and style things yourself to guarentee more pixel-perfect placement. Lots of folk use a global reset like these: http://www.cssreset.com/ (the universal reset is the shortest, although it does cause more work for the browser to apply them all - the Eric Meyer one is the one I like, but adapted to each project)

    So remove the H1 tags around the menu links and style your menu with its own dedicated CSS. I suspect that's why you've used the H1 tags - to make the text bigger? Try this, and alter the font-size however you like;
    Code:
    #menu {
    padding:0;
    margin:0;
    font-size:14pt;
    font-weight:bold;
    }
    Last edited by Beverleyh; 02-09-2013 at 11:11 AM. Reason: zeroing padding/margin comment + css reset link added
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Replies: 1
    Last Post: 10-09-2011, 01:16 PM
  2. Chrome Menu - difficulties with drop down menu position
    By birgitsax in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 06-18-2011, 02:30 PM
  3. Replies: 3
    Last Post: 05-22-2007, 04:25 AM
  4. AnyLink CSS Menu: change the position of the menu
    By coruscantcity in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 04-20-2006, 02:43 PM
  5. position of menu
    By mbergen in forum JavaScript
    Replies: 0
    Last Post: 08-04-2005, 04:38 PM

Bookmarks

Posting Permissions

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