SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    trying to get main nav and sub nav text to line up, tricky problem

    on this test page http://phpby.me/testcss/

    if you click "main link" the sub nav will pop up.

    I'm trying to get the 'M' in 'main link' to line up vertically with the 'S' in "Sub nav x", no matter how wide the viewport.

    "main link" is 30% of viewport width. Where as "sub nav x" is 100% of the parent width. so I can't apply the same amount of padding or text indent % because it's a percentage of different widths.

    1 idea I had was close... If I wrap the sub nav text in <span> and give that <span> a width of 30% ( and the text would overflow if need be ) to match the "main link" width I could apply the same, left padding for example. But "main link" is centered text, so it would only work if the main and sub nav text was the same font size and length, which probably won't be the case.

    Is it possible to make the text line up in this case?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The problem is that you are trying to maintain different things in different ways. The main nav text is centred but you are using percent for the subnav so they will never match up.

    I'd probably cheat and do this instead.

    Code:
    nav a{text-align:left;text-indent:40%}
    li.showSub > ul > li > a {text-indent:12%}
    Then throw a media query in for the smaller viewport to reduce those numbers.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!

    How did you arrive at 40% and 12%?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I used flawed math

    Actually, I just used firebug and pressed the up arrow key on the percentage values until the layout matched.

    It's not a perfect solution but may be good enough.


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
  •