I can't for the life of me figure out why the drop down when hovering over the "about" menu item is appearing behind the images, see this link http://www.ziprfit.com.au/index.php (I hope it's OK to post the link).
All search results suggest z-index, well the z-index for the images in there goes to 6, and I've set the menu to 100 and it still appears behind the images.
On the server side this is generated by PHP.
Thanks for your help.
Add position: relative; in your #nav ul ul
#nav ul ul {
z-index: 100;
display: none;
position: relative;
}
Add position: relative; and z-index: 100; to your #nav div :)
Related
On my shop's front page, my products add to cart buttons is not aligned.
See this picture
A fix to this would be to just make the titles shorter or make every title be on 2 lines, but that would bring me more problems on my category pages.
Is there a way to just fix this here on the front page?
Option #1: Set position: relative and optionally a min-height on your li.product and set position: absolute and bottom: 0 on your [Add to cart] buttons in your theme's CSS. Note that your theme may be using different classes/IDs. If the ones I've used don't work, you'll need to inspect with your browser's inspector tools to see which to use for your theme:
li.product {
position: relative;
min-height: 400px; // you may or may not need to set the height
}
li.product a.button {
position: absolute;
left: 0; // combined with right: 0, will center the button
right: 0; // combined with left: 0, will center the button
bottom: 0;
}
Option #2: Set a min-height on your product's title (e.g., h2)
li.product h2 {
min-height: 100px; // Adjust to account for your shop's product with the longest title
}
I installed the classifieds theme in Wordpress.The menu which I created for the previous theme can be seen in my new theme, but it is not visible when I take my cursor on the menu den only I can see the menu.
Kindly share the URL of your website. I think this is css styling issue.
Seems like the superfish menu plugin is not setting the CSS properties correctly when hovering over the menu item.Modify like below
sample css
.nav2 li.sfHover ul, ul.nav2 li:hover ul {
background: none repeat scroll 0 0 #B3B3B3;
color: #FFFFFF;
text-decoration: none;
z-index: 1000;
visibility: visible!important;
display: block!important;
}
I'm currently building a site using WordPress. I'm trying to layout a listview for the products page with CSS but I am experiencing a couple of problems. The code behind these elements are within the WordPress files so I'd rather not touch those if possible.
What I'm trying to do is move "MSDS" next to the title as it was below the title before. I've set it to relative position and moved it using top and right pixel values.
Example 1
Example 2
My first problem is that if you look at Example 1. I have positioned "MSDS" next to that specific title but when you look at Example 2, it has a shorter product name but the positioning of "MSDS" is the same therefore it looks silly. How do I go about fixing this?
My second problem may be fixed if the first is fixed but on a maximised window, the layout looks fine but when resized to a smaller window then the window covers "MSDS" but the title looks fine as it wraps so it's viewable on the page.
I'm not entirely sure where to look or what specific things I should be looking for to find a fix for this. So any help would be much appreciated. The code below is what I used to reposition the "MSDS"
.product-list .product-thumb .description {
position: relative;
bottom: 26px;
left: 290px;
width: 30px;
}
You can always use :after for these things
These should help.
Add these in your stylesheet to
.product-list .product-thumb .description:after {
position: absolute;
content: "MSDS";
color: blue;
}
You can style the element accordingly then
you are looking for position: relative and position: absolute i think.
Try this: https://jsfiddle.net/r5rnyh3y/1/
.title {
display: inline-block;
position: relative;
}
.title a {
position:absolute;
right: -100%;
margin-right: -10px;
display: inline-block;
width: 100%;
}
Let's say that I am an admin of a certain website.
I am using latest release of Wordpress, my theme is a child theme of a theme called "Twenty Fourteen". I am using Mozilla Firebug to inspect elements I want to edit.
The page does not display in full width and there is still some unused space left (it is visible on the right). I would like to widen the page. How to do this? I have a Full Width template, setting all pages to this however does not work.
I am looking for a CSS solution (to edit the style.css of my child theme).
If anyone could help me, I would be really thankful. :)
So you want a full width page?
I've got some suggestion for you:
1. Use a CSS Framework like Bootstrap
Bootstrap will allow you to make a full width page without any problems. On top of that it will make your website responsive. Read more....
2. Use your own CSS
You need to make your body use all the space there is. You can't just use
body
width: 100%;
height: 100;
}
This would make the body take as much space as the children needs.
The body has always some margin and padding. So you need to get rid of that too.
body {
margin: 0;
padding: 0;
}
The last step in your CSS would be a fixed position for all 4 sides and make the position relative:
body{
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
So your final CSS should look like this:
body{
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
}
I suggest you to use a Framework, which makes your workflow alot easier.
Regards,
Megajin
You can try to override this css code:
.site {
width: 100%;
position: relative;
margin-left: 0px;
}
.site-header {
position: relative;
width: 100%;
z-index: 4;
}
Otherwise if you choose framework then you can easily integrate and understand "matirialize css" OR Bootstrap.
http://materializecss.com/about.html
I'm pretty sure I'm not getting the hierarchy in css for building this. I can't seem to find a place that will actually explain it to me, and how each level works. I've found some that show, but when you build it if you don't know, at least for me, it's kind of hard to see. Never really used css suprisingly until now. If someone wouldn't mind pointing out my error and explaining it please. :)
I'm just trying to add a 2nd drop down (a drop down to my drop down) that will show up horizontally under the initial hidden drop down, when selecting the correct one so the correct php id will populate in the link. I included the PHP just so if I put it in wrong someone could point that out to me as well.
also to add: the 2nd level hidden drop down links seem to be there when I hover over "project" instead of when hovering over the populated projects like it should. The weird thing is the links don't actually show up (not visible), but if i put my mouse there ie lets me know theres a link.
http://jsfiddle.net/HHwLH/
In your css
#navbar li:hover ul, #navbar li.hover ul {
position: absolute;
display: inline;
left: 0px;
width: 100%;
margin: 0px;
padding: 0px;
}
your sub menu and sub sub menu is affected by this.
When you hover on the li all ul descendants will be affected (submenu and subsubmenu)
in your markup the uls are children of the li so you can use the children selector instead of the descendant selector to only show the direct child menu/ul.
#navbar li:hover > ul, #navbar li.hover > ul {
position: absolute;
display: inline;
left: 0px;
width: 100%;
margin: 0px;
padding: 0px;
}
This will work for both submenu and subsubmenu
FIDDLE