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/
Related
I'm trying to edit a tumblr theme to make my posts centered inside of an image (the image is in a div) I've tried giving the posts and div the same margin in CSS but I can't seem to get the image inside the div to center correctly on the page. I want the posts to be perfectly centered horizontally inside the image even when the browser window is resized. Anybody know how i can do this? Is there an easier way than having the image in a div? here is a link to my code
http://pastebin.com/x6MP6EYQ
First of all i would recommend using image as a background image. Would be easy to handle it as it will not affect other things inside a div.
Second, if you were to use image you would position it absolutely which mean main div should be positioned relatively. Then once image has been positioned i.e. top:0; left:0; put z-index:-100; so that way it will be always behind.
To make div always be centered both horizontally, vertically and in both directions. See my example. Here:
http://jsfiddle.net/techsin/TfLTR/
try style=aligen:center;
just you can manage by style sheet tag like padding and margin also .
I've searched everywhere, and I just can't find out the answer to this.
So I have a DIV in my style sheet, that is positioned absolute and with a background image.
Inside that DIV, I have an that I want to appear UNDER the DIV background.
I've tried z-index but it dosn't seem to work!? Is it something to to with the absolute position on my DIV?
Put the image div before the your absolute positioned one. That should put it under the other div. You could also
position: absolute
the image, but still put it before the div.
Whatever you do, you CANNOT make child elements appear BELOW their parent's background (see about stacking contexts for more info.) You need to modify your DOM so that the second element is taken outside of the DIV having a background to be shown in front of that element.
position:absolute is in a screen context. To use position:absolute inside a div context, make the parent div as position:relative, so, his child with p:absolute will consider the top of his parent as orign.
Make sure that your background image is either a .PNG and or a .GIF File Format. Both of these file types support transparency.
I am getting an error when trying to send a div to the very end of my site.
I am using a general height:100% and the div then moves to the end of the visible screen, but when I scrolls down to the end of the site, the div remain in the same position.
I want to add the div to the end, but for some reason I couln't do it.
Look at the pic.
My code: http://www.securebitcr.com/test/site2.php
I appreciate any kind of help with it.
Thanks,
Your #footer_dv has position: absolute but you want it to have position: fixed. An absolute position is relative to the parent so an absolutely positioned element will move and scroll with its parent; a fixed position is relative to the browser viewport so it won't move.
just remove the position:absolute all together and fix your height style of your body, you have 100%px; make it 100%; and your footer should just float to the bottom.
I have one div with position:fixed 0; that stays on the top of the browser window even when I scroll down.
The problem is the adsense banners (iframes) that are out of the fixed div (thus in the main site's content div that should appear under), when I scroll down, they go OVER the fixed div and not below it.
I tried to apply a clear: both and z-index to both elements but nothing changed.
Can't iframe not go below fixed elements?
thank you
You need to have proper positioning for z-index to work. Makes sure the iframe container is position:relative or position:absolute
Hi I have a simple sidebar inside a div which has height:100% and I need the sidebar to float as high as the container becomes. Since I have a content div, and the content div will change on each page, it's inside this parent div which ideally should change in height and thus the sidebar would run the entire height of this parent div.
http://mibsoftware.us/clients/weber/?page_id=2
However in the above link I'm unable to get that to work. What am I doing wrong here? Any help would be greatly appreciated!
See:
Equal Height Columns with Cross-Browser CSS
Get it to float BELOW the bottom of that div (possibly in a simillar div), and then set it's position to relative and top: -height_of_div px.