I'm having a problem trying to achieve a navigation design I made.
Please see this link to have a look at the example http://lab.518studio.com/submenu
So as you will see I'm trying to have a full width submenu background, I used the position:absolute; but it presents me two new problems:
I cant get the sub-items aligned with the main item.
Content below it will not move down when it displays.
Basically what I want to do is to get the position of parent items under the correspondent main item and have the content below it moving when submenu is displayed.
I placed a link on the URL to download the HTML and CSS files.
Make the menu li position:relative and give submenu ul a width
Related
I have a div (it's a popup for an openlayers map, but it could pretty much be any fixed size div), that contains a jquery ui menu (which is wrapped in a ul). The menu doesn't fit inside the div very well, so I'd like to make the menu float above it so that as the menu grows I don't have to grow the size of the containing div. Is this possible?
The containing div is itself positioned absolutely, I've tried setting the ul that represents the menu to position:absolute;z-index:100 but that doesn't work. I've also tried setting overflow:visible with no joy.
This screenshot shows the issue I have:
I've added a jsfiddle that opens a popup when you click the small orange circle, and you can see that the menu inside there is bigger than the containing div.
If you tell me that my answer is not what you mean I will delete it cause I am not sure what you really need to do. You want this scrolls to disappear and if the text is bigger than the popup just to float over no matter it is going outline ?
If this is what you want you have to remove the overflow: auto from .olFramedCloudPopupContent and again to remove overflow: auto from inline style of the element #chicken_contentDiv (I am not sure that you add it with jQuery).
I have a Header/navigation bar on a site, it has a logo, navigation menu, and search box all in-line in that order
So the logo is on the left, followed by the nav menu and the the search box to the right.
The search box is aligned using position: relative; the problem is it is positioned relative to the nav menu which is the div before the search box.
The reason that is a problem, is because the nav menu can be of different sizes, depending on which menu items it is showing.
I need a reliable way to position my search box, is there a way to position a Div relative to a certain Div and not just the Div that is directly before it?
In the image the search box should be positioned over the sidebar, but like I mentioned the nav menu can be of different lengths so If I position relative X off of it, it will be different depending on the width of that menu
Put a wrapper around your nav menu and give it a fixed width.
Try having your nav and search inside of a single div, then use absolute positioning for the search.
I am new to CSS. I have created 4 main divs, header, bodybg, nav and main content.
I defined properties for #nav div, and it looked great. Now I wanted to create a jQuery slider in the div above it, i.e. #bodybg, but when I as a first step create a div #wrap inside the #bodybg and try to put 3 images on it, my nav bar is affected: it no longer has its properties and looks like a plain list of items.
Now when I remove 2 images our of 3, it becomes fine. In CSS for #wrap I added overflow:hidden but that rather makes #nav totally vanished or hidden.
The working state of my project: http://estheticdentalcare.co.in.white.mysitehosted.com/HTMLpage.htm
That was before I added the #wrap div inside the #bodybg and three images in that.
Hi i'm not sure that whats you are trying to do but if you want to do. But here is a link.
To make sure that all image div are on the same line, make them align left. And make sure youyr math are ok. If you have more width than the actual container div it will jump on two line and if you have overflow hidden the image will just be outside your container.
http://jsfiddle.net/etienne_carre/W5n4Y/1/
I am using the dcjq accordion to display content on the left of the screen however to the right of that there is seprate content within divs that contain clear: both in the styling, but it seems that the use of clear causes the height of the content to change depending on the accordion beside it.
Both the main content and the accordion are in separate divs but ultimately within the same wrapper div. How can I disconnect them?
If the right-hand div is after the accordion menu then it will always be below if using clear:both
I suggest floating the accordion menu left and the right-hand content to the right and remove the clear from the CSS
I have my menu working the way I want with the exception that menu elements are displayed from the top down as supposed to bottom up. I tried changing the CSS properties, but still can't get it working. I need my DIV container to be align on the bottom of the parent container. I used 'bottom: 0' CSS property but that doesn't have any affect using both 'position: absolute' and 'position: relative'.
How can I align all the elements within the parent DIV be displayed at bottom: 0 (bottom up)?
Then click on the Projects bottom link (refresh if you need to reset the menu items). I need that same behaviour I already have, just the menu items should start from the bottom up and be aligned all the way to the bottom.
Any suggestions?
Thanks,
Partizan
The best way to accomplish this is to either put the divs inside the sought after parent element. Ergo the <li> you want to associate these links with. Give the parent <li> a style of position:relative. The on hover set the position of the child div or li to abosulte and left:0;top:0;. Then from there you can style it closer or farther with margin.
Try using padding-top to push them down with an id or class on each sub menu.
Then if that fails, try using min-height: auto; on each parent.