I have been creating a website for the school and it consist of a hoverable drop down menu.
The problem is that when ever I hover over the menu the drop down items are not aligned with the dropdown tabs
Here is an image to show you
It seems that your problem is mainly around box positioning. You must always specify your content position when using absolute positioning. This will avoid making your submenu flying around, instead of being exactly where you want it to. Also, make sure that the parent element has relative position, so that your submenu may inherit box properties from it.
.firstlevel-menu-item {
position: relative;
}
.my-submenu {
position: absolute;
top: 100%; /* 100% of firstlevel menu's height */
left: 0; /* align to firstlevel menu's left side */
width: 100%; /* width of firstlevel menu */
}
Aligning the content to the end of the parent's box should solve your issue.
There goes a JSFiddle for enlightenment.
I suggest you to search a bit more about box positioning, since it is of critical importance for building dropdown menus and a variety of other features that would rely on absolute/relative positioning.
Related
Another developer has made a menu in a nav tag that is like this:
_layout page
<div>#Html.Partial("_menu")</div>
then in the _menu.cshtl page:
<div>#Html.RenderMenu("mainMenu")</div>
In the C# code a bunch of ul and li nested elements are generated, which looks fine at first on the page.
But when you hover over one of the elements the nested elements drop down and the div right below that gets pushed down the page. It's ugly. How do I fix this? Is there some CSS magic I can do to make it overwrite the div below rather than pushing it down?
Just add position with a property value of absolute and a higher z-index to the element that shows on hover. You can control the position with Top, Bottom, Left and Right properties values.
Example:
ul {
position: absolute;
left: 0; /* Adjust as needed */
right: 0; /* Adjust as needed */
}
Note: Make sure that the element that contains the element that shows on hover has a position property value of relative to help contain the Ul(in this case). Otherwise, it will overlap.
Hard to see without the code, but you can apply absolute positioning to overlapping element.( I have no clue which one is that as you didn't provide any code). So:
position: absolute
You have to make the position of the ul element relative.
ul{
position: relative;
}
I'm designing a page built on Bootstrap 3, and I would like to try and recreate the following design:
I have paragraphs that I have put into a container, so that they stay centred on the page as it is resized. However, I would like to have certain rows have a coloured background that extends off to the sides as far as they go, as shown. I'm not sure if this is possible?
One method I have tried is switching to a container-fluid class for those rows, which goes to the edge of the screen. This sort of works, but I'm not sure if it is then possible to have the text inside stay inline with the other paragraphs as the page is resized? Really, the text should always have the consistent margins on the left and right sides for all of the blocks of text.
I don't think I would need content in the areas in the margin, so if a solution just involved using a standard container to hold the content, and another method to extend the background off to the side, that may work.
Here is a JSFiddle to start off with, including one of the orange boxes in a container-fluid, to demo that approach.
I'm not sure if this is the 'best' solution, but it is a solution nonetheless.
Create a pseudo element for each coloured box (:before)
Absolutely position that (relative to the coloured box - Bootstrap already sets position: relative on col-*-*).
Set top and bottom values to 0 so it's always the correct height
Set background colour to match box
Give it a wide width to ensure it always covers the gutter (sides of .container) on wide screens
For the left sided box, set left: -[width of psuedo element], for right sided box set right: -[width of pseudo element
Finally, you'll need a page container set to overflow: hidden.
HTML
<div id="page">
<div class="container">
...
</div>
</div>
CSS
#page {
overflow: hidden;
}
.box-left:before,
.box-right:before {
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.box-left:before {
left: -999em;
background: orange;
}
.box-right:before {
right: -999em;
background: lightblue;
}
DEMO
I'm trying to create a vertical navigation that drops down to the right when I hover over page names that offer subpages. when I hover over, it appears beside it but the content appears on top of it. I want my navigation to be on top of everything. I tried using z-index. I used 32, 999, 1000, 10000 for my z-index. I tried switching my menu from position:absolute to position:relative but it just adds unwanted space. I tried setting my content to position:absolute with a z-index, lower than the one in my navigation. Here is the link:
http://michellecantin.ca/test/
Your help would be appreciated!
The relative position of your container div a the problem. Float it to the right instead:
#container {
position: relative;
left: 26%;
width: 72%;
}
should be:
#container {
float:right;
width: 72%;
}
I have several stacked HTML <section>s with background images. Within each <section>, I have a panel with content inside.
JSFiddle: http://jsfiddle.net/victorhooi/zRFzb/1/
JSFiddle Full-screen output: http://jsfiddle.net/victorhooi/zRFzb/1/embedded/result/
Ideally, I would like the main title (#proclaim) and the panels (.contentbox) to be a set pixel distance from the bottom of each background image.
However, I can't seem to achieve this.
I did try the position: relative; with an inner position: absolute; trick, combined with a value for bottom and that didn't seem to work at all - it actually sent all the boxes to the top of the page.
Currently, I'm using a mish-mash of positioning to try to get everything to fit.
However, when you change the browser window size or the resolution, the panels and text move everywhere.
Is there a way to affix the main heading, and the panels to a set distance from the bottom of their respective background images?
works just fine
section {
position: relative;
}
.contentbox, #proclaim {
bottom: 10px; // your value
position: absolute;
}
I've currently working through a tutorial on responsive webdesign, and I wanted to make my navigation different than what the tutorial had (I want my nav bar to have a coloured background, and be centered..as opposed to the tut's not having a bkgd and was left-aligned).
Without the background I had the submenu displaying properly. When working to setup the coloured bar in the background, the only way I could get it to show up was to remove the 'float:left;' that I originally had in my '.primary ul li{}' selector. Now that that is removed, when I mouse over 'Item 4' which is the item with the submenu, the submenu now displays left-aligned with the bar instead of directly below Item 4. You can see what I mean here:
http://jsfiddle.net/mark_a_b/ytB66/1/
If I add the 'float:left;' back in, you'll see that the background colour bar of my navigation disappears, and my menu items are no longer centered as I want them (not I set the bkgd colour for this version to be dark grey just so you can see the menu items) as shown here:
http://jsfiddle.net/mark_a_b/ytB66/3/
I'm sure it's likely something silly that I'm just overlooking, but I've spent too much time messing around with it and getting nowhere, so was hoping someone else might be able to help me out with this. Appreciate any help offered!
Thanks!!
Just add a positioning to your sub-menu left: 0; - DEMO
.primary ul ul{
position: absolute;
left: 0; /* this */
z-index: 999;
background-color: #ccc;
height:0px;
overflow: hidden;
min-width: 100%;
}
<ul> and <li> are block-level elements;
normally <li> are placed vertically, while here they're displayed horizontally because of the display: inline; property value.
Every <li> here is also a container for another <ul> and it's not good to use an inline-level element as container for a block-level element.
The solution is: use display: inline-block;, which combine inline-level display style with block-level behaviour:
.primary ul li{
display: inline-block;
position: relative;
}