This site: https://dev.romaycorp.com/shop/
If you hover over "Products" the images underneath overlap. Some random elements appear on top, some don't. Those images do.
The borders on this page do the same thing: https://dev.romaycorp.com/product-category/silicone-nitrade/
I've tried every z-index setting on every element imaginable.
I cannot solve this one.
Your CSS is little awkward. But found your mistake.
Add to class .product-category .product z-index: -1 this will fix your problem.
Here the source you should add:
<li class="product-category product">
<a href="https://dev.romaycorp.com/product-category/cermet/"><img src="https://dev.romaycorp.com/wp-content/uploads/2017/07/store-cermet-insert-2.jpg" alt="Cermet" width="300" height="300" data-pin-nopin="true"> <h2 class="woocommerce-loop-category__title">
Cermet <mark class="count">(72)</mark> </h2>
</a>
</li>
Related
On my page, I have assigned the video area the maximum z-index value in Opera but still the footer and the header are coming on top of it. Please guide me. Thanks.
<div id="lightbox" style="z-index:16777271;">
<p>Click to close</p>
<div id="content"> <a href="#">
</a>
</div>
</div>
You must remove the z-index:10 from the #main rule.
Right now, this rule creates a new stacking context and all its contents are affected by its own z-index.
Read https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context for more info.
I am in the middle of creating a website using Dreamweaver CC 2014. The Homepage scrolls fine, but the About page and Calendar page doesn't scroll at all and cuts off the bottom half that should be displaying. I've read the other threads that say to add the overflow: scroll code to the CSS. I have done that, but it still isn't working and I'm wondering if I have placed the code in the wrong place?
Here is the link to the Calendar page:
http://normajdougherty.com/Calendar.html
Would you look at the CSS and HTML code and let me know what the problem is? Thanks so much.
You have
position:fixed;
Specified in your navigation bar, which is effectively "locking" the page in place. If you set its position to relative, your menu items (which should also not be set to "fixed") are no longer going to be attached to the navbar.
But the way you have implemented the navbar in the first place is kind of kludgy. You don't need a separate div for the blue bar in the background.
Instead of having two overlapping fixed divs, which is a bad practice for several reasons, just place your navigation buttons in a single div with a background color, using the "background-color" property.
Also, the reason it looks "cut off" halfway down is because that's just the size of the image you're using in the background. Consider setting up a color gradient or something, or honestly just leave the background a solid color. Unless you do something particularly fancy, a big static image like that is not going to look the way you want it to.
EDIT: Okay, at second glance, it looks like your entire page is wrapped within the navigation bar div. That's why the whole page is locked in place when "position:fixed" is set. Make sure you close the tag for the navbar before the rest of the page content starts.
But still, you shouldn't have a fixed navbar like that in the middle of the page, as it will scroll down with the rest of your content and just end up looking really bad.
It is because you set
positon:fixed;
in navbar class.
remove it and page will work fine
So remove
position:fixed
from .navbar class in calendar.css
You're facing this problem because the content part of your page is wrapped inside the navbar div which has been assigned a fixed position. You will need to add the intro div and the <iframe> after the navbar div for your website to function properly.
This is how that particular part of code currently looks like on your website (notice <div class="intro"> and the <iframe> is inside <div class="fluid navbar">):
<div class="fluid navbar">
<img src="images/BlueNavBar.png" alt="navigation menu">
<div id="menu">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li><a href: "books.html"="">BOOKS</a>
</li>
<li>BLOG</li>
<li>MEDIA KIT</li>
<li>SPEAKER</li>
<li>
</li><a href="Calendar.html" calendar<="" a="">
<li>CONTACT</li></a>
</ul><a href="Calendar.html" calendar<="" a="">
</a>
</div>
<div class="intro">
<p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
</p>
</div>
<br>
<center>
<iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</center>
</div>
And this is how you should modify it (both <div class="intro"> and the <iframe> are added after <div class="fluid navbar">):
<div class="fluid navbar">
<img src="images/BlueNavBar.png" alt="navigation menu">
<div id="menu">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li><a href: "books.html"="">BOOKS</a>
</li>
<li>BLOG</li>
<li>MEDIA KIT</li>
<li>SPEAKER</li>
<li>
</li><a href="Calendar.html" calendar<="" a="">
<li>CONTACT</li></a>
</ul><a href="Calendar.html" calendar<="" a="">
</a>
</div>
</div>
<div class="intro">
<p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
</p>
</div>
<br/>
<center><iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe></center>
Add this two styles in at header section of Calendar.html (this code is writing as internal css, because this code don't affect other pages)
#menu {position: absolute; }
.navbar {position: static;}
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
I would like to add a gradient layer to the sides of my slider.
So i have this code:
<div>
<div id="gradientsx">
</div>
<ul class="slider">
<li>item 1</li>
[...]
</ul>
<div id="gradientdx">
</div>
</div>
.gradientsx has a background with the gradient and his postision is absolute. But also the <ul> must have an absolute position (to permit the sliding), so the grandient in gradientsx became invisible. How can I fix this?
Here's the sample: http://jsfiddle.net/tPMuA/3/
You can use z-index to force the shadow-div on top of the items. But beware, it may also block mouse-events if it's on top of the items. Not sure if this is a problem, though, because I can't find out from that fiddle what the slider is going to look like.
http://jsfiddle.net/tPMuA/7/
I have 10 country flags on my company's website (VS 2010/vb/asp.net4.0). Clicking a flag will display the website in that country's language for their entire session.
I would like to, when the client hovers over the flag, have a mini-picture of that country hover above and to the right of the flag. So when they click on the German flag, a mini-map of Germany appears to the upper right -- and I'll z-index it so it goes above the table row above it -- and in addition to the image, it'll say something like, "Deutch" or "View this website in German" (in German, of course).
**Images of countries here when hovering**
Flag1 Flag2 Flag3 Flag4 Flag5 Flag6 Flag7 Flag8
For someone like me who's not great at CSS, is this possible, and if so, how would I go about doing it? Any guidance would be greatly appreciated!
suppose you are using a list
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
.map{
display:none;
}
a.flagbutton:hover .map{
display:block;
}
you can add extra css to do the positioning in the .map bit!
This is pretty simple to do with just CSS, Javascript isn't required at all. There are lots of details, but the basic pattern is to put your images inside the same element as the flag. Let's call it .flag. Set the country images to display:none;. Then, set the .flag:hover img to display:block;. That will make the image appear only when hovering on the flag.
You'll have to set the position of the flag element to relative, and the position of the country image to absolute. That will allow you to set the top and right positions of the image to where you want.
I would recommend using jquery as that will allow you to get the display of the image/text when you hover. CSS will be used to position and format image or text.
Here is a good reference to start with.
http://api.jquery.com/mouseover/
You can do it in CSS but if you need animations you need JS. Here is the code for the one without the anims.
HTML
</ul>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
.
.
.
</ul>
CSS
.item {
position:relative; /*Needed for pos:absolute below*/
}
.pic {
display:none;
}
.item:hover pic {
display:block;
position:absolute;
top:-20px;
}
I've created a fiddle for you - http://jsfiddle.net/UHZzJ/
You can substitute the list with <div>'s as well or as your structure requries. The line which says 'View this website in German' needs to be in a sub-div adjacent to the link and be absolutely positioned to the parent <div>.
Forgot to add, a li:hover will not work in IE6. Only a:hover is allowed for. In that case you'll have to put the div within the <a> (setting the display:block). If you're open to JQuery, there are more elegant solutions - http://flowplayer.org/tools/tooltip/index.html, http://craigsworks.com/projects/qtip/