I have searched thoroughly for an answer to this, but the answers I have found here will not seem to work for me...
I have a dropdown menu that is being hidden by a table containing an iframe. I have included the code below.
How can I make the menu display on top of the table containing the iframe?
I have tried the z-index solutions and they did not work. I have also tried wmode="transport" within the iframe tag, and that did not work.
CSS for menu:
div.crm_menu {
width: 100%;
margin: 0 auto;
}
ul {
font: bold 14px Verdana ;
text-align: left;
display: inline;
margin: 0;
padding: 5px 4px 5px 0;
position: absolute;
top : 120px;
list-style: none;
float: left;
}
ul li {
font: bold 14px/18px Verdana ;
display: inline;
margin-right: auto;
position: relative;
padding: 15px 20px;
background: #a4b8c3;
cursor: pointer;
color: black;
text-decoration: none;
}
ul li:hover {
background: #1d4f6a;
color: white;
}
ul li ul {
padding: 0;
margin: 0;
position: absolute;
top: 47px;
left: 0;
width: 250px;
box-shadow: none;
display: none;
opacity: 0;
visibility: visible;
float: left;
}
ul li ul li {
background: #1d4f6a;
width: 250px;
display: inline-block;
color: black;
text-decoration: none;
}
ul li ul li:hover {
background: #93a5af;
color: black;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
HTML for table with iframe:
<table border="0" height="700" width="100%">`
<tr>
<td>
<iframe src="http://www.idissys.com/download/it_blog.pdf?wmode=transparent" height="700" width="100%" wmode="transparent" style="overflow:scroll;"></iframe>
</td>
</tr>
</table>
Use z-index property in the container of the menu, you can set the z-index of the table to 1 for example and the z-index of the menu to 2.
See:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Per your JSfiddle, set the containing center tags for your menu and iframe to position: relative; and give the first center tag (the one containing your menu) z-index: 2.
Also, the center tag is deprecated. You may want to replace them with div tags. Then again, this plucky little start-up uses center tags on their home page, so who am I to judge?
You can set the "z-index" property for the table + menu. z-index handles the 'z' positon of an element. z-index also only works combined with the 'position' property. The higher the number the higher the element will be (more in front).
Code update:
Example:
<center style="position:relative;z-index:10;">...
<center style="position:relative;z-index:0;">...
For more information check the css-tricks article: https://css-tricks.com/almanac/properties/z/z-index/
Related
I have a drop down menu that I have made but the drop downs don't drop down under their parent item.
My code can be seen here
I think it might be something to do with this part of the code:
nav ul li ul {
position: absolute;
height: auto;
background-color: #f2f2f2;
}
but I'm not too sure so any help would be appreciated...
Simply add position:relative to nav > ul li, this ensures that your absolutely positioned sub menus position themselves relative* to the list items they are children of, and not the parent ul itself.
Demo Fiddle
nav > ul li {
list-style-type: none;
display: inline;
vertical-align: top;
height: 40px;
line-height: 40px;
padding: 10px 15px;
border-right: 2px solid #e6e7e9;
margin: -2px;
position:relative;
}
*It should be noted that the child items positioning themselves relatively to the parent is not related to the parents position being set to relative, only the parent having positioning defined.
You need the parent Li to be positioned relatively
nav > ul li {
list-style-type: none;
display: inline;
vertical-align: top;
height: 40px;
line-height: 40px;
padding: 10px 15px;
border-right: 2px solid #e6e7e9;
margin: -2px;
position: relative; /* Add this */
}
JSfiddle Demo
Try
nav li {
display: inline;
position: relative;
}
nav li ul {
display: none;
position: absolute;
padding: 0;
}
it would be great, when I can click the <li> container and in it is the <a> ..
So my container is width: 100px and height: 100px but my tag only width: 20px and height: 15px.
So I can only click on the text in the tag.
Can I change that?
<li>
SEM
</li>
CSS:
.menu ul li {
background-image: url("../images/menu_background.png");
background-position: 1px center;
background-repeat: repeat-x;
border-color: #000000;
border-right: 1px solid #000000;
float: left;
font-family: 'Open Sans',sans-serif;
font-size: 16px;
height: 38px;
list-style-type: none;
padding: 0 34px;
vertical-align: middle;
}
.menu ul li a {
color: #FFFFFF;
display: block;
line-height: 35px;
text-decoration: none;
}
that doesn't work..
Set a block context property on it.
li a {
display:block;
}
You should apply display: block to your 'a' tag
An example : http://jsfiddle.net/e49Tg/
You can try li > a { display: block; } in your stylesheet. Make sure you prefix the li with the appropriate ul class or selector, just so you keep your change isolated to that occurrence.
I can't clearly get what your problem is, if you want an <a> tag to be sized, the solution is as proposed: the "display" property should be either "block" or "inline-block".
In case you want it to have the same size as the parent it should also have the size directives, like:
li a { display: block; width:100%; height: 100% }
and if you want it to be so when clicked, a pure css solution would be
li a:active {
display: block; width:100%; height: 100%;
}
If this isn't answer to your question, explain more.
I am a little stuck. I am trying to build a horizontal navigation bar, 1024px across, which will allow for a submenu to display below it. But i want the submenu to also be 1024px in width and to display directly below the navigation bar, vertically aligned.
At the moment the submenu appears but fixes its left side to the left side of the current li that you are hovering over. How can I fix this?
Thanks!
EDIT: So on mouse over it would look something like this: http://eventav.biz/site/example.jpg
Link to what I've done so far -
http://www.eventav.biz/site/
ul.top_menu {
position: relative;
margin: 0;
margin-bottom: -1px;
list-style: none;
display: table;
width: 1024px;
border: 1px solid #111111;
border-bottom: 1px solid #000000;
border-radius: 10px 10px 0px 0px;
}
.top_menu li {
display: block;
position: relative;
border-right: 1px solid #111111;
float: left;
margin: 0px;
display: table-cell;
vertical-align: middle;
}
.top_menu li:first-child {
border-left: 1px solid #111111;
}
.top_menu li a {
display: block;
text-decoration: none;
color: #000000;
text-shadow: 3px 3px 8px #3A3A3A;
padding: 15px;
height: 30px;
display: table-cell;
vertical-align: middle;
margin: 0px;
}
#top_menu_item ul {
display: none;
margin: 0px;
}
#top_menu_item:hover ul {
display: block;
position: fixed;
margin: 0;
}
#top_menu_item:hover li {
width: 1024px;
background-color: #666;
text-align: left;
color: #FFF;
font-size: 12px;
margin: 0px;
}
<ul class="top_menu">
<li id="top_menu_item">HOME</li>
<li id="top_menu_item">OUR SERVICES
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">EXAMPLES OF OUR WORK
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">CONTACT US</li>
</ul>
Remove the fixed positioning from the child ul, and replace it with position:absolute. Add in left:0px, and then remove position:relative from the parent li.
Working jsFiddle example
#top_menu_item:hover ul {
display: block;
position: fixed; /* Change this to position:absolute; */
left:0px; /* Add this */
}
.top_menu li {
display: block;
position: relative; /* Remove this */
}
1) Remove position: relative; from #top_menu_item
2) Set #top_menu_item ul to position: absolute; left: 0; instead
3) Remove left padding on #top_menu with padding-left: 0;
4) Add:
#top_menu_item:first-child {
margin-left: 40px;
}
Essentially, the problem was that you've been positioning your inner ul tag relative to it's parent li. Instead, the solution above positions the secondary navigation absolutely in relation to the primary navigation, and we use left: 0; to make sure it's completely left-aligned.
It's also against the standard to use an id multiple times on a page. Therefore I'd recommend changing #top_menu_item into .top_menu_item and changing the HTML accordingly.
Let me know if you have any problems!
Quite difficult to explain, so I created a codepen for you to have a look at. When you hover over a navigation item and the dropdown menu appears. You'll see that some of the items don't line up correctly. I.e. the width of some items are bigger than their sibling items. I just want them all to stretch to the width of the widest list item. (confused yet?) Just have a look at the code pen..
You need to make changes to the below CSS to get them aligned.
For Instance.
#main-navigation ul li ul li {
background: none repeat scroll 0 0 #DE5D48;
width: 140px;
text-align:left;
}
WORKING DEMO
Hope this helps.
You should use display : inline-block instead of float: left in /* list item */ css and should add display : table-row; into /* sub list item */ .
#dark-blue: #31394C;
#light-gray: #E6E6E6;
#gray: #B1B2B5;
#dark-gray: #6D6D6D;
#dark-red: #d7351b;
#red: #ee2a2e;
#light-red: #f75d1f;
#dusty-red: #DE6450;
#light-dusty-red: #fdc29e;
#dark-dusty-red: #b50b03;
#sub-nav-red: #DE5D48;
#white: #ffffff;
#import url(http://fonts.googleapis.com/css?family=Rosario);
body {
background: #dark-blue;
}
#main-navigation {
/* initial list */
ul {
list-style: none;
/* list item */
li {
display: inline-block;
position: relative;
background: #dark-red;
min-width: 105px;
height: 21px;
text-align: center;
margin-right: 10px;
/* link */
a {
color: #white;
display: block;
line-height: 21px;
text-decoration: none;
font-family: 'Rosario', sans-serif;
font-size: 12px;
text-transform: uppercase;
}
a:hover {
color: #white;
background: #dark-red;
}
/* sub list */
ul {
position: absolute;
top: 100%;
left: -40px;
display: none;
border-top: 10px solid rgba(255, 255, 255, 0.0);
z-index: 99;
/* sub list item */
li {
background: #sub-nav-red;
display : table-row;
/* sub list link */
a {
padding: 0 5px 0 5px;
white-space: nowrap;
}
}
}
ul:hover {
display: block;
}
}
li:hover > ul {
display: block;
}
}
}
I suggest moving the background, size, and positioning from the li to the ul, that way the whole list will expand if one item is too big.
Try to give more min-width
#main-navigation ul li {
float: left;
position: relative;
background: #D7351B;
min-width: 140px;
in css, li element has: min-width: 105px;
change it to 155px and it will solve it.
hope that helps.
Its quite simple,
You can't use: top: 100%
You'll be wanting to update this to be top: 0 this will align it to the top of its parent.
You may need top: 11px in your exact case.
I have a navigation bar that has to be 900 pixels wide but the links inside don't necassarily always span the entire width of the bar so I'd like to center the links. The issue is no matter what I try, the links won't center. Here's my CSS:
.center {
text-align: center;
}
nav {
width: 900px;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
margin: 0 auto 20px auto;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
background: #C0C0C0;
}
nav ul:after {
content:" \2022 ";
clear: both;
display: block;
}
nav ul:last-child:after {
content:"";
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-align: center;
display: block;
padding: 20px 15px;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
z-index: 100;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
I tried adding auto margins to the nav id, and the nav ul id to no avail, then I tried wrapping the list in a div with a class that aligns the content in the center, but that didn't work either. Then I tried text-align to no avail. I don't know what to do so any help would be greatly appreciated!
Here's a JDFiddle I've been working with: http://jsfiddle.net/VCKMU/2/
UPDATE: After taking #Adrifts advice and changing the list items from float:left to inline-block, they now align in the center but now all the child items are inline blocks instead of vertical lists. Any ideas?
Updated JSFiddle: http://jsfiddle.net/VCKMU/6/
Instead of floating the list-items, just change their display value to inline-block; as you have specified text-align: center; on their containing block.
http://jsfiddle.net/VCKMU/6/
The only problem is that this causes the child items to turn into inline lists when they're supposed to be vertical.
You just need to modify the selector to only target the list-items are the children of the first <ul>:
.center > ul > li {
display: inline-block;
}
http://jsfiddle.net/VCKMU/8/
I think it should work if you give nav { width: auto; margin: auto; }
I usually fool around in the Chrome debugger for issues like this.