I'm having an issue where a drop down menu's children are expanding and repositioning to come outside of the parent's bounds. The concerned element is the menu item "BEHANDLINGAR"'s drop down list in IE9+.
Be warned that I am very much a junior developer; this might be apparent from my code. I don't want to discourage general advice, as I do need it, but please focus on the problem at hand first and foremost.
The site is: www.skinwellnessofsweden.com/hudvard.html
The issue is because of the ul style. The style applied the all the ul elements in general. You have to apply it for only the specific child list like the following.
ul.clearfix {
padding-left: calc(50% - 480px);
}
Hope this will fix the issue.
Related
I have some pages on a Wordpress site that have name anchor tags that initially get covered by the fixed/sticky header when clicked. I'm using some CSS that fixes that, but it only seems to work when linking inside the specific page(s).
Here's the code I'm currently using:
a[name] {
padding-top: 178px;
margin-top: -178px;
display: block;
}
Any thoughts would be greatly appreciated!
We now have scroll-margin to handle kind of thing.
From CSS-Tricks:
scroll-margin is used to adjust an element's snap area (the box that defines where the element will be snapped to). Adding
scroll-margin is useful when you need to give an element space from
the edge of the container when snapped into place, but allowing for
situations where each element might need slightly different spacing.
I do understand. Tables must be used only for tabular data, not for layout in any case.
I used to write code with lots of tables, but several years ago i've found ways to replace them with more appropriate structures in every situation. Except one.
<ul>
<li>We're up</li>
<li>all night</li>
<li>to get</li>
<li>lucky</li>
<li class="last_one"><input type="search" placeholder="I'm search"></li>
</ul>
Here's the fiddle:
http://jsfiddle.net/4enMp/4/
I'm trying to make a menu here. My requirements:
The menu must fill all the page horizontally [menu width: 100%]
All the menu cells (except for the last one) should have random widths, depending on the widths of their contents [width of menu item = width of item's content]. It means it should not be hardcoded.
The last menu item (with search input) should stretch to fill all the remaining space. [last menu item fills all the space left].
The whole thing must support IE7+. It's silly. I know. But it is something I can do nothing about. Thankfully I don't have to bother with IE6.
As I've illustrated in JS Fiddle, it's pretty easy to do that with tables (though I don't claim it's 100% right, it's consistent across browsers).
I have not managed to meet these 4 requirements with unordered lists (see Fiddle above). I would greatly appreciate any thoughts of how to reach it with HTML and CSS only.
Thanks a lot for your help!
Edit: here's my desired menu design:
Your current problem seems to be with the the last li being width: 100%, which will make the li be the size of the ul, thus being pushed off the "screen".
An easy fix would be to make that li have a position:absolute;.
Live example
Edit: I'd mostly agree with Kate though. You should probably make the search separate from the ul and just float it right.
I don't understand why you need to have your input field in the same element as your menu. They serve pretty different functions. I would probably approach this by breaking the input field out of the unordered list, and just floating it right. It uses a little more HTML but totally works.
http://jsfiddle.net/4enMp/5/
ul {
display: table;
}
li {
display:table-cell;
line-height:30px;
}
I'm learning how to make a simple template with CSS e HTML5 but i've got a problem: i want to make a container with sidebar and articles list but it dosen't work.
See to believe: http://informaticalab.com/template.html
That black line, should be a simple border that contains both the elements.
Thanks for help and sorry for bad english,
Federico
It looks like you have an extraneous </div>, which is one problem :) It's removed in the fiddle below.
If you're using floating elements, which you are, you will need to clear those floats in order for the container to 'stretch' to the bottom of the content.
An easy way to do that is create a new class called "clear" or something similar with the following:
.clear {
clear:both;
}
However, the downside is that you're introducing a new dom element simply to modify the layout.
Another solution (courtesy of Quirksmode http://www.quirksmode.org/css/clearing.html) is to tell the containing element to deal with these floated elements:
#container {
....old code...
overflow: auto;
width: 100%;
}
This has a few quirks under certain circumstances, so it's up to you which you choose to use.
See the fiddle here: http://jsfiddle.net/callseng/kZB5j/
This uses the clear element method.
I have a project that I am working on for some simple CSS buttons, and I was trying to make a matching drop-down menu for them. The problem is that when I click an item in a sub-menu, all the parents above it go to the active state as well. I was going to use a parent selector, only they don't exist. Here is the demo page: http://jsfiddle.net/td7bk/4/.
Thanks!
Edit: For now, the demo is only fully compatible with Firefox, because it uses the -moz-transition and -moz-box-shadow property, and the border-radius property.
This is possible with just css if you are willing/able to adjust your html a tiny bit. I noticed you have a span tag wrapping text in a few li elements but not all of them so i wasn't sure if this was a requirement or not.
See http://jsfiddle.net/td7bk/8/ for an example.
Also, if you're in the mood for a quick tip, take a look at the adjusted css selectors. Simplified and more efficient.
Hope this helps!
I have the following navigation where .topNav has position:relative and subnav has position:absolute. I cant get the sublist to appear over the main list due to z-index problems. This seems to be a known problem.
<ul>
<li class="topNav">About Us
<ul class="subNav"><li> Subsection A</li><li>Subsection B</li></ul>
</li>
</ul>
Does anyone know of a workaround?
UPDATE http://brh.numbera.com/experiments/ie7_tests/zindex.html shows exacly the problem I have. My original posting was in the context of a list but I have reduced the problem to the fact that z-index dosn't seem to work when have an element with position:absolute inside a parent element with position:relative
Here's a very good article that explains the stacking issues that machineghost mentions.
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
What you might want to consider (depending on why you're wanting the positioning on multiple elements) is adding a hover selector to .base (use JavaScript for IE6) that adds the class to give it relativity.
.base:hover{position:relative;}
This then means that the second .base doesn't have position: relative.
Ok, I think your problem probably stems from a lack of understanding about how z-index works. The z-index property is only relevant for elements at the same level in the DOM hierarchy. In other words, if you have:
<ul id="a">
<li id="b">b</li>
<li id="c">c</li>
</ul>
<div id="d"></div>
and "b" and "c" are styled such that they overlap, z-index will determine which one ends up on top. However, if "c" and "d" overlap, "d" will always be on top, no matter what c's z-index is, because elements that are closer to the root DOM node will always appear above elements that are nested deeper in.
So, as long as "subnNav" is a child of "topNav," I don't think there is any way to make it cover it's parent's content. In other words, as far as I know there is no workaround for this issue, except to make "subNav" not be a child of "topNav".
(NOTE: All that being said, CSS is not simple, so there may still be some way to get the effect you want that I'm not aware of. All I can say is that, based on my understanding of z-index and my pretty good general CSS knowledge, there's no way that I know of.)
adding
background: url(blank.gif);
for absolutely positioned elemnts solves the problem for me. Mybe it can helps u 2 :)
regards
I had the same issue and was able to fix it In IE6 and 7. Combining http://code.google.com/p/ie7-js/ with the following CSS the issue went away. With my issue I had some items inside a list floated left and had a tooltip that popped up whenever the user hovered over the li. To fix it, I adde this:
.ul li:hover {position:relative;z-index:4;}
.ul li:hover + li {position:relative;z-index:3;}
The way it works is whenever the user hovers over the first LI for example, it sets the second LI floated next to it to a lower z-index value. You can of course change the z-index values to fit your own needs.
This did the trick for me. ;)
http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/
Stu Nicholls at CSSplay has a get CSS Based nav w/ 6 level drop down (Can be expanded to more if needed). This works in Internet Explorer IE5.5, IE6, IE7, Firefox, Opera and now Safari, Netscape 8 and Mozilla.
Solution: assign z-index in decreasing order
<div class="base" style="z-index:2">
<div class="inside">
This has some more text in it. This also has a background. This should obscure the second block of text since it has a higher z-index.
</div>
This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it.
</div>
<div class="base" style="z-index:1">
This is the second div. You should not be seeing this in front of the grey box. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This second box should be obscured by the grey box.
</div>
Similar to answer by #Orhaan, setting a background property to the absolute element is the only solution that worked for me...
background-color: rgba(0,0,0,0);
Thanks Alex Leonoard