Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Menu Hover Dropdown

    Hi all, I'm Mick & new here with a relatively straight forward (I think) issue that I'm sure some coding wizard can help me with.

    Basically I've been making myself a dropdown menu and me being a novice, I'm pretty pelased with myself, however it's not exactly how I'd like it yet.

    Upon dropdown it moves all the content below further down the page. I don't want that to be the case, I merely want it to display over the top of the content.

    I was hoping that someone here (after a quick look at my code) maybe able to point me in the right direction. However if you have a solution, I hope that you can tell me the error of my ways too. I'm excited to learn better ways of doing things, rather than fixing without knowing what exactly I am doing wrong.

    Here is the page in question, I'm sure from that you'll be able to get all the code required to take a look. http://www.divasofdestruction.co.uk/refurb/

    Thanks very much in advance for any help, hints, tips or solutions.

    Cheers
    Mick

    P.S - I'm sure this will be the first of many times I'll be picking your knowledgable brains.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Hi Mick, and welcome. I applaud you for learning on your own and the progress you've made so far.

    I'd like to point out a couple of things. Your navigation links should really be in lists as they're intended to be. I would guess you could get it working as is, but seems to be so much more work AND you've created a bad case of divitis.

    I would recommend having a look at this tutorial on CSS based multi level drop down menus.

    Finally, you've done a great job with creating valid code, but do have a few validation errors you can fix to ensure semantic cross browser compliant documents.

    If you do decide to create a more conventional css drop down menu like the one I linked, do that first before you validate.

    Hope that helps and good luck!
    Teed

  • Users who have thanked teedoff for this post:

    mickhartley2000 (04-08-2011)

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for your swift response Teed, it's muchly appreciated, also thanks for the kind words about my coding & progress.

    I had came across listed nav's before, but couldn't find a good one where setting a width wasn't an issue, however the linked example seems to let me do just that.

    I begun to play around (as I do with most of the modules I create) and come up with something I liked the look of, but then always seem to find there's a better way to do it. The live site is example of this. I've taught myself along the way, however realise now that this time it needs to be coded cleaner with valid code.

    Another problem I had come across using these types of nav's were that upon using something with 'float:left' I can't center align the text inside it. I assume this will be the case here plugin too? Is there a work around or is it something I'd have to live with?

    Sorry for asking such a question before even trying, just I'm not able to roll my sleeves up and work with this until later this evening, so was wondering whether this will be a stumbling block when i come to it.

    Thanks again.
    Mick

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Not sure what issues you were running into. You float the <li> elements, then you can text-align: center; the <a> elements to center the text in your nav lists.
    Teed

  • Users who have thanked teedoff for this post:

    mickhartley2000 (04-08-2011)

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Brilliant, it would seem that I can achieve everything I want to achieve with this tutorial then.

    I'm sure I'll post back with progress later!

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by mickhartley2000 View Post
    Brilliant, it would seem that I can achieve everything I want to achieve with this tutorial then.

    I'm sure I'll post back with progress later!
    Hundreds of thousands web designers cant be wrong...lol Its a good bit of code and works with every browser.

    Play around with it, especially the styles to style it the way you like....ie colors, widths, borders, and such.

    If you have any more questions post back here.
    Teed

  • #7
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Just an update, I;ve managed to get this up & working no problem.

    Example Here: http://www.divasofdestruction.co.uk/refurb/

    Thanks again Teed, much appreciated. Now to validate!

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Awesome! Glad you got it working.
    Teed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •