I've been looking into mimicking some websites to learn some new neat techniques.
And while doing so, I came up with some trouble emulating a certain site.
http://dangblast.com/ heres the link to the site.
If you look at the top of the website there is a div that contains a background image that has an "absolute" position and a "background-size" that covers and my question starts here.
Right underneath that div, there is another div (id = "about") that follows up right after and surprisingly the div always comes right after even if the window size is changed.
From my understating, I thought that it was impossible to stack an "abosolute" or "fixed" positioned div right after another, they just become layered.
Is there a trick to achieving this type of effect?
right now I have a div in my website that looks like the following
The Html
<div id = "fill_screen">
</div>
<div id = "followup_div">
</div>
The CSS
#fill_screen {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#followup_div {
background-color: yellow;
height: 500px;
width: 100%;
}
Is there a way to make divs fit right under a absolute or fixed positioned div that is also filling up the window of the screen? That is dynamic to the web-browser size?
I did some research and there were techniques using viewports height (vh), but I saw that some old browsers were not compatible with it.
You have to modify the position of the followup_div. The followup_div uses absolute positioning and has to be moved 100% from the top.
HTML:
<div id = "fill_screen">
<button>text</button>
</div>
<div id = "followup_div">
</div>
CSS:
body {
margin:0px;
}
#fill_screen {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
right:0;
bottom:0;
background-color:red;
}
#followup_div {
background-color: yellow;
height: 500px;
width: 100%;
position:absolute;
top:100%;
}
DEMO
If you take a look at the top of id="intro" you can see class="intro-down". this anchor makes space for fixed div and if you remove it you can see that id "intro"(which is a fixed div) will be disappeared.
Related
I have a page like http://codepen.io/meek/pen/NNprYb
My problem is that the footer is not staying at the bottom of the page, only at the bottom of the first section.
HTML for footer:
<footer class="row-footer">
<div class="container">
<div class="row">
text
</div>
</div>
</footer>
and CSS:
footer {
width: 100%;
bottom: 0;
position: absolute;
height: 50px;
background-color: #ccc;
}
No matter what I try I can't get it to stay at the bottom. I'd like for it to be at the very end of the contact section.
clarification: I don't want it to be fixed, I just want it to be at the very bottom of the page.
Remove the height:100% from #content
Remove position:absolute from footer
Setting the height to 100% will only make it as tall as the windows/screen height. Removing it will make it "auto-expand".
Codepen Link
footer {
width: 100%;
bottom: 0;
position: fixed;
left: 0;
height: 50px;
background-color: #ccc;
}
OR
just do the following
Wrap the entire html inside a div lets call it wrapper
then
footer{
position: fixed;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
height: 50px;
background-color: #ccc;
}
This piece of code just calculates the top value of your footer div
Ok, using position: absolute; on footers is generally never a good idea since the footer no longer will move relative to the rest of the content on the site. I understand that you do not want to use position: fixed; since this will not give you the results you are looking for.
Your #content div currently has a constant height of 100% which will push the footer to somewhere in the middle of the content.
My solution would be to use a min-height: 100%; on the #content div and remove the position: absolute; (and bottom: 0;) from the footer.
Result: The content-divs' height will adapt to be more than 100% if more content is added. It will always be at least 100% and therefore the footer will always be pushed to the bottom of the page, even if the content only fills half the window size.
I have a WP blog with fluid layout, the main content is in a centered div, about 1000px wide.
Now I want to put an ad banner area on each side, and I want to use fixed on the position so that these ad:s stay when user scrolls down the blog.
I have seen blogs with similar ad's but they don't have the fluid layout but instead can use the position: fixed and width:Ypx left:-Ypx which make their ad fixed nicely on the left side always.
It seems that this is not possible though with a fluid layout?
This is the effect I am trying to mimic, see how both sides don't scroll down...
http://radarmagazine.se WRONG SITE
--- update ---------
I put the wrong sample site.. this is the one with fixed positions:
THIS IS THE SAMPLE SITE:
http://freshnet.com
This is possible without JS. Here's my approach.
Basically, you'd want to setup your containing div, then clone it and set it within a div dedicated to position: fixed; that way the cloned container within the fixed div will share the same styles as your actual containing div and scale accordingly.
<div class="ads"> <!-- Dedicated position: fixed; -->
<div class="wrap"> <!-- Cloned container for positioning of Ads -->
<img src="http://placehold.it/100x750&text=Ad1" />
<img src="http://placehold.it/100x750&text=Ad2" />
</div>
</div>
<div class="wrap"> <!-- Main container with a z-index of 1 -->
<img class="main" src="http://placehold.it/960x300" />
</div>
Once that's in place, you can position your "ads" accordingly within the fixed div, and position them outside of the responsive / fixed container so they adhere to it - giving the illusion that they're adhering to your actual wrapper. And after your max-width is reached the fixed ads will be pushed out of the viewport.
http://jsfiddle.net/m0v3vqcp/ - Fiddle
Full Screen /
With Their Ads
It's possible using some JavaScript, fetching the width of the content on the window.resize event and then updating your Ads position on the x-axis based on that value. I made a JSFiddle to illustrate how this could be achieved.
http://jsfiddle.net/r86r6j1f/
You can use padding on the body to make room for the banners, a quick example:
http://jsfiddle.net/dpcd3c1b/
I don't believe you need Javascript for it. You should be able to do it with a couple of relative positioned floats and positioned fixed.
http://jsfiddle.net/9ov32nkd/1/
body, html {
margin: 0;
padding: 0;
}
#wrapper {
min-width: 960px;
position: relative;
margin: 0 auto;
}
#inner {
position: absolute;
width: 960px;
left: 50%;
margin-left: -480px;
}
.content {
width: 720px;
padding: 20px;
background-color: #CCC;
margin: 0 auto;
float: left;
}
.banner {
width: 100px;
height: 100px;
position: relative;
}
.banner1 {
float: left;
}
.banner1 .inner,
.banner2 .inner {
background-color: #EFEFEF;
height: 300px;
width: 100px;
position: fixed;
top: 0;
}
.banner2 {
float: right;
}
I'm wondering if it's possible to position relative container with unknown height at the bottom left of a website so that any text in it starts at the bottom and goes up (as we add it)? It's like exact opposite of how browser usually renders it (from top to bottom, vertically).
Example:
<div class="container">Unknown amount of text</div>
.container { max-width: 600px; left: 100px; bottom: 100px; position: absolute; }
This works just fine but if Unknown amount of text is longer than height of user's monitor, vertical scrollbar does not appear. It requires position: relative; then but is there any way to make this container stick to the bottom left with position: relative;?
I'm looking for HTML/CSS solution only (if that's possible at all).
You can use an outer div to get some manipulation effect.
Give same bg color to both parent and child div then it give the bottom to top effect.
HTML
<div class="wrap">
<div class="container">Unknown amount of text</div>
</div>
CSS
html, body{height:100%}
.wrap{ background:green; overflow:auto; height:100%}
.container { max-width: 600px; background:green; position:absolute; bottom:0; }
DEMO
You can try this one i think this one help you
just changes in css. & in bottom you just increase margin top for set the bottom align.
.container { max-width: 600px; left:0; margin-top:200px; position: relative; }
I want to align a div to the bottom of the PAGE, not to the bottom of the screen. When I do this:
#contact-block{
position: absolute;
bottom: 0; left: 0;
}
, the div is placed in the bottom area of the screen. When my page is long, I have to scroll down and the div which should have been at the bottom, floats somewhere in the middle.
There might be a simple solution to this, but I'm just not seeing it.
Here's my HTML:
<div id="left">
<div id="submenu"> <span class="menutitle">Services</span>
<ul>
</ul>
</div>
<div id="contact-block">
<span class="contacttitle">Contact</span></div>
</div>
<div id="content">
</div>
I've also added a little image to illustrate what I mean:
The red div is the contact div.
Edit:
I've found a solution with jQuery and CSS. This might not be the best solution, but hey, it works.
jQuery:
var offset= $(document).height()-$("#contact-block").height()- $("#footer").height()-60;
$("#contact-block").css("top", offset);
$("#contact-block").css("left", $("#wrapper").position().left);
CSS:
#contact-block {
position : absolute;
width:216px;
height:100px;
background:url(../img/contact-bg.jpg) repeat-x #5c5c5c;
}
You could absolute-position the your divs in place. This technique requires a #wrapper element, which I'm not a fan of, but hey, you gotta do watcha gotta do.
In this example I removed the #left div entirely as it was only required for layout purposed and is no longer necessary.
HTML:
<div id="wrapper">
<div id="submenu">This is services</div>
<div id="contact-block">This is contact</div>
<div id="content">This is content</div>
</div>
CSS:
#wrapper {
position: relative;
width: 960px;
}
#submenu {
position: absolute;
left: 0;
top: 0;
width: 320px;
height: 320px;
}
#contact-block {
position: absolute;
left: 0;
bottom: 0;
width: 320px;
height: 160px;
}
#content {
position: relative;
left: 320px;
right: 0;
top: 0;
width: 640px;
height: 640px;
}
//#content position is relative for the #wrapper to stretch.
//The left property is equal to the width of the #submenu or #contact-block element
A good point of this technique is that it gives you cleaner HTML. I believe it will be easier to make a mobile version of your version if the need arise.
The jsfiddle
Additional thought:
The #wrapper element could easily be removed in favor of you body element, which is a great step towards semantic HTML. Check this out!
The position of your absolute positioned element depends on the first ancestor-element, which is not positioned static ( which is the default, so you have to explicitely set it to relative(or absolute) ).
So, make sure, your enclosing #left container has 100% document-heigth and position:relative, and everything is well.
I would suggest putting the red div inside the right long div and at the end of it. Then use position: relative and negative left margins on the red div to push it out to the left. This way, as your right div expands, your red div always stays at the bottom of it.
I'm designing a website which has fixed elements on the outer edges of a fixed-width layout. A div in the center is reserved for the content.
When the user scrolls, I want all of the content (besides said fixed outer navigation elements) to stay within the borders of that center element.
Here's a quick mockup of what I mean:
I could very easily set the overflow property of the center element to auto, and have everything remain inside. However, it's very important that a scroll bar not be present on the edge of that element.
Basically, I'm wondering how to either:
Restrict content to that area
(perhaps I could change the size and
positioning of the body element -- is
that allowed? -- and then position
the fixed elements outside of the
body.
Hide the scroll bar that appears
inside the div when using
overflow:auto
Any help would be greatly appreciated!
If possible, you should break your fixed position elements up into 4 separate sections (top, left, right and bottom). Then just make sure you pad you centre content area by their respective widths and heights so the content doesn't get overlapped:
HTML
<!-- 4 fixed position elements that will overlap your content -->
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="content">
<!-- Your content -->
</div>
CSS
html, body {
height: 100%;
}
#top, #left, #right, #bottom {
position: fixed;
left: 0;
top: 0;
z-index: 2;
background: red;
}
#top, #bottom {
width: 100%;
height: 20px;
}
#bottom {
top: auto;
bottom: 0;
}
#left, #right {
height: 100%;
width: 20px;
}
#right {
left: auto;
right: 0;
}
#content {
position: relative;
z-index: 1;
padding: 25px; /* prevent content from being overlapped */
}
You can see it in action here.
Also note the position: relative on the content area. This is so z-index works correctly and the content is displayed below the fixed sections.
If you care about IE6/7 support, you'll need to add a CSS expression fix to get fixed position working properly in those awesome browsers.