SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu tabs overlap in Opera mini simulator

    Hi, I'm adapting a site for mobiles using media queries and one of the issues I have is that the menu tabs
    overlap in the opera mini simulator http://www.opera.com/developer/tools/mini/. The test page is www.profesornativo.com/e.htm

    Any idea on how to stop the overlapping? Thanks.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just a shot in the dark because I don't have a way to test...

    But on #navigation a{} try changing it to display:inline-block; and remove the min-width set on it.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but that doesn't seem to work. Now I'm trying to find an alternative solution, maybe <ul> list or something...ideally I would like to have a horizontal

    menu, in 2 horizontal lines for mobile screens, with 1 horizontal line for laptop screens (using block type backgrounds for each link).

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    It's much better to wrap menu links in an unordered lists anyhow. E.g.

    Code:
    <ul id="navigation">
      <li><a href="http://www.profesornativo.com/test_1.htm">Level test</a></li>
      <li><a href="http://www.profesornativo.com/exercises_1.htm">Exercises</a></li>   
      <li><a href="http://www.profesornativo.com/prices_1.htm"> Prices</a></li>
      <li><a href="#">Pronunciation</a></li>
    </ul>
    Then float those <li>s left, or set them to display: inline-block. That will be a much more bulletproof menu.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    And if you still want it centered you can just give that #navigation list, in Ralphs code, a width and margin:0 auto; to center (it will also need overflow:hidden; to contain the floated links now) . That's assuming you go the floating route.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But I hear floats and media queries don't go well together..I have just tried the <ul id="navigation"> idea. The links now appear vertically, but maybe I didn't do it correctly - I will try a few other things. Thanks a lot!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)


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
  •