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 to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Dropdown Nav pushing content

    Hey guys sorry if this is a repost. I've scoured google trying to figure out how to stop my dropdown nav menu from pushing the rest of the content down without compromising the rest of the page.

    I'm really new to this and have been teaching myself for a little over a week now. As far as I can tell my HTML is solid and it must be purely a CSS issue. Any help will be really appreciated. Thanks!

    Here's the code:


    * {
    margin:0px;
    padding:0px;
    background-color: #4DB84D;
    }

    div.container {
    position:relative;
    margin:0px auto;
    width:90%;
    height:900px;
    background-color:#368136;
    }

    h1 {
    text-align:center;
    border-bottom:2px solid #006907;
    margin-bottom:35px;
    font-size:55px;
    font-family:courier;
    color:white;
    }

    #tm {
    position:absolute;
    top:10px;
    right:540px;
    font-size:11px;
    color:white;
    }

    /* =================== Navigation ====================== */

    #navdiv {
    position:relative;
    margin:0px auto;
    left:220px;
    }

    a:link, a:visited {
    color:white;
    }

    ul#navmenu, ul.sub1, ul.sub2 {
    list-style-type:none;
    font-size:13px;
    }

    ul#navmenu li {
    position:relative;
    margin:0px auto;
    float:left;
    width:150px;
    text-align:center;
    margin-right:3px;
    }

    ul#navmenu a {
    display:block;
    width:100%;
    margin:0px auto;
    height:25px;
    line-height:25px;
    border-radius:5px;
    border-styleutset;
    border-color:#000;
    text-decoration:none;
    background-color:#377A3C;
    }

    ul#navmenu .sub1 a {
    margin-top:1px;
    }

    ul#navmenu .sub2 a {
    margin-left:3px;
    }

    ul#navmenu li:hover > a {
    background-color:#949494;
    }

    ul#navmenu li:hover a:hover {
    background-color:#000000;
    }

    ul#navmenu ul.sub1 {
    display:none;
    position:aboslute;
    z-index:1;
    top:25px;
    left:0px;
    }

    ul#navmenu ul.sub2 {
    display:none;
    position:absolute;
    z-index:1;
    top:0px;
    left:153px;
    }

    ul#navmenu li:hover .sub1 {
    display:block;
    }

    ul#navmenu .sub1 li:hover .sub2 {
    display:block;
    }

    .darrow {
    font-size:7pt;
    position:absolute;
    top:5px;
    right:4px;
    background-color:transparent;
    }

    .rarrow {
    font-size:6pt;
    position:absolute;
    top:10px;
    right:4px;
    background-color:transparent;
    }



    /* ======================= Content ======================= */

    div.main {
    position:relative;
    margin:100px;
    width:90%;
    min-height:700px;
    overflow:hidden;
    clear:both;
    background-color:#368136;
    }

    #column1 {
    margin-top:20px;
    width:860px;
    float:right;
    min-height:700px;
    padding-left:10px;
    color:white;
    background-color:#7BB57F;
    }

    div#img {
    position:absolute;
    right:50px;
    background-color:#7BB57F;
    }

    #img, desc {
    font-size:12px;
    font-weight:bold;
    color:black;
    }

    #extradiv {
    position:absolute;
    top:400px;
    left:300px;
    width:700px;
    height:250px;
    background-color:#567F59;
    padding-left:5px;
    color:white;
    }

    #sidebar {
    margin-top:20px;
    min-height:700px;
    margin-right:660px;
    padding-left:5px;
    background-color:#565756;
    color:white;
    }

    #extradiv2 {
    position:absolute;
    top:100px;
    left:20px;
    width:180px;
    height:200px;
    padding-left:5px;
    background-color:#567F59;
    color:white;
    }

    /* ====================== Footer ================= */

    #footer1 {
    min-height:60px;
    color:white;
    background-color:#0F3D0F;
    font-size:12px;
    text-align:center;
    line-height:28px;
    }

    #footer2 {
    min-height:30px;
    color:white;
    background-color:#000;
    font-size:11px;
    font-styleblique;
    text-align:center;
    line-height:28px;
    overflow:hidden;
    }
    Last edited by s25w89; 01-13-2013 at 11:55 PM.

  • #2
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    P.S. - My sub2 (2nd dropdown menu) goes over the content just fine. It's the sub1 (initial dropdown menu) that pushes everything. I have no idea why.

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    I think it could be this typo, highlighted in red:
    Code:
    ul#navmenu ul.sub1 {
    	display:none;
    	position:aboslute;
    	z-index:1;
    	top:25px;
    	left:0px;
    }
    Let me know how you get on.

    Kind regards,

    Lc.

  • Users who have thanked LearningCoder for this post:

    s25w89 (01-14-2013)

  • #4
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Good lord man, seriously? Two letters out of place and that was all it took to screw everything up.

    Coding is a precise art isn't it? Learning that quickly.

    Thank you so much for pointing that out without making me feel like an idiot

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    haha no problem!

    I havent got enough fingers for the amount of times I've done it

    Kind regards,

    LC.


  •  

    Tags for this Thread

    Posting Permissions

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