...

View Full Version : spacing between ul and div?



crazykid
10-29-2011, 08:49 AM
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;
}

Excavator
10-29-2011, 03:36 PM
Hello crazykid,
Try making your anchor display: block; and give it the same size as your #header. Like this -
#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.

sunfighter
10-29-2011, 03:39 PM
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:

#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.

crazykid
10-31-2011, 12:43 PM
@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.

crazykid
11-02-2011, 11:21 AM
*bump*



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum