I have a header with an image which should be fixed while scrolling. Underneath I have a container, which should always have the same distance to the header. So if I resize my window horizontal, the image resizes and therefor the content changes the position.
Example:
I set the wrapper to position:fixed; and the container to position:relative;. If you resize the window, it works perfect.. the container stays in the same distance to the picture.. BUT.. I can't scroll anymore and therefore I can't see the content anymore. :-(
I have no idea how to use JS, so maybe someone could give me a hint
Live Link
Any element that's fixed, has all of its children fixed as well. So anything in your wrapper will be locked, which is why you aren't able to scroll. If you remove fixed from the wrapper element, then your nav is still fixed and the body scrolls properly. From there, a little trick I like to use is something like this...
<figure class="image_container" style="background:url(files/Header/Haus_Sommer.jpg) no-repeat bottom center fixed;background-size:cover;">
<img src="files/Header/Haus_Sommer.jpg" width="1460" height="1000" alt="" style="opacity: 0;">
</figure>
That way, you can use background-attachment:fixed for the header image, and still get the scaling from the image tag itself, since it's just got the opacity set to 0 but is still present.
Related
I have placed an AP Div on my page that holds an iframe. I used position: relative so that the AP Div would not move with the image behind it. Once I added the AP Div with the css property Position: Relative it stays exactly where I want it , however it pushed the image further down. i need the main image to be aligned to top. If you look at the other pages you will see how they are all aligned at top. Is there a solution for this? I am not a css expert so I would be very appreciative of any help given. thanks!
my link is:
http://www.mylittleovertures.com/continue.html
thanks!
The basic problem is that div and iframe are block elements on the same level. Setting the iframe positioning to relative doesn't help. Instead, you should wrap image and iframe into a container DIV, set this DIV to position:relative and then absolutely position the iframe on that DIV. You could even drop the extra img tag and set the image as the background of the container DIV. You could also get of the <center> by setting the container DIV's margin to 0 auto
Here's an example: http://jsfiddle.net/99wCg/3/
I'm trying to add some decorative flourishes on a page footer with :after pseudo-element.
The problem is that depending on my css code the decorative flourish element(fixed size, uses background image) either gets clipped by the footer or ends up extending the page height and adds vertical scroll bars.
What I need is the decorative element to start at the footer top border(in other words where the page content ends) and clip at page bottom(or if screen space allows, don't clip at all).
I'm able to provide a link to the code later if my question isn't clear enough.
EDIT: In other words, I'd like to know if there is any sane way to prevent vertical scrollbars from appearing when the bottom edge of a specific absolutely positioned element goes over the page bottom.
EDIT2: The site is currently available at http://www.ikimark.fi/ikimark_uusi/site
The decoration in question is the right bottom corner flourish image. I'm editing the site today so the code may change.
Please provide a link to your project and try using position:absolute;z-index:9999;
EDIT:
well I'm still confused about exactly what you are asking for. If you want flourish image not to cover too much space below the contents and fill up the total height of the footer only then please add overflow: hidden; at your wrap div. And if you don't want this then please can you explain?
Try setting an absolute height on the bottom div with overflow-y: hidden as follows:
<div id="footer" style="height: 4em; overflow-y: hidden"></div>
I have code like this:
<div id="container">
<div id="has-100-percent-height">
This div is positioned absolutely and display is none.
Overflow auto, too. There are many of these divs within "container"
</div>
</div>
<div id="the-div-below">
stuff
</div>
When a user clicks a certain link, the "100 percent height" div is to slide down using. What's been happening is that it does slide down, but it doesn't push the div-below down. You can see the content merely display above "the-div-below" and after it slides down, it quickly disappears.
Anyone know what could be going on? This is in firefox 4. I haven't tested other browsers
Thanks for the help!
Is the CSS for your HTML already set in stone? As others have said an absolutely positioned element is outside of normal flow therefore cannot affect the position of any other element. If you can remove the position:absolute from the #inner then the solution is very simple (and just normal browser re-flowing) - see this demo.
However if you need to keep the absolute positioning you will have to push #below down manually, i.e. JavaScript - see this demo.
Hope it helps.
The reason "the-div-below" is not pushed down is that things that are absolutely positioned don't affect layout of anything else on the page. That's the whole point of absolute positioning.
So to make things work as you want you need to position your "100 percent height" div either statically or relatively.
The remaining question is how to achieve the layout you want, since presumably there's a reason that you were using absolute positioning?
You could add a padding/margin top to the #the-div-below that is equal with the 100% height element.
I have...
<div id="tabs">
<!-- ... -->
<div id="interior-photo">
<img src="...">
</div>
<!-- ... -->
</div>
... and ...
#interior-photo { overflow-x: auto; }
Basically, I have a page broken down into a main section and a fixed-width right sidebar. Within the main section, I have my tabbed div. The entire page grows with the width of the window, so when the window is resized, the tabbed div grows horizontally in size too.
My problem is that the image that I'm loading inside one of the tabbed divs is generally much, much wider than the window usually is (they're panorama pictures; very lengthy horizontally, but not much vertically).
I know that I can force the contents of #interior-photo to scroll horizontally using the CSS rule above, but that only seems to work when that same div has a fixed width. Since I want that div to have a variable width, it always seems to display the full width of the image, pushing my layout way out of whack.
I know how to fix this using Javascript, but I was wondering if anyone has a CSS-only solution. If you need more information about my layout to solve this issue, please let me know. Thanks!
Unless your target div is constrained either by a fixed width style or by a container with a fixed width or whose ancestors include a fixed width, you won't be able to get your target div to acquire scrollbars. It will just go as wide as its contents, and the browser scrollbars will take over.
Actually, there is a way around this. You can specify to display the image with scrollbars, and thus confine the viewable portion to the size of the div. Basically, the image will expand to the size of the div, and then have a horizontal scrollbar if the horizontal image size exceeds the horizontal size of the div. Scrollbars will not be displayed if the image's vertical component exceeds the div's. You can set both the x and y to scroll on overflow with the overflow declaration. However, in order to use any of these, the div's size must be controlled through some means, even through the initial declaration.
#interior-photo { overflow-x: scroll; }
I have this site where I need to place two images at the top of the page on each side of the content. Temporarily it can be reached [removed].
If your resolution is wide enough you can see both right and left red Christmas decorations are aligned to the main content. However the right ones are not taken out of the page flow and create a horizontal scrollbar if the browser is smaller than ~1300px across.
I achieved the two ornaments by placing two absolutely positioned divs with backgrounds into a relatively positioned div:
<div id="alignment"> <!-- position:relative -->
<div></div> <!-- first image: position:absolute;right:-210px -->
<div></div> <!-- second one: position:absolute;right:915px -->
</div>
Although absolutely positioned elements should be taken out of the document flow, the second image isn't :( Thus, the bottom scrollbar appears.
What I tried:
making an image of both ornaments with 910px (the width of the content) of empty space apart and using only one absolute div instead of two: same issue
adding the aforementioned image to be the no-repeat top center background of <html> which resulted in only one background showing. Either I have the snowflakes on the body bg or the red ornaments over a solid white background. The latter depends on which of the two (body or html) elements have which image as the background.
placing image divs in an absolute div and making the two relative (opposite of current situation) - same issue AND does not display on <IE8
I know and am sorry for this is a big issue and hard to understand. I researched a lot and am out of ideas. Any possible solution to try out would be greatly appreciated. Also, I realize the coding of the site i linked to is on the verge of terrible, but I have just started working on it, so no comments on that, please :)
The solution in the end was to create a div that opens right after body and encases all content, closing right before body does. The style of the div:
background: url('/client/images/xmas-burbulai.png') no-repeat top center;
The png itself is the two decorations I wanted to be on each side of the body. Both pictures were pasted into one with a 910px empty gap between - the exact width of the body.
No scrollbar, crossbrowser, stylish.
try setting this div (#alignmen) with:
overflow: hidden;
Update:
<div id="main"> //Position this relatively
<div> //Positon this absolutely, this height should be the max of the two floated divs
//In here
<div>Left</div>//Float Left
<div>Right</div>//Float Right
</div>
<div>