Forums

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

Home Forums CSS Sticky full width navigation bar with gradiant

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #144508
    nolimit966
    Participant

    Hi there,

    Im trying to create a full width navigation bar in htm5/css which is looking not too bad so far. Id just like a bit of guidance / help so that i can complete it to perfection. As it stands it looks like this: http://cssdesk.com/bEFSv

    As you can see the css is inefficient. I know there must be problems because in Dreamweaver Design view it looks like this:http://s17.postimg.org/jf5yhwem5/dreamweaver_screenshot.png

    it is supposed to look like this: http://s7.postimg.org/jiwxkuaw9/navigation.png

    If anyone could help me reorganize or fix the css so it displays correctly I would be really grateful :-)

    Thank you very much

    #144513
    Paulie_D
    Member

    Dreamweaver’s rendering engine is terrible…you should always preview in as many actual browsers as you can.

    Unfortunately, your images aren’t web linked in the cssdesk example so we can’t see them. This might be the issue with DW too.

    #144515
    nolimit966
    Participant

    Ah thats a bit of a relief as it looks OK in Chrome & I.E its just the Dreamweaver rendering which put a bit of fear in me.

    I will try ad include the images.

    Thanks Paulie!!

    #144518
    Paulie_D
    Member

    I’ve cleaned out of lot of repeated CSS…although I suspect I could eliminate more.

    http://codepen.io/Paulie-D/pen/aClhi

    #144521
    Paulie_D
    Member

    Oh…forgot to mention. I’ve re-jigged the contents of the li taking out the breaks and adding a span.

    I think it works better that way and is, I feel, slightly more semantic and has better hooks for styling each item/line separately.

    #144570
    nolimit966
    Participant

    that’s very helpful. Its a lot clearer now, especially the repeated hover div’s instead of repeated code.

    Thank you very much.

    Your help is much appreciated.

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