I've a problem with my layout. It seems like a horizontal scroll appears on the screen and I don't want that. I already tried to find the problem but I can't see it.
You can see the whole code in codepen.
click to open codepen
.header{
background:rgb(230, 94, 94);
width:8vw;
height:100%;
position: fixed;
left:0px;
bottom:0px;
}
Maybe the problem is the above code, but I recommend you that enter to codepen link to see all CSS and html.
You should change the view to editor view.
I hope somebody can find the problem because I can't see it, by the wa, I'm new in HTML & CSS that means maybe it's a fool problem.
Thanks and good luck!
If you reduce that viewport width set on your div main-content a little you might get what you want.
example set width to 99vw;
.main-content{
width:100vw;
background:white;
padding-left:8vw;
width:99vw;
}
codepen here
Related
I'm trying create an effect on a header image that will progressively blur and fade that image on scrolling down. I've tried to search online for a solution but I don't even know what to call it. I have found an example very close to what i'd like to achieve but I don't quite understand how they've done it either. My experiments have been a total flop and I was wondering if anyone could either point me in the right direction or at least let me know what something like this might be called so that I can search for a solution. Thanks for your time.
The example site is https://www.intertel.co.za/password-grabber
(You'll notice how the background image is almost black by the time the page content reaches the top of the screen - that's what I want)
I've included a snippet here so you can see my dismal attempt
.header-container {
position:relative;
top:0;
left:0;
width:100vw;
height:25vh;
overflow:hidden;
}
.header-image {
background-image:url(header-image.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:0 0;
background-attachment:fixed;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
.header-overlay {
background-image:url(header-overlay.png);
background-size:cover;
background-repeat:no-repeat;
background-position:0 0;
position:fixed;
top:100%;
left:0;
width:100%;
height:100%;
margin-bottom:-25vw;
z-index:2;
overflow:hidden;
}
<div class="header-container">
<div class="header-image"></div>
<div class="header-overlay"></div>
</div>
I don't know if there is a solution in pure CSS but you should try using Javascript to create a function that modifies your div style when scrolling down.
What you are looking for are CSS Filters. With these, you can blur images, add/remove contrast and a lot more.
The link you have provided makes use of a blurred image that has been created beforehand. When you're at the top of the page it has an opacity of 0, which goes up to a max of 1 when you're scrolling down.
Their approach is less resource heavy, but not the ideal way, if you ask me. If you use CSS Filters, you will be able to give the same effect to every image you want without having to create a blurred out copy every time you want to use a new banner image.
The way you achieve the effect is fairly easy with JavaScript. I've created a Fiddle to demonstrate the effect. Of course you can do a lot more with this piece of code, like shifting the hue, removing contrast, etc.
Hope this helps
I am currently working on a website design using the 960 grid system and came across a small snag in the final moments of the design.
Ultimately, I just want to set my header and footer bars to be 'fixed' on the page, so that they will remain stationary even when the rest of the page is scrolling. Here is a great example of a fixed navigation bar.
http://ryanscherf.net/
Mine wont be vertical, but you get the point.
The problem that I am coming across is that the header works perfectly, and exactly the way I suspect it will. Here is the HTML for my header
<div id="header">
<p>
ATS Logo
</p>
</div><!--end header-->
and the css to make it stretch and fix the position
#header
{
background:grey;
width:100%;
height:65px;
position:fixed
/*padding:15px;*/
}
This solution works exactly the way i want it too. However, when i apply the same exact settings to the footer, it causes undesired results.
Here is a fiddle to show what I mean. You will have to uncomment the 'position:fixed' line for the footer to see what i mean.
http://jsfiddle.net/s4cWP/
and full screen
http://jsfiddle.net/s4cWP/embedded/result/
Its worth noting that in addition to using my own css (located at the top of the jsFiddle!) i am using the 960 reset grid and 960 12 column style sheet.
I would really appreciate a push in the right direction. Is there something im not accounting for here?
Thanks!
I'm assuming you want the footer to always appear like the header: JSFiddle.
New #footer:
#footer
{
background:grey;
width:100%;
position:fixed;
bottom:0;
left:0;
}
Also, due to overlapping, I added padding to the bottom of the #container:
#container
{
padding-top:75px;
padding-bottom:30px;
}
Not exactly sure how to phrase the question in the first place here but I'll give it a go.
I have an image that I want to fixed-scroll down the page, which I want to change colour smoothly as it enters a second div with a different coloured background. I've got the divs sorted, the images placed perfectly and the effect I want working excellently - my only problem now is that I cannot align the two images for the life of me, due to using percentages etc.
I have a working example here you'll certainly need to look at - jsFiddle - you may need to resize the page around a little bit to understand the particular alignment issue I'm having. The top "Hello" sits a set amount off-center, which I want to achieve with the second "Hello". I just can't get it to happen! Any suggestions? I've been looking at possible jQuery solutions but no luck so far.
Thanks heaps for any answers. Cheers.
Live demo link here http://jsfiddle.net/EtJBn/107/
Hi now you can do easily this
Just define some properties as like this
Css
html, body {
height:100%;
}
#top{
height:100%;
width:100%;
}
#bottom{
height:100%;
width:100%;
background-color:black;
z-index:200;
}
#topsq {
position:fixed;
height:175px;
background:url("http://mattwaymouth.com/images/hello_small.png") no-repeat center top;
left:0;
top:50px;
right:0;
z-index:1;
}
#second {
position:relative;
background: url("http://mattwaymouth.com/images/hello_small_green.png") no-repeat center 50px fixed;
left:0;
top:0;
right:0;
z-index: 200;
height:300px;
}
HTML
<div id="top">
<div id="topsq"></div>
</div>
<div id="bottom">
<div id="second"></div>
</div>
Live demo http://jsfiddle.net/EtJBn/107/
Well. Seems I found a solution, though I wouldn't call it ideal. It works well though! After Chad said to try background-position: left center; I realized if I simply put the image as background-position: center; and made the image have a bunch of blank space to one side, with enough twiddling on photoshop I'd manage to line the two up. Works great now, lines up perfectly in all my browsers.
Here's the example - jsFiddle (though you cant see much of a change in it, as it's the image itself that had to be altered.)
Thanks for the replies guys.
As you can see here: http://www.responsinator.com/?url=www.vaneldijk.nl there is an extra space on lower resolution devices. I've tried using firebug and webmaster toolbar to figure out what is causing this to happen but so far no luck. The CSS can be found here: http://www.vaneldijk.nl/sites/all/themes/prestige/css/style.css.
I've build tons of responsive websites without this problem so hopefully someone can help me out.
Change this it makes the page 100% width.
#wrap .inside, #footer .inside {
text-align: left;
width: 100%;
}
After a lot of testing I finally found the solution. Make sure your wrap elements (so your direct elements in your body) have an 'overflow: hidden' declaration in your css. So for example this your HTML:
<body>
<div id="wrap">Your website content</div>
</body>
Your CSS should look like this
#wrap{
overflow:hidden;
}
This will remove the weird space in Opera.
I am looking for two divs that look like this:
<div style="height:20px;" />
<div style="height:100%;" />
This gives me two divs, one with 20px height, and the other at 100% of the entire screen height, which puts a vertical scroll bar worth 20px. What I actually want is one to be 20px, and the other to be 100%-20px. I know that IE has calc() method, but isn't there a much easier way to do this that will work in all browsers?
#div1 {
height:20px;
position:fixed;
top:0px;
right:0px;
left:0px;
}
#div2 {
position:absolute;
top:20px;
bottom:0px;
right:0px;
left:0px;
}
maybe this is what you need..
EDIT sorry misread the title.. corrected :O how ever if you wish to have multiple div2 the you might need a structure like
<div id="div1"></div>
<div id="div2" style="overflow:auto">[multiple div2 go here]</div>
I tried this out, adding a little sample text to your div, and got rid of the scroll bar simply by not giving the second div a height, and allowing the broswer (both IE and FF) to figure out for itself what hieght to give it.
However, given your comment to George, I think this may not be your fix either. Perhaps you could post a little bit more of your code (or psuedo-code) to give at least one typical example of the second div being replaced.
There is an easy way: Place the first div (20px) inside the second.
EDIT: Since my first answer is not an option for you, you can use scripting to resize the div on the fly. You can caclulate document.height - 20px and apply the result as the height of the "100%" div. CSS does not offer a way to do:
height: 100% - 20px
However, Javascript does:
(via jQuery:)
$( "#big_div" ).height( $( document ).height() - 20 );
It is possible without any Javascript if you can provide a fixed width:
http://jsfiddle.net/mNNeq/47/
The following is an excellent resource to help you with positioning content:
http://www.barelyfitz.com/screencast/html-training/css/positioning/