I'm trying to adapt following style on a div (filled with content) on my site. The problem is, that as the content gets bigger (long texts, many pictures, etc) -and as a result, the div gets longer- at some point that happens: link (scroll to the bottom).
If I change the top-attribute of the :after & :before to top:99%, that problem disappears at the very long divs, but at the same time, the shadow disappears at relatively short div's.
I don't really hav an idea how to solve this. Maybe you know a fix or workaround.
Regards
Why use top property? Just remove it and add height to it. For example,
height:100px or height:5%
Demonstration
Related
I'm finishing this website page, http://www.goldhairmoveis.com.br/bancos
But somehow the product alignment is broken.
All the configuration is the same for all divs and only this is broken.
The problem is that one of the images (cadeiraopop.jpg) is 1px bigger than the rest.
The reason this is a problem, is the bootstrap alignment is done using css floats. So what is happening is the element starts and the oneside of the page and floats in the direction that you have specified (in this case, starts right, floats left). It continues to float until it hits something and then it stops. There for, you will need to ensure all images are the same height (preferably the same width as well.)
You can do this by manually editing the image size, or just use a css height attribute.
I have two questions:
1) I have a div with an image that I use for my footer, but I when I resize the page the footer text gets all "mushed" together. Is there any way I can get the text to stay in a certain position and resize with the page?
2) I use a div for the body of the page, but when I try to add text and align it in position it moves the entire div. How can I get the div (which is just background color) to stay in place while I move the text around?
Here is the site and code on jsfiddle: http://jsfiddle.net/HzwV9/embedded/result/
Thanks.
Had a fiddle with your fiddle, here's a result that may help you: http://jsfiddle.net/HzwV9/4/
Some things I noticed:
A few of your HTML tags aren't closed (that's asking for trouble).
No need to use <h1> for your lower links; it's a block element, not an inline element, and also you'll need <a> to make a link later anyway
You can simplify the big list of tags at the beginning by just using * - all!
Hope this helps. Also, footers are notoriously difficult, since CSS doesn't do vertical sizing very well...there's a few solutions out there but they all have something wrong, up to you what you want to be wrong :)
This is my problem:
http://jsfiddle.net/pbgLc/
I need the background image (with url) to be placed at the top left position of the image, and want the text to be moved next to the background image.
As you've probably noticed I'm using two backgrounds, so its probably not possible to use just one div, right?
Have you guys any solutions for that?
I don't know if this is exactly what you are looking for, but you can have 2 background elements at the same time, as long as they don't conflict each other. http://jsfiddle.net/pbgLc/5/
Maybe this can help a little? CSS background-position Property
If you want the image and the text next to each other, why don't you put them litterly next to each other?
2 divs inside 1 div
Or am I misunderstanding you?
here is the layout
http://timsegreto.com/cssmock/mock.html
i need the background image to scroll concordant with the text block in the right column.
ive tried many different ways with no success.
any ideas would greatly appreciated.
not sure if its possible or what t research to make it work.
thanks!
It seems to me that you have fixed positioning on the wrong element. Try making #framecontent position fixed and remove it from #maincontent.
EDIT It's 'quirks' mode that's causing you IE issues. Get rid of the:
<!--Force IE6 into quirks mode with this comment tag-->
from the beginning of your html. I'm sure this is supposed to be solving other cross-browser issues but it's ruining fixed positioning.
Have you adding an extra div and setting the background image on that instead of on the body? You could absolutely position this extra div in the body with top: 0 - it would scroll with the page then...
not sure if thats what you're looking for exactly...
I'm working on an application with a map and there is a div in the corner with some stuff in it. You can click on this map to bring up some information in a little window. The window is, in some cases, being covered by the div in the corner.
I want the opposite effect (window covers div). I figured this would simply be a z-index issue but I'm unable to get it to work. This is with IE7 and from reading up a bit it seems like z-index won't work unless it's inside of an element that is positioned.
The elements seem to be positioned properly to get the z-index to work right but I'm having little luck. I've played around with adding styling via Firebug but haven't had any luck in getting anything to change. The window really is just two divs one absolutely positioned one and a relative one inside of it.
Is the z-index the only thing that could be the problem here or is there something else I don't know about?
Are there any other methods to achieve the effect I want? I cannot simply hide the div via jquery or something because part of it should be visible from behind the window that opens on the map.
You are hitting the stacking context bug
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
Every positioned div in IE will create a new stacking context and prevent z-index from diferent stacking contexts to come on top of others.
The solution is to have the window you want on top up in the tree (into the body for example) and z-index value grater than z-index of all parents of the other div covering your window.
Extensive information to understand the problem here:
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
positioning and negative margins is the only way to get elements to overlap that i know of. z-index is just used to explicitly tell the browser how to layer the elements.
as to your problem, IE requires the container elements and/or elements that you are overlapping to have position:relative; or position:absolute; for z-index to work properly. When someone say positioning they're usually implying having the position property set in CSS. Also when working with z-index make sure that the overlapping elementa are at the same level with each other.
Hope this helps
Quite simply, the order of the elements in your HTML file will determine stacking order. If you want an element to be above another then make sure it comes later in the HTML.
You can only swap the stacking order on elements that are all in the same containing element. For example if you have two divs and they both contain 3 images you cannot make images from the second div go below images from the first div.
You need to plan your HTML ahead if you need complex stacking orders.
As hinted by the other answers, position:relative and position:absolute reset the "stacking-context" in IE.
If you want a lazier answer you could use javascript and hide the div when you click on the map, and show it when you close the map.
You will have to do this with any selects on the page anyway because in ie they don't work with z-index.
I ran into this same issue a couple days ago and found the negative margin as suggested by Darko Z worked great. (My rep isn't good enough yet to vote for Darko)
I wrote a quick post on it.
http://www.swards.net/2009/03/layering-html-elements-without-using.html