I have a sidebar that is functionally similar to the one from w3schools, and the sidebar from w3schools displays the same problem. The sidebar 'jumps' and leaves an unsightly space in the area, when scrolling down the page and mobile chrome's navbar hides, it leaves a hole at the top, and when scrolling up and the menu slides back out, it covers the top, and makes a space at the bottom.
This is my sidebar's state when I first started testing for mobile (which I forgot)
.sidenav {
width: 250px;
position: fixed;
top: 0;
bottom: 0;
z-index: 1;
left: -250px;
overflow-y: scroll;
overflow-x: scroll;
transition: var(--delay);
overflow: -moz-scrollbars-none !important;
background: -webkit-linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
background: -moz-linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
background: -o-linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
background: linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
}
The main difference between my sidebar and w3's is that it's meant to be scrollable since I will fill it with a few links. Now, considering that w3's has the same error as mine, I know for a fact that it isn't caused by the additional content that is placed on the sidebar.
Through testing and research, I have found that the viewport of mobile (and the hiding of chrome's menu) is the one that's actually causing the issue, along with bottom, with the browser being unable to update 'top' and 'bottom' to 0.
I tried to fix this in multiple ways:
Removing Bottom
Which just ended up creating a space where the navigation links/content ends
Making Height 100%
Which just made it unscrollable when the expandable divs open and destroying desktop functionality
The current solution
Which allows the desktop version to work as fully intended, fixes the 'space' or 'jumping' issue, but also makes it so that on mobile it can't scroll all the way down.
.sidenav {
width: 250px;
position: fixed;
top: 0;
height: 100vh;
z-index: 1;
left: -250px;
overflow-y: scroll;
overflow-x: scroll;
transition: var(--delay);
overflow: -moz-scrollbars-none !important;
background: -webkit-linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
background: -moz-linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
background: -o-linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
background: linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
}
#media (min-width: 1000px) {
.sidenav {
bottom: 0;
height: initial;
}
}
Try adding <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
in the <head> of your html document and see if that helps.
Related
I've seen a million people do it, but I haven't been able to get it to work.
background: -webkit-linear-gradient(left top, black, #333333 85%, gray), url('/img/helix.png');
I've tried with the order reversed and with background-image, still nothing.
I saw one person use:
body:before {
content: " ";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
}
But there has to be a better way...
Updated code:
In an ID for the image div:
height: 100%;
width: 100%;
background: transparent url('/img/helix-white.png') no-repeat;
In the CSS for the body element:
background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
background: -moz-linear-gradient(left top, black, #333333 85%, gray);
background: -ms-linear-gradient(left top, black, #333333 85%, gray);
background: -o-linear-gradient(left top, black, #333333 85%, gray);
background: linear-gradient(left top, black, #333333 85%, gray);
Update 2:
I used a div with the image in it with CSS for positioning:
<div id="backgroundImage">
<img src="img/helix-white.png" alt=" " />
</div>
#backgroundImage
{
position: fixed;
bottom: 10%;
left: 7%;
opacity:0.4;
filter:alpha(opacity=40);
-webkit-transform: rotateZ(20deg);
-moz-transform: rotateZ(20deg);
-ms-transform: rotateZ(20deg);
-o-transform: rotateZ(20deg);
transform: rotateZ(20deg);
}
And in the body CSS for the gradient:
height: 100%;
background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
background: -moz-linear-gradient(left top, black, #333333 85%, gray);
background: -ms-linear-gradient(left top, black, #333333 85%, gray);
background: -o-linear-gradient(left top, black, #333333 85%, gray);
background: linear-gradient(left top, black, #333333 85%, gray);
Why not have a div with the background gradient then another div inside with a background image. If the background image is a .png with transparency or doesn't fill the div, you'll be able to see the gradient behind it.
e.g.
<div id="gradient">
<div id="image">
Your content here.
</div>
</div>
CSS
#gradient {
background: -webkit-linear-gradient(left top, black, #333333 85%, gray); }
#image {
background: transparent url('your image here') center center no-repeat; }
On another note, you should use a full range of gradient options to support all browsers (not just webkit). I'd recommend using a CSS3 gradient generator for the code:
http://www.colorzilla.com/gradient-editor/
as mentioned, be sure you're checking your stuff in either Safari or an older version of Chrome. They both use(d) webkit as the rendering engine.
I have the following CSS code.
body{
height: 100%;
min-height: 100%;
max-height: 100%;
background-color: #1468b3;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1468b3));
background-image: -webkit-linear-gradient(top, #2F2727, #1468b3);
background-image: -moz-linear-gradient(top, #2F2727, #1468b3);
background-image: -ms-linear-gradient(top, #2F2727, #1468b3);
background-image: -o-linear-gradient(top, #2F2727, #1468b3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2F2727", endColorstr="#1468b3");
}
Regardless of the content of the page there should be a nice gradient that stretches from the top to the bottom of the browser window. This screenshot illustrates the issue:
I'm not quite sure why this is happening.
Adding
no-repeat;
Cancels out the gradient and instead the background is the solid #1468b3
Try adding html { height: 100%; }
I got it to display exactly how I want it in Firefox, but with every other browser there seems to be some problems. This website isn't exactly public (as in, no one knows of it) yet as I'm still trying to get things to display properly, but the URL is: http://www.mixbin.net (just view:source for the code - there's nothing server side interfering)
Firefox: Perfect.
Chrome: Perfect except the bottom margin is being ignored in the .content class.
Opera: Perfect except the bottom margin is being ignored in the .content class.
Safari: Displays gradient properly but forces a refresh as soon as you scroll halfway down the page.
Internet Explorer: Displays gradient properly but .content div is cut off where the gradient stops.
background:linear-gradient(top, #000000 0%, #353535 100%); /*W3C*/
background:-moz-linear-gradient(top, #000000 0%, #353535 100%); /*FF3.6+*/
background:-ms-linear-gradient(top, #000000 0%, #353535 100%); /*IE10+*/
background:-o-linear-gradient(top, #000000 0%, #353535 100%); /*Opera 11.10+*/
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #353535)); /*Chrome,Safari4+*/
background:-webkit-linear-gradient(top, #000000 0%, #353535 100%); /*Chrome10+,Safari5.1+*/
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#353535',GradientType=0 ); /*IE6-9*/
No images wanted. So please don't reply with, "just make a background image".
Update 2: Everything (including IE), is now working. I switched these two lines from:
background:-webkit-linear-gradient(top,#000000 0,#353535 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(100%,#353535));
To:
background:-webkit-linear-gradient(top, #000000, #353535);
background:-webkit-gradient(linear, left top, left bottom, from(#000000), to(#353535));
If your CSS for the gradient is:
background: linear-gradient(top, #000000 0%, #353535 512px);
there will be no need for a <div> with height 512px. Unfortunately, this solution works for every browser except IE.
Back to your extra background <div> approach. I copied and modified your code a little. This works for all browsers.
body {
background: #353535;
}
.content {
background-color: white;
height: 1000px;
margin: 20px auto;
width: 300px;
z-index: 2;
position: relative;
}
#background {
position: absolute;
top: 0;
height: 512px;
width: 100%;
background: linear-gradient(top, #000000 0%, #353535 100%); /*W3C*/
background: -moz-linear-gradient(top, #000000 0%, #353535 100%); /*FF3.6+*/
background: -ms-linear-gradient(top, #000000 0%, #353535 100%); /*IE10+*/
background: -o-linear-gradient(top, #000000 0%, #353535 100%); /*Opera 11.10+*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #353535)); /*Chrome,Safari4+*/
background: -webkit-linear-gradient(top, #000000 0%, #353535 100%); /*Chrome10+,Safari5.1+*/
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#353535', GradientType=0); /*IE6-9*/
}
<body>
<div id="background"></div>
<div class="content"></div>
</body>
This might not be the solution you are looking for but, since you will have to use hacks to make it looks the same on different browsers, why wont you use an image of the gradient and repeat it in the background.
If your background gradient is 300px, make the image with 300px height and 1px width (image size wont be over 1KB), and repeat it in your background
background: url('bg_gradient.jpg') repeat-x 0px 0px;
It will work on all the browsers without any hassle;
I am making a background in the body element but when I make a background it uses the window height (only the visible height) and if the user scrolls the page down the background repeats it self. If I use no-repeat the rest of the page is in solid color.
I have used background-size: 100% 100%; but still not working.
I only want a background that goes from #ccc to #000 and fills the entire page without repeating itself.....
Can anyone be so kind and help me? Thanks in advanced!
EDIT:
My code is:
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background: rgb(204,204,204);
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#000000',GradientType=0 );
}
LAST EDIT:
body {
background: #000;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
}
note: The best solution I found. When I scroll the window you can see the background color because the background-image does not repeat and as the background-image ends with the same background color everything is ok!
Unfortunately, you cannot stretch out background images, so what you are seeing is actually what you're supposed to see. Normally when sites use gradients as background images, they make it so the top of the gradient is flush with the top of the screen by setting background-position: 0 0, the gradient repeats itself horizontally by setting background-repeat: no-repeat, and then they set the background-color of the site to be the same color as the bottom of the gradient.
There are ways using CSS3 and filters in which you can create gradients for users, but there is a limited amount of browser-compatibility for these features. Here is a fiddle containing a gradient: http://jsfiddle.net/Wexcode/qhMx9/. See this article for more information about those features.
I need to underline my elements (menu items) with a line which has an gradient on BOTH ends.
It can't simply be a graphic (even stretched one), since the width of elements may vary significantly.
The desired effect:
What I did, was to create a line, 1000px wide, with gradient on both ends, then append following HTML <div><div class="right"> </div></div> to every element to be underlined.
The CSS is following
#navmenu li div
{
height: 1px;
background-image: url('images/1000glight.png');
background-repeat: no-repeat;
}
#navmenu li div.right
{
width:35px;
float: right;
background-position: -965px 0;
background-image: url('images/1000glight.png');
background-color: #212121;
}
This however is not truly alpha. I need to specify the background color of "right-side" div in order to "cover" the image (1000px line) which is below.
Any ideas how could I improve it, keeping pure CSS?
Using an approach similar to this, with the gradient being the background image of a wrapping div with padding-bottom to show only the lower part of the background:
<div class="wrap">
<div class="content">Some Text!</div>
</div>
And CSS:
.wrap {
float: left;
padding-bottom: 5px;
/* IE10 */
background-image: -ms-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Opera */
background-image: -o-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #fff), color-stop(0.25, #000), color-stop(0.75, #000), color-stop(1, #fff));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
}
.content {
background-color: #fff;
}
Works, but does omit IE<10; which might be do-able with some kind of filter, but that'll take more reading before I can post such.
JS Fiddle demo of current implementation.
Unfortunately the DX.transform option doesn't appear able to allow for multiple stops that the above uses, reference: Simulating color stops in gradients for IE
So, perhaps you'd have to use a background-image fallback for IE<10, which is far less than ideal.
Use the border-image gradient CSS3.
div {
width:200px;
border-style:solid;
border-width:15px;
text-align: center;
-webkit-border-image:
-webkit-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 100%) 0 0 100% 0/0 0 15px 0 stretch;
}
Demo here.
This will only work with Webkit browsers (Chrome, Safari etc). There should be some vendor specific equivalents.
You can use an empty div with a CSS3 Gradient... check out the presets here: http://www.colorzilla.com/gradient-editor/ - of course you'll have to change the orientation of the gradient. I use this a lot for similar issues. It's a great alternative to images.