Grow your CSS skills. Land your dream job.

Navigation in bottom of xhtml but on top of page

  • # April 12, 2008 at 2:09 pm

    Last time I hear more often that in sight of usability you must put your navigation in the bottom of your xhtml and then with css you can set it on top of the page again. But I am not really sure how this works. While I won’t use position: absolute, I don’t know a very good way to do this. Does somebody have some experience with this?

    # April 12, 2008 at 5:34 pm

    That doesn’t seem very semantic to me. I feel as though you should put it in your code relative to how it appears on the page.

    If anywhere I would say put it at the top, and under the logo and title, so at least if a user has css turned off the navigation is easily accessible.

    # April 12, 2008 at 6:32 pm

    The meaning of it was that you have to put the important stuff – the content of your site- first and after that the less important stuff, the navigation. But leaving beside if it’s good or not, does any one knows how to do this with css?

    dag
    # April 14, 2008 at 3:08 pm
    "Edwin" wrote:
    The meaning of it was that you have to put the important stuff – the content of your site- first and after that the less important stuff, the navigation. But leaving beside if it’s good or not, does any one knows how to do this with css?

    I think it’s a SEO trick.
    Search engines loves the important stuff before everything.

    # April 14, 2008 at 4:24 pm

    Yes that’s for sure… still the question remains: how to do it? ;)

    dag
    # April 15, 2008 at 7:55 am

    There are several ways to do this:

    box
    # April 16, 2008 at 8:12 am

    If you want to affect the position of an element so severely, then I would think you will have to swallow your principles and use the ‘position’ property. This has to be a purer option than any javascript solution?

    >my tuppence worth… being found in search engines in great, but I feel that it’s more important to develop a webpage for the people who will be using it. In that sense, if you want the navigation near the top, then you place it near the top in your HTML. That way visitors to your site will get a similar experience – those with screen-readers, those with full vision, those on mobile devices etc… include a skip-to-content facility for accessibility and you’re done.

    dag
    # April 16, 2008 at 10:30 am
    "box" wrote:
    …if you want the navigation near the top, then you place it near the top in your…

    I disagree.
    If you do a good job, reversing the positions of elements, the navigation is not affected negatively …
    I use these techniques for a long time and work well…

    box
    # April 16, 2008 at 11:05 am
    "dag" wrote:
    "box" wrote:
    …if you want the navigation near the top, then you place it near the top in your…

    I disagree.
    If you do a good job, reversing the positions of elements, the navigation is not affected negatively …
    I use these techniques for a long time and work well…

    Well, we have different opinions on this lol – but that’s all good in a forum :)

    dag
    # April 16, 2008 at 5:22 pm
    "box" wrote:
    but that’s all good in a forum :)

    I agree with you. If we had not diverse opinions, we would not have any opportunity to confront and to evolve. ;)

    # April 16, 2008 at 7:41 pm
    "dag" wrote:
    There are several ways to do this:

    fyi, this didn’t work because of the = in the list tag. Just remove it unless you want to specify a numbered list or lettered list (for those, add 1 or a, respectively).

    # April 17, 2008 at 6:33 pm

    But coming to an answer / a conclusion: can somebody tell in simple steps how to set the menu in the bottom of the xhtml and in the top of the final layout and doing this on the best way?

    dag
    # April 19, 2008 at 6:28 pm
    "Towers" wrote:
    fyi, this didn’t work because of the = in the list tag

    I did not understand…
    You might explain more easily? (I am Italian and I do not understand very well the English)

    "Edwin" wrote:
    simple steps how to set the menu in the bottom of the xhtml and in the top of the final layout and doing this on the best way?

    1. to set the menu in the bottom of the xhtml and in the top of the final layout using CSS and position:static, look my blog restyling
    2. to set the menu in the bottom of the xhtml and in the top of the final layout using CSS and position:absolute,
    look my dentist website

    In a few days i write in this post how to set the menu in the bottom of the xhtml and in the top of the final layout.

    # April 20, 2008 at 5:56 am
    Quote:
    In a few days i write in this post how to set the menu in the bottom of the xhtml and in the top of the final layout.

    Thanks I will be waiting for that ;)

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".