Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Navigation help appreciated

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 6, 2013 at 10:13 am #42526
    Stressednewbie
    Member

    I’m amidst getting to grips with learning CSS and Html and i’m struggling with my navigation. As a way of trying to get to grips with building i’m looking at websites and then trying to recreate them as best I can.

    The link below will show you the website I am trying to recreate. I have the header and the logo but I am really struggling with the nav.

    1) I can’t do the simplest of things and get the menu within the header on the right hand side.

    2) I can’t figure how to get the slightly different colour background to each menu item when its clicked on!

    http://kilianmuster.com/ I feel sorry you have to deal with beginners like me!

    February 6, 2013 at 10:32 am #123571
    Paulie_D
    Member

    In basic terms, you will have a header element (div or header).

    Inside that you will have a menu (ul or nav) and that will be floated to the right.

    As for the background color of the list item changing once clicked there are a couple of ways to do that.

    One is will JS to apply an ‘active’ class to that list item.

    The other is to apply a class to the body of each page and then use a css to define the properties based on that class.

    February 6, 2013 at 10:41 am #123575
    Stressednewbie
    Member

    http://codepen.io/Stressednewbie/pen/JsevD

    I’ve just put it on pen. I cant see why the logo hasn’t came up on the header and also unsure now as to why the menu doesn’t stretch across. Also my background is not showing up now ha, jesus its going to take me a while.

    February 6, 2013 at 10:55 am #123577
    Paulie_D
    Member

    The logo image will not show up unless it is on a web server.

    If you know the dimensions, you can substitute in either an image from lorempixel.com or placehold.it

    Also, list items (li) should be inside a list (ul) and this does not seem to be the case with your pen code. I would think that this might be the source of your problems.

    February 6, 2013 at 11:05 am #123578
    Stressednewbie
    Member

    Thanks for the help, appreciated. Never heard of CodePen before, very useful.

    February 7, 2013 at 1:20 am #123620
    thisisjohnbrown
    Member

    Also check out [hhhhold.com](http://hhhhold.com “hhhhold.com”) for placeholder images. It can give you a better idea of the end product, since the images are random.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.