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
    Regular Coder
    Join Date
    Feb 2010
    Posts
    130
    Thanks
    4
    Thanked 0 Times in 0 Posts

    spacing between ul and div?

    How do I make it so that there is spacing between my <ul> and my <div> box? Whenever a person clicks on a link, a div box drops down. Problem is the div box is too close to the link itself. I want there to be some spacing. Problem here is that if there's some spacing, if a user hovers over the spacing between the ul and the div box, the div box does not pop up. The spacing cancels out the appearance of the div box. So overall, the user has to drag their cursor from the link immediately into the div box with no spacing in between in order for the div box to appear. I want the spacing to actually be a part of the div box or at least a part of the link. Any ideas?

    This is the format of my menu code:

    <div id="header">
    <ul id="head1" style="width:935px;margin-left:105px;">
    <li>
    <a href="#">text here</a>
    <div>
    content with links here
    </div>
    </li>
    </ul>
    </div>

    My css:

    #header {
    background: url("/Assets/navmenu_bg.png") repeat scroll 0 0 transparent;
    height: 100px;
    margin-left: 150px;
    margin-right: 100px;
    margin-top: -8px;
    width: 1040px;
    }
    #head1 {
    position: relative;
    }
    #head1 li {
    display: inline-block;
    margin-left: 25px;
    }
    #head1 li a{
    color:#ffffff;
    text-decoration:none;
    }
    #head1 li div{
    z-index:3000;
    left:150px;
    top:90px;
    width:1010px;
    background:#4d0404;
    height:180px;
    border:1px solid #000;
    padding:15px;
    }
    #head1 li a:hover{
    color:#CA0000;
    text-decoration:none;
    }
    #head1 div {
    display: none;
    position: absolute;
    left: 0;
    background: #eee;
    width: 200px;
    height: 100px;
    }
    #head1 li:hover div {
    display: block;
    }
    html * {
    margin: 0;
    padding: 0;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello crazykid,
    Try making your anchor display: block; and give it the same size as your #header. Like this -
    Code:
    #head1 li a {
    		height: 100px;
    		width: 935px;
    		display: block;
    		color: #ccc;
    		text-decoration: none;
    	}
    It looks like you're building a mega-menu. Plenty of examples out there if you google that term.

    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,041
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Really can't see a problem the way things are now.
    In order to see what was going on I commented out your backgroud img and subbed the color blue:
    Code:
    #header {
    //background: url("/Assets/navmenu_bg.png") repeat scroll 0 0 transparent;
    background-color: blue;
    Your anchor is in the header near the top and your <div> appears under the header.

    What browser are you using? I looked at it in FF and IE8.

  • #4
    Regular Coder
    Join Date
    Feb 2010
    Posts
    130
    Thanks
    4
    Thanked 0 Times in 0 Posts
    @Excavator, making the link turn into a block and then setting the height for it...it doesn't increase the height of the link, it actually pushes the content inside the div box down, which is weird.

    @sunfighter, I'm using the latest version of Firefox on Windows 7.

    I want it to look like the nav menu at http://www.gamewearteamsports.com/. There's a 13px padding of space between the link and the corresponding div box. Weird thing is that they use divs for their div box...I am using a table wrapped in a div.

  • #5
    Regular Coder
    Join Date
    Feb 2010
    Posts
    130
    Thanks
    4
    Thanked 0 Times in 0 Posts
    *bump*


  •  

    Posting Permissions

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