This is my HTML structure for my site
<body>
<div id="container">
::before
<header></header>
<article></article>
<article></article>
<article></article>
<article></article>
<footer></footer>
</div>
</body>
The header is normally position:fixed but on short viewports it's static so it scrolls out of view as normal.
#container::before has my site's photo background, position:fixed, so that it remains in place while the glass-effect opacity:.9 <article>s scroll over it. It's maybe a bit old-school, but it's a pleasing effect that I like and want to keep.
It's important to me though, that the background photo starts immediately below <header>, without any of it being cropped off underneath that element. This is easy enough by modifying the top rule of that pseudo-element to match the (set) height value of the <header>.
...right up until the point where the position:static <header> scrolls off the page on a short viewport.
What I want to happen
I'd like for the background to scroll up along with the <header>, up until the point that the <header> is off the screen, and for it to then stick in place, as if it had position:fixed;top:0.
What's my best option so far?
top:0 on the pseudoelement background if the <header> isn't fixed. It works once the header is off the top of the screen, but it means an important part of the photo is cropped off when the header is on screen.
I could fix this with a JavaScript on-scroll event, but I know that'll be jerky and unperformant. Is there some CSS trickery I can pull with my current HTML setup to overcome this? Even if it's only supported in some browsers, it'd be better than nothing.
Related
I'd be glad if you could help me with some positioning. Here is the website.
Problem is my footer. I can't make it show always below container (if text container goes below img). If text is short enough to not go below img its ok. I tried many solutions, but non of them seemed to work for me. Solution to this could be making slider div with background, but I can't use it because I want it to fit the screen (so I need to use <img> inside it.) Any help would be much appreciated. Long story short:
<div id="container">
<div class="slider"><img with background</div>
<div id="page absolute div">
content
</div>
</div>
<div id="footer"></div>
Another solution could be stretching "container" height when "page" div keeps getting bigger, but its not possible (from what I know) because its position is absolute.
[EDITED]
www[dot]fami[dot]nazwa.pl/cc/apro/wp-content/themes/apro/style.css
div id dol is footer
how website looks to me: http://i.stack.imgur.com/yjY2a.png
i want footer (div id dol) to be below that absolute div with content
I see nothing wrong with your page, so I don’t understand what you are trying to do. However, have you considered using floats and clearing with your footer?
using firefox to see the code and css, I can't find a 'footer'....?
I added two divs to hold background images for decorative purposes - as requested by the artist whom is working with me on a website.
At first, it worked very well. The images were supposed to show on each side of the wrapper div holding the website content - without affecting page width.
Then the organization owning the website got another sponsor, who's logo I had to add to a column on the right. I created a new id for the 5th "button" and created a div for it. Uploading it, I noticed that a scroll bar had suddenly appeared on the bottom of the page, for no apparent reason.
I first suspected the button to be the problem, but eventually found out that the right-most decorative div was bending the page width, despite using absolute positioning. Both of the divs use the same code, only mirrored for left and right. I have no idea what is causing the problem..
(You can see the problem in action while it lasts at www.torucon.no/no/)
Please help me out! Here is the CSS for both of the divs:
#wolf
{
position:absolute;
min-height:500px;
min-width:498px;
left:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/wolf.png');
z-index:-1;
}
#lion
{
position:absolute;
min-height:500px;
min-width:498px;
right:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/lion.png');
z-index:-1;
}
Here is an HTML snippet showing the HTML of the divs:
<div class="wrapper"> <!-- Contains the entire website for structure -->
<div id="wolf">
</div>
<div id="lion">
</div>
((In case you didn't get it: The wrapper div is supposed to be centered, and it is. But when I resize my window, I find that a scroll bar appears long before the wrapper content is even close to the browser window borders. That would be annoying on computers with low resolution or small screens!))
I think what you want is to have the lion and wolf progressively appearing as the user widens the browser viewport, but otherwise partially hidden off to the sides of the wrapper. Correct?
I think you're only safe option to achieve this without triggering the scrollbars you don't like are to combine the images into one and attach them as the background image on the body element of the page.
I believe you're right about using overflow-hidden on the body -- you'd loose the ability to scroll to see overflowed content if the viewport is resized down below the wrapper's width.
I have checked that you posted link http://www.torucon.no/no/ but i coudnt see bottom scroll bar ,
Anyway , Why you cant set background?
<body>
<div class="overlay">
<div class="wrapper">
</div>
</div>
</body>
<style>
body{width:100%; background:---;}
.overlay{width:100%; background:---;}
<style>
I'm having an issue with a last minute change request, basically client decided to change the footer color and I cannot find a viable solution expand it on the hole site when displaying on big screens and do not cut the color and back to the body color.
Website
I thought doing something adding the push class, however I breaks with the responsiveness of the site, I would appreciate any advice on this. I'm looking to NOT change the html or body color to white, I would like to make it work as it is.
Thank in advanced.
The site looks pretty good.
Unfortunately I don't think you can change the footer background color, and everything below it, without having to change the body color, you can easy get a work around by just adding a wrapper that starts before the header TAG and ends before the Footer tag.
<div id="wrapper">
<header>...</header>
....
</div>
<footer>...</footer>
I know this is want you want to avoid, but I don't think that there's any "better" solution, any other solution will imply Javascript to make the footer grow and it is not nice :P
Good luck
So basically your goal is to make sure that the entire footer area (from the top of the footer to the bottom of the window) is white?
If that's what you're going for, then I'm afraid that changing <body> is really your best bet (you should always assume that <body> will be dictating the footer background).
What you need to do is wrap everything above the footer in a container div, and then switch your body styling over to the container. The good news is that, depending on how your site is templated, this should just be a matter of tweaking one or two layout files.
The end result is that the background of <body> gives the illusion that the footer extends to the bottom of the window.
Like so...
<body>
<div id="container">
<!-- all your stuff -->
</div><!-- #container -->
<footer>
<!--footer stuff-->
</footer>
</body>
what I'm trying to do is something like this:
<body>
<div id="content" style="position:relative;">
...some content here...
THE END
<div class="red_square" style="position:absolute;right:0;bottom:-90px;height:90px;width:90px;background-color:red;"></div>
</div>
</body>
but that obviously just shows the red square at bottom. What I want is the page to stop at "THE END" if it's long enough (that is, whith scroll bars), and show the red div only for pages with little content (without scroll bars). I can do it with javascript but I was wondering if there is a pure CSS (2 or 3) solution for the most recent browsers.
Not sure if i get what your trying, perdon if in wrong.
There is max-height and min-height in the recent browsers, thats prolly help you
ok this header image is driving me crazy-- ive cleaned up the divs and edited the css - before i learn positioning etc, id love to see a quick fix that just puts that image down at the bottom of the page
sorry, the question was in the title-- im trying to get the footer not to float on top of the page but ive gotten some responses about absolute positioning so ill try and work on that myself, additional answers still appreciated, thanks
http://we-live.in/the_sierra
<div style="text-align:center;">
<div id="footernav">
Home
About Us
Contact Us
</div>
Your main content div appears to be the div with the id "to_div". Your footer floats to the top because you've used position:absolute on to_div which takes it out of the flow. Either absolutely position your div on the bottom or stop using absolutely positioning. I recommend the latter.
That happens because you have set up to absolute the position of each div (to_text, nav_deals, etc.) but the div that contains the footer is rendered as a normal div element (because its position is not absolute)!
I suggest to redo this simple layout without the absolute positioning! Or you can solve by setting to absolute even the position of the last div!
The problem is that you are using absolutes. Absolutes do not affect the flow (in other words for the positioning of other elements it's as if they don't exist).
Do something like this (I've put the css as text)
<div id="wrapper">
<div id = "main">
<div id="to">FLOAT:LEFT</div>
<div id="from">FLOAT:RIGHT</div>
<p class="extro">CLEAR:BOTH</p>
</div>
<div id="footer"></div>
</div>