I got an issue position a div element within a page. My problem is that I have a navigation bar with a hierarchical 3-level menu. When I open some of the 3rd level menus the element containing the items goes below the page height. I'd like to keep this element in the page area, maybe moving the top position, so the user can keep use it without scrolling (that is also problematic).
You could see an example here: http://www.frankydev.com/mitoweb/
Many thanks.
I see it even happens on large screens.
Limit the height of the 3rd menu div with max-height, say 300px and then add overflow-y:scroll;. This will add an up-down scroll bar to the 3rd menu element and it looks relatively nice.
Or change all your font size and spacing to allow more room.
Related
I am trying to do something that should be simple but is apparently not so. I just want to make a simple single line navigation bar using a list tag. Thats fine, I can do it. The problem is making it wrap gracefully and still keep the same layout when it needs to appear over multiple rows due to not enough horizontal browser space.
As I say, I'm using a list tag and I have the ride side border of each LI item with a visible vertical line to make the divider appear. The final item I am not shwoing that with a last-child pseudo class. Its important that the far left and right buttons DON'T have vertical borders. This is clear in the top image.
The UL tag itself also has a top/bottom border line visible and in the first demo in the image you can see this clearly.
So now what happens when the menu bar wraps... well there there are 2 key problems...
1) The main issue is that when the menu wraps I can't think of a way to make the new MIDDLE horizontal line appear [shown in red in the 2nd image]
2) Multiple list items now don't need a right side border value. In the example 2 list items don't need a right side border. This could grow to 3 though for some screen displays.
Does anyone have any ideas for resolving this?
Note that I am trying to make the menu wrap naturally, not at fixed pixel break points as its so unreliable for something like this with different pixel density screens and font zooms in certain browsers.
I have a web page with two panels. The left panel takes up the majority of of the width and displays user posts. The right panel is a navigation menu so I want it to remain fixed and never roll off the screen.
When there are too many posts to fit on one screen, a scroll bar appears on the right of the screen (NOT the panel), and the user scrolls down. This is all good, except that the navigation menu scrolls off the screen.
Both panels are within a common div. I tried setting its position to relative, then making the nav panel position fixed, with a right offset of 0. This kept the nav panel on the screen, but on the far right (ie. not within the containing div).
How do I go about keeping the nav panel fixed on the screen, but floated to the right of it's containing div?
Thanks a million!
EDIT: For and example of what I mean, look at Facebook. You'll see that the posts column can extend on forever, but the right hand column (with the advertisements) stays on the screen...
You could use the Twitter Bootstrap Affix JS plugin:
http://twitter.github.io/bootstrap/javascript.html#affix
I am new to css and I have a menu bar that I am working on however I am having a problem with one of the menu ("LINKS") items. If you roll over the Links menu item your notice I have three boxes there that I am trying to separate into there own area. Right now they are over lapping each other. Could you please tell me what I am doing wrong?
I have tried margin-left and padding-left and I find that they either move the box further to the right or widen the box more. But they don't space them out.
You can find the menu bar here: http://jsfiddle.net/vtjPR/
The three boxes (div.col_1) have a set width of 125px. However, within the boxes are the link lists (ul.blackbox) with a defined width of 150px. Also, its list items have a defined width of 130px.
I had this idea for a website of creating a fixed horizontal navigation bar that simply scrolls through the content when you press the menu items but I wanted to have an "introduction" div on top of it with a background image and a logo, lets say of 300px height that displays when you first load the page.
So the navigation bar would appear attached to the bottom of this "introduction" div and only when you scrolled past it would it become attached to the top of the window and become fixed positioned when you scrolled.
If you clicked a certain menu item or if you simply scrolled up to the start of the page it would attach itself to the bottom of the "introduction" div again.
Is this possible to do simply with CSS or would I have to use javascript to achieve this effect?
Thanks in advance!
I think you'll need JavaScript for this one. It will not be hard however. The only thing you need to do is to switch the positioning of the menu to 'fixed' when the menu would otherwise scroll out of the viewport.
Currently I am working on a maintenance of website and I'm stuck with an problem, the problem is like that: I have to redesign the menu bar of the website. Previously in the menu bar there are 6 menus but now there are only 5 menus in it. I have to delete one menu item from the bar. I simply deleted that row from the list items of the menu bars. In the previous designed they used the display property of css to create the blocks but after deleting the one menu the space for one menu item is left, while i like to increse the width of the menu bar.
Without seeing the code, it is hard to say.
However, in your stylesheet you can adjust the width for the list items as such
.menu li{width:35px;}
To figure out how much to adjust, take the width of the last element and divide by 5 (the number of the remaining list elements).
So, if your width was 50px, add 10px to the element style so that each of the remaining elements covers the width of your previous list-item.
Maybe a brute way to this but it actually works great:
Use table instead of list. I use this with some padding offset because spaces between cells are linear based on cell content size and padding gives you constant minimal space between menu elements.
Another way is to use block elements and CSS display:table and table-cell but remember IE7 does not know these ones.
Benefits: no Javascript
If the menu item <li> has a fixed width, then the total width of the menu divided by 5 gives the width of the each menu item. check in the css for the tag "li" or the class specified for li. then change the width of that to the new width