I am having a problem regarding some layout design tasks. Actually I want to achieve a certain layout design, but since I don't quite understand the position property of CSS, it's a bit difficult for me to do this. Here's the link to what i am actually trying to do.
I want an area or container whose position will be fixed as designed in above mention linked. In this web layout design, the left side of the web page is position: fixed: it's not moving and when i scroll the right side of the page it is scrolling down. So i need the same functioning for my web page.
(Sorry for my bad English i am little bit passive at it)
For that you use the position:fixed attribute in your CSS.
You would make a sidebar that does not scroll like this:
HTML
<body>
<div id="sidebar">
This is fixed to the side of the page!
</div>
<div id="main">This Scrolls!</div>
</body>
CSS
#sidebar{
position:fixed;
top:0px;
left:0px;
width:400px;
height:100%;
background:red;
}
#main{
width:100%;
height:100%;
background:lightblue;
text-align:center;
}
EXAMPLE
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
OK so I'm creating my first page and hit a brick wall here. I have a side navigation bar, main top navigation bar with containers below that for content. My problem is that the navigation bar on the left (seems) depicts the position of the carosel viewer container below the thre mini containers below the top navigation bar. EG The central containers begin at the lowest point of the navigation bar on the left.
See Images:
I'm trying to place the blue image carousel container directly below the three central mini containers but the highest up the page it will place itself is the bottom most point of the left side navigation bar. I'm very new to web page design this is not my thing and would like some help here.
I have copied the code into JS BIn for you to take a look at, I also notice there that the three mini contatiners below the top navigation bar are longer than my web page view so maybe it's those that are causing the problem and not the side nav bar??
JSBin link:
http://jsbin.com/dimekupo/1/watch?html,css,js,output
http://jsbin.com/dimekupo/1/edit?html,css,js,output
Many thanks
I wasn't able to get your code example to work for some reason but I but together a simpl example. This looks like a problem with floating. If you add float:left to your sidebar's CSS and float:right to the CSS of the carousel and the main content container that weird spacing should disappear.
Here's an example of what I'm talking about.
http://jsfiddle.net/7QzAu/3/
CSS
body {
width:900px;
margin:0 auto;
font:26pt Georgia;
color:#fff;
text-align:center;
}
#sidebar {
float:left;
width:200px;
height:400px;
background:Red;
}
#content {
width:700px;
float:right;
height:350px;
background:blue;
}
#below {
float:right;
width:700px;
height:200px;
background:green;
}
HTML
<div id="sidebar"></div>
<div id="content"></div>
<div id="below"></div>
I need to style a div so that it scrolls down with page AND is not stuck to the LEFT side of browser like this:
#flyingDIV{
position:fixed;
top:160px;
left:0px;
}
instead I need it to be stuck to the RIGHT side.
thanx in advance.
#flyingDIV{
position:fixed;
top:160px;
right:0px;
}
Seems like you are new to css , I'll recommend this tutorial link for you http://learnlayout.com/
This website help you learn - How to design a good layout using CSS
#flyingDIV
{
position:fixed;
top:160px;
right:0px;
}
To set it from bottom of your page you can use
bottom :20px;
Have you tried floating it?
#flyingDIV {
float: right;
}
Whether this works or not depends on what else you have on your page surrounding the div you're trying to aligh to the right.
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;
}
I've been working on this for hours, and reading over 20 articles and I still have no idea how to do this. I have a background, in which I want text to be positioned in a certain place. Everything is fine until I view it on a monitor with a larger resolution. The background re-sizes fine, but the text is no longer in the place I want it to be.
These images hopefully will clearly describe my situation.
How I want the text to look at any resolution (this is on a 1440 x 900 monitor) http://dl.dropbox.com/u/9134840/demo/1.PNG
This is how it looks on a 1080p Monitor:
http://dl.dropbox.com/u/9134840/demo/2.PNG
<body>
<div id="blah">
<p id="pr">This is a paragraph!</p>
</div>
</body>
</html>
body {background-image:url(back.jpg); background-size:cover;}
#blah{font-size:large; left:300px; top:200px; position:absolute;}
edit: I tried both suggestions, using divs and positioning the text absolutely and relatively and still a no go, the text still moves.
#contain{
position:relative;
width:7000px;
margin:0 auto;}
#blah{font-size:large; left:100px; top:200px; position:absolute;}
I'm not looking for a fixed positioning, because I'm going to be adding content so I need to scroll vertically through the page without the text moving.
Your #blah div needs to be positioned inside a relative div. You might have problems with that if you absolutely positioning something in relation to the body. Place it inside another div or use fixed positioning.
#containerDiv {position:relative;}
#blah {position: absolute; top:200px; left:300px;}
<div id="containerDiv "><div id="blah"></div></div>
Or
#blah {position: fixed; top:200px; left:300px;}
In this case your div will always remain the same place if you resize the window. If you want it to be centered, use something like:
#containerDiv {position:relative; width:700px; margin:0 auto;}
#blah {position: absolute; top:200px; left:300px;}
Also bare in mind that background-size:cover; will not work in versions of IE.
Examples:
http://jsfiddle.net/mYcXX/1/ (absolute) vs http://jsfiddle.net/mYcXX/2/ (fixed)
This looks like fixed layout.
If so why just not cut the central part of the background and put it in a div with style:
{
width:960px; // maybe more or less - the width of the central image
margin-left:auto;
margin-right:auto
}
And position the paragraph relating to that container (the div)
I believe you can solve this problem by separating the background image style from your container. I could be wrong, but try something like this...
body{
background: url(black.png) top center no-repeat;
}
#container{
width: 960px;
margin: 0 auto;
}
I would recommend relying on the natural flow of the dom as much as possible. Basically, don't ever rely on position: absolute unless ABSOLUTELY necessary. And even then its probably a hack.
Okay, I figured it out myself, big thanks to yisela for the guidance. Ultimately though, here's what I did. I looked at a site, like yahoo.com and saw that they had everything centered and had a white background. So no matter what resolution you had, it will still look neat. With that in mind, I made sure my image was gray, and change the background to gray so it all blended in.
Now, as for the container stuff. I placed the image in a container by itself, and centered it. Then I just set the paragraph relative to the container. That way the text will stay in the same position.
html{ background-color:gray }
body{ }
#contain{
width:1280px;
height:2000px;
margin-left:auto;
margin-right:auto;
background-size:cover;
background: url(back6.png);
}
#blah{font-size:large; left:120px; top:230px; position:relative;}
<div id="blah">
<p id="pr">This is a paragraph!</p>
</div>
</div>
</body>
</html>
And now..I think I'll happily go back to c#, after this wonderful experience with CSS.