#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0

    Stubborn Navigation


    I've recently been altering an existing website to become responsive/fluid/flexible.

    One of the biggest issues I was having was how to get the nav more responsive.

    I came across a good example at http://www.hongkiat.com/blog/responsive-web-nav/ and set about making it more in keeping with my website.

    I'm actually stumped on something which is more than likely going to take you guys seconds to solve - making my links centre inside the nav div.

    Make sure your browser is more than 767px (preferably > 800px) or you won't see the issue.

    HTML
    CSS

    Thank you in advance!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    867
    Rep Power
    275
    in your descurt.css file, line 204 nav li rule:
    get rid of display:inline;
    and add float:left; and padding: 0 22px;

    this should bring each of the list items out to a nice equi-distant arrangement .
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0
    Thanks for the suggestion. I'm away from the computer at the moment but get the impression this wont allow the links to be flexible between browser widths 768-980px. Am I wrong? I'm looking for the padding between the links to increase/decrease as the browser window size changes.

    I've achieved the centralling on my original concept at www.designercurtains.biz
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    867
    Rep Power
    275
    yea, that padding won't work for a variable width.
    I'm not sure how to go about that.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    rdbrotherton, are you aware that you're mixing XHTML 1.0 and HTML5? You should pick one (I recommend HTML5) and then fix the errors with the help of http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ (under "more options", make sure it's set it to use "CSS level 3").

    I'll suggest a solution but I should mention that it doesn't work in older versions of IE, e.g. IE7. It is simply to give the list-items "display:table-cell" and the <ul> "display:table".
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0
    Originally Posted by Kravvitz
    rdbrotherton, are you aware that you're mixing XHTML 1.0 and HTML5? You should pick one (I recommend HTML5) and then fix the errors with the help of http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ (under "more options", make sure it's set it to use "CSS level 3").

    I'll suggest a solution but I should mention that it doesn't work in older versions of IE, e.g. IE7. It is simply to give the list-items "display:table-cell" and the <ul> "display:table".
    I had wondered as the <nav> tag was being used, but hoped it was just me not realising it was available before HTML5.

    Thanks for the help.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0
    Kravvitz - thanks for your help with that. I've re-written the page in HTML5 and started again with the navigation. I've gotten it to work well enough for my liking, however I seem to have found a strange bug.

    Viewing on my iPhone, the menu appears how it should. I click the menu and it drops to reveal the links. The bug appears when I rotate my iPhone (to landscape), the links font appears to increase in size....

    Solutions greatly appreciated, as always!
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Try setting the "-webkit-text-size-adjust" property on that sub-menu. I would suggest you do so within an @media rule that targets smart-phone screen sizes.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0
    Originally Posted by Kravvitz
    Try setting the "-webkit-text-size-adjust" property on that sub-menu. I would suggest you do so within an @media rule that targets smart-phone screen sizes.
    Awesome little tip there Kravvitz. Thanks for all your help on this subject

    Will I ever retain any of this knowledge!?!?

IMN logo majestic logo threadwatch logo seochat tools logo