I want to show the content of my Mega-menu also within the page. I duplicated the CSS styles but it seems that I still miss a rule because the border of the UL with id="wrongBorder_because_of_no_Height" does not show around the whole UL, probably because the UL height is 0
sample page - http://www.teddicom.com/test_07_ul_border_stack_overflow.htm
[compare the border of the floating menu of family 2, and the border of the UL in the page]
What is setting the height of horizontal ul to zero?
How can I show the border properly?
Add overflow:hidden or overflow:auto to your class
#wrongBorder_because_of_no_Height
{
overflow:hidden;
}
The reason why this works is because by setting the overflow property to a value which is not visible - this triggers a block formatting context.
Check out this post for a full explanation.
Add this to your CSS:
.menuInPage ul
{
height: 200px;
}
You are floating the li elements left. Parent elements, the ul, are never to expand to contain floated children.
Haven't checked to see if this is what you want but either remove the float or try overflow:auto.
Related
I have a horizontal navbar in the form of an unordered list, where the list items are all floated left, and the list has overflow:hidden; for consistency. I want the "active" tab to be taller, without changing the layout of the list element.
The navbar is 60px tall with each list item 50px tall, and I want the active tab to be 55px. The question is, how do I get the list items to "stick" to the bottom of the navbar, without changing their horizontal positioning?
Things I've tried: (this list will grow)
ul#nav{position:relative;} and ul#nav li{position:absolute;bottom:0;} stacks all elements on top of each other; I refuse to hard-code each tab's position
ul#nav li.active {position:relative;bottom:/* difference in heights */;} leaves the block where the tab originally was empty, effectively acting as an unwanted margin
The solution was simple (and I'd already been using it for styling of list items). Rather than style the list items themselves, I styled their contents, which are each anchor tags. So the default anchor tag has
height:50px;margin-top:10px;
while the .active tag is styled
height:55px;margin-top:5px;
A less difficult problem than I imagined.
example with vertical-align : http://dabblet.com/gist/5333194
ul {
line-height:60px;
}
li {
display:inline-block;
vertical-align:bottom;
height:50px;
}
li:hover {
height:55px;
}
I'm making a dropdown menu, but all the styles from the first ul is being added to the styles on every ul beneath the first ul.
I've tried overriding the styles using !important, and moving the css to different levels.
Anyone got a clue about whats going on here?
This image probaly explains it the best way: http://screencast.com/t/UrkRbjjaYctp
Thanks.
#menuwrapper > ul{
padding-left:37px;
}
#menuwrapper ul ul {
padding-left:40px;
}
This should solve your issue
This is expected behavior. Paddings are added relatively.
If you don't want the nested ul to be padded 37px you have to remove the padding from parent ul (or use some hack as negative margin e.g. margin-left: -37px).
If you remove padding from the parent you will probably need to add some margin to each its child to preserve the layout. I'd suggest to reconsider the HTML structure.
I'm trying to make a pure CSS dropdown menu, but it has one odd bug;
when the page loads, the text in the main menubar is slightly offset to the right.
It jumps back to the left when the page is modified or when a menu item is moused-over.
This includes right-click > inspect element, which makes it really hard to find out what's going on.
Here's an example of it: http://jsfiddle.net/m75p3/1/
As you can see, it's in the wrong position on load, but jumps to the correct one a few milliseconds after. This is because jsfiddle is modifying the page.
If loaded from its own file, it will not exhibit this jumping behaviour until moused-over.
Any ideas why?
The problem is that you have declared 'position:absolute' on your 'toplink' elements but not given any left value, so their position is determined by their parent's text-align:center rule. When the transition occurs, that disturbs the layout so they move. To fix it you need to declare the li as position:relative, so that it becomes the layout parent, and then set left:0 on the 'toplink' a element.
Addition:
To prevent the text from wrapping in the sub-menus, you can set their white-space to nowrap.
#head ul li {
position: relative;
...
}
.toplink {
left: 0;
...
}
#head li li, #head li li a {
white-space: nowrap;
...
}
http://jsfiddle.net/m75p3/5/
I setup a jsFiddle to show what I'm doing:
http://jsfiddle.net/UfzCS/
Basically the border I set (needs to go all the way across) on the UL is showing up over (instead of under) the LI's because the LI's are floated left. Is there any workaround for this? I know I can set a height, but I may make the text a variable size so the height may dynamically change.
Your LI are floated, so the UL does not know where to wrap them.
An easy way to fix this is to make the UL float: left or add a overflow: hidden to it.
Hey, I appear to have a CSS problem, regarding the spacing of my <div>s on my site.
If you point your browser to www.marioplanet.com you will see an odd space after my Apple-themed navigation bar.
I was wondering if anyone can help me identify why this spacing was added, and how I can eliminate it, as it's undesired.
Also, I believe it has something directly related to the nav bar, because without the nav bar, this is no spacing problem.
Thanks!
It is because of <a></a> present in <li id="gn-support"><a></a></li>
That #globalheader DIV that contains the menu bar has 18px of vertical margin (top and bottom). So naturally what follows is displaced by 18px.
#globalheader {
height:37px;
margin:18px auto;
position:relative;
width:771px;
z-index:1;
}
You might want to remove the gn-ipad, gn-itunes and gn-support <li> elements from your html.
Get rid of the 18px portion of the margin in the globalheader item, then change the width of the globalnav item to 1000px:
globalnav {
margin:0;
padding:0;
width:1000px;
}
Ok the problem has to do with you fixed width on:
#globalheader{
width: 769px; //this is too small and actually not needed.
}
The contained list (#globalnav) has a rendered width of 830px (it has some white space at the end didn't investigate to see where it came from. So if you remove the fixed width from globalheader and add a margin-left of 200px to #globalnav you will center it and get rid of the space.
Additionally if you can see why your list have a bunch of white space to the right of it expanding its size to 830px you can just do a margin-left and margin-right of auto and center the list inside the global header div.
Figured out where the extra space at the end of the ul is comming from list items gn-itunes and gn-support are both rendering with 103px in width. this is comming from the (#globalheader #globalnav LI A css rule) You can override the width in (#globalheader #globalnav li#gn-support A) as well as the (#globalheader #globalnav li#gn-itunes A) css rules and that should fix it as well without resorting to fix above.
If you change the width of globalheader will work.
#globalheader {
height:37px;
margin:auto;
position:relative;
width:515px;
z-index:1;
}
If you want to add more navigation links later you will have to increase the width of globalheader.