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/
Related
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>
There's this fixed header element (a block element), with an absolute positioned nav element with a menu, and another fixed element as the logo:
<header>
<nav id="menu">
<ul id="menuItems">
<li class="menu-item" role="menuitem">About</li>
<li class="menu-item" role="menuitem">Contact</li>
</ul>
</nav>
<div id="topLogo">
<h1>MAIN</h1>
<h2>SUB</h2>
</div>
</header>
The <header> doesn't have dimensions, it doesn't take-up space (check out with an inspector tool).
I need it to take space (and still be fixed).
Look at the JSFiddle to see it with the complete CSS as well:
https://jsfiddle.net/5amo16q8/4/
Changing the nav to float:left and removing the position:absolute seem to create to desired result.
See: https://jsfiddle.net/5amo16q8/8/
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'm using the 960.gs style sheets for a drupal site - I would like to extend both the header, and footer sections to the edge of the webpage- resulting in something precisely like stack overflow's website.
I believe you need to use a div with no predefined helper classes, as div's will by default expand to the full width of their parent (if theres no wrapper - it will be the full screen)
Some trivial example:
<header>
<nav>
<ul>
<li> blarg </li>
</ul>
</nav>
</header>
<div id="main" role="main" class="container_12">
....
....
</div>
<footer>
<p>Thanks!</p>
</footer>
Hope this helps.