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 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    80
    Thanks
    45
    Thanked 0 Times in 0 Posts

    For gods sake.. Help

    I'm about to quit css as im unable to learn it, ive been trying to learn this strange kind of coding or whatever it is and almost giving up
    look at this nav bar, need some serious help..

    Preview link
    https://dl.dropbox.com/u/28490184/Css/index.html


    #nav ul{padding:0;margin:0;display:block;background-color:green;height:30px;width:550px;position:absolute;}
    #nav li{padding:0;margin:0;float:left;list-style:none;line-height:30px;}
    #nav li a{display:block;padding:0 25px;color:white;text-decoration:none;font-family:arial;}
    #nav li a:hover{display:block;background-color:red;}
    #nav ul li ul{padding:0;margin:0;width:100px;display:block;height:80px;position:relative;top:30px;left:0}
    #nav li ul li a{padding:0;margin:0;}
    #nav li ul li{padding:0;margin:0;;float:none;}
    #nav ul li ul{visibility:hidden;}
    #nav li:hover ul{visibility:visible;}



    <div id="nav">
    <ul>
    <li> <a href="#"> Home </a> </li>
    <li> <a href="#"> Videos <a> </li>
    <li> <a href="#"> Guides </a> </li>
    <li> <a href="#"> Tutorials </a>
    <ul>
    <li> <a href="#"> new </a> </li>
    <li> <a href="#"> new </a> </li>
    <li> <a href="#"> new </a></li>
    </ul>
    </li>

    <li> <a href="#"> Contacts </a> </li>
    </ul>

    </div>
    Last edited by h123er2; 04-09-2013 at 02:35 PM.

  • #2
    New Coder
    Join Date
    Dec 2012
    Location
    Ingerlund
    Posts
    66
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Hello. There's no reason to give up, everybody struggles with learning something new at some point but that's how we learn! Could you explain in more detail what it is you are trying to achieve with this nav bar?

  • Users who have thanked Entity_ for this post:

    h123er2 (04-09-2013)

  • #3
    New Coder
    Join Date
    Mar 2013
    Posts
    80
    Thanks
    45
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Entity_ View Post
    Hello. There's no reason to give up, everybody struggles with learning something new at some point but that's how we learn! Could you explain in more detail what it is you are trying to achieve with this nav bar?
    navigation bar itself looks fine but take a look at the dropdown part..
    ive updated the thread with live preview link btw
    thanks

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Have a try with:

    Code:
    #nav li {
        float: left;
        line-height: 30px;
        list-style: none outside none;
        margin: 0;
        padding: 0;
        position: relative;
    }
    #nav ul li ul {
        display: block;
        height: auto;
        left: 0;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 30px;
        width: 100px;
    }
    You really want the dropdown to be positioned absolutely, so it'll drop over any element immediately underneath the menu, and you don't want to restrict its height (which was causing the cutoff at the bottom of the dropdown). Setting position:relative on the parent li to the dropdown sets the 'start point' for the absolute positioning.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    h123er2 (04-09-2013)

  • #5
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Hey now, don't get too frustrated, we're here to help. First, validate your page. It'll give you insight into what is wrong. Second, go to w3schools.com. They have a lot of tutorials and resources to help you with whatever issues you may have.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.


  •  

    Posting Permissions

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