i have a Problem with my Wordpress Design, specialy with Dropdownmenu.
http://fincha.com/wordpress/
Check this, in the main menu "Versicherungen" you will see, i tryed allready all combinations with z-index... without results. :(
if some one have a nice idea for this menu, just tell :)
thx
I don't understand the reason for this myself (though I didn't research it; maybe a more experienced user can tell me), but z-index properties are only respected when the element is not positioned statically. Your problem is fixed by adding
#mainmenu {
position: relative;
}
so by including position: relative; for #mainmenu (your declaration starts on line 46 of style.css).
Related
Hi so I am working on creating a wordpress template from an existing static website.
However I can't seem to get the CSS for the menu to work correctly.
I need a style that is applied to the menu to be applied to all of the li and not have to code each one individually.
The problem is I want to add a background-color to each item (making them look like buttons). If you look at the site again, it puts a huge box rather than putting a small background-color to each item. I hope that makes sense.
You can see the site here: http://lawrences.work/
First, remove your width:149px; on #menu-menu.
Second, on #menu-menu li, remove all margins, and try apply this code
# menu-menu li {
background-color: #FFC0CB;
display: inline;
padding: 10px 20px;
}
Alright, so I've checked it out and it appears to be that the div#logo is causing your menu to be vertically stretched.
I'm not entirely sure as to why since I didn't scan all the CSS or couldn't find anything related to it directly.
Either way I do have an explanation for what actually happened anyways.
So this div.menu-menu-container in your HTML is lexically positioned just below the div#logo - if you inspect element on them you should see highlighting overlap when hovering between the two.
An element that is float: left basically has no height. It is sort-of removed from the document flow unless the div below it has clear: both or the parent has overflow: hidden - both which have their own nasty side-effects.
Anyway, this div#logo caused your div.menu-menu-container to stretch vertically because the div#logo was floated and your div.menu-menu-container wasn't causing it to be quirky.
To fix this I added one property to div.menu-menu-container which should not harm your layout in any way except for keeping these floated elements out of your way.
the property clear: both allows you to clear a float so that the document flow after it turns back to normal. This shrunk your menu down to the size it's supposed to be in the position it's supposed to be in.
EDIT (18-11-2015)
I actually had a choice of using clear: both or float: left - both fix the issue since all floated elements do think about each other, just not about the non-floated elements as much.
clear: both however is the nicest solution in this case because it doesn't change the behaviour of that element specifically whereas floating it does.
Also, the snippet you're going to need for your code to work:
.menu-menu-container {
clear: both; // or float: left; for that matter
}
For more reading on MDN / css-tricks
float
clear
css-tricks on float
Hope this helps you understand your issue, if you need more information I'll see it in the comments!
Good luck
I have 2 gaps in my unordered list that I cannot find the problem source or a proper solution to fix it.
An element.style {clear: left;} applied to the <li> tag immediately to the right of the space seems to clear the space to the left, but another randomly appears further down the page.
I am sure that the fix is simple, but all of the information that I can find seems to fit around multi-sized link images or a pattern of space. On the affected page all images should be the same size, 150x150, and the gaps seem to only affect 2 links out of 25+ listed. I nevertheless tinkered with their findings to see if it lead me to a solution, the closest I came was the above.
The affected page is here.
The page code and CSS are here.
I appreciate any advice that can be given, on how to properly resolve this issue. My solution seems to only mask the true nature of my problem.
Try adding this rule:
#list-1 >li:nth-child(3n+4) {
clear: left;
}
Try:
#list-1 #desc {
width: 150px;
min-height:44px;
}
I have a fb like button on my website but when a user clicks on the button the the pop up comments box is hidden behind the two elements (#centre and footer) and the user can do nothing with it.
My question is, How do I change the z-index of the flyout so when a user clicks the like button it appears in front of other elements?
I have looked at these questions and implemented their answers with no luck in fixing the issue:-
facebook iframe App: Send/Like button z-index issue
Other fixes I have found that did not work were:-
Elements that appear in front of/around the flyout should have overflow: visible; set. (From fb developers FaQ page.)
Changing the z-index of the classes that are listed in the answer from the link above.
Changing the width and z-index of a class generated by the iframe, and located in a script tag, called _56z-
All I would like is the flyout to appear on top of all elements on the page without having to change the layout.
Here is the link to my site http://mikelonsdale.co.uk
Thank you for your time and help.
Change the z-index for your #centre and #footer div's to negative values. This should fix the problem.
Don't forget to change all of the other elements in relation to your site. You will be moving the #centre div to at least to z-index: -2 (to allow room for the #footer div to fit in at -1).
The following code fixes the problem entirely, without having to change the overflow or z-index of anything. You simply add the code below, and voila. HOWEVER, it will throw off your site's layout a little (it will flow over .. ha). Amazing fix, small catch. Borderline acceptable but the best solution I found. (Found it on the WP forums).
.fb-like span {
overflow: visible !important;
width: 450px !important;
margin-right: -375px;
}
I added
.fb-like span {
z-index: 999999999999999;
}
to my css and that fixed it. It isn't even marked as active, and deactivating it in developer tools doesn't change anything either. If I take it out of my CSS things go all stupid again though.
I have an issue where the sub menu (dropdown) is behind the #main div. I have tried changing z-index values (ensuring div is positioned) but had no luck.
I have uploaded my progress to jsfiddle and wondered whether someone could see where I have gone wrong?
http://jsfiddle.net/indigoclothing/8aGZC/4/
Thanks
The demo is very complicated to work through and you have added the some CSS in the HTML as links and some as managed resources in jsFiddle which are loading twice, so it is very difficult to create a working fiddle. In future may I suggest that you just include the relevant parts that are not working. Constructing a Short, Self Contained, Correct (Compilable), Example often results in figuring out where the problem is yourself as well :-)
That said, removing the following from the CSS section in the fiddle and the managed resources seems to fix it for me.
#header {
z-index:2; // <-- remove this
}
The problem is that the menu and content have different stacking contexts - see Overlapping and z-index for an excellent description of this concept.
Did you try using position: inherit; on the "main" div rather than relative, and modify the position of the element accordingly?
lately i've been slamming my head against my desk to solve this Problem. Didn't work out. I know it can be solved by editing the contents with some clearing elements. Sadly there is some javascript sorting beeing used and the Sourcode is being generated by CMS Components so that would be my last shot.
I'm having a few boxes beeing floated alwayes 2 in a row. The boxes have a diffrent height but equal width and are all placed in a container with static width. The link shows the source i need to reproduce the Problem. My Boxes are beeing floated left. I tried to fix this with clear: left on odd and clear: right on even elements. But that only works in ff/ie8/chrome Browsers, not ie7.
Example: http://www.i3rutus.de/ie7divfloatexample/
Anyone knows a possibility to fix this Problem by just editing the CSS not the actual XHTML? Problem appears in IE7. IE8, Chrome and FF work fine.
Any Ideas?
Thanks in advance
Here's the deal. You only need to float one of each of the pairs of boxes. Here's the amended css rules:
.even {
float: left;
clear: left;
margin-top: 0
}
.odd {
}
Demo
(Incidentally, your use of odd and even had me chasing my tail for a while ;) )
Just remove
.even {
clear: left;
}
.odd {
clear: right;
}
and it works as intented.
If you are able to include a js in the header then maybe try to use http://code.google.com/p/ie7-js/?
I played with it but given float:right screws it up, it's probably a little more complex than experimenting with float values.
-- update --
I seemed to be able to get it work in ie7 by:
remove float:left on .clear,
added float:left;margin-top:0px to .even