I'm trying to disable some portions of my html pages.
I read that you can use a transparent div with absolute position on top of your page to prevent clicking on elements beyond it, but is there a way to accomplish this only on a portion of a page (let's assume this portion is all contained in a div) without the use of absolute position?
Put position: relative on the div you want to disable, then add the transparent blocking div as a child of this div with position: absolute and top, bottom, left, right equal to 0.
If you are unable to put position: relative on the div you want to disable then it will be a bit more difficult as you need to compute it's dimensions and offset and then position the transparent mask as a child of the body and at the exact same position as the element you need to disable. JS frameworks (as jQuery) usually provide you with ways to determine a box's offset relative to the document.
Make a little 1px x 1px transparent image and save it as a .png file.
In the CSS for your DIV, use this code
background:transparent url('/images/transparent-bg.png') repeat center top;
Remember to change the file path to your transperant image.
I think this solution works in all browsers, maybe except for IE 6, but I haven't tested it.
Related
I don't have an idea even where to start. Like on the attached image I want to make a centered div (yellow rectangle) and two img elements that, regardless of the resolution (black rectangle), are pointing to the specific area of this div (red arrows).
You can use position: relative for the specific element (that you want to point at),
put the arrows (their html code) inside of the elemnt (that you want to point at) and then you can use position: absolute; with top, left, right, bottom properties to position the arrows relatively to the center point.
Jsfiddle
So as seen in the Jsfiddle (You may need to hold ctrl + a) I'm trying to achieve having the div on top of the image, but I tried using a z-index for both the div and the image, and even put the image in a div by itself, but it still hasn't worked.
I was wondering if this is possible in CSS.
The reason is that by default elements are positions statically which means that z-indexes do not apply. Change to a different position such as relative or absolute will make z-index apply.
https://developer.mozilla.org/en/docs/Web/CSS/position#Values
The form at the top of this page: http://kgshowroom.com/test/builder-test.html is supposed to go under title "Testing the Builder Thing" but no matter where I put the "header" "div" or "article" tags around the iframe for the form, it doesn't budge. I tried looking into the css for it, but I must be missing something. And I know it's gotta be a simple something!
Any ideas?
You have the CSS value position: absolute; set on the form's parent iframe. That removes it from the normal document flow, which prevents it from affecting the positions of any sibling elements (i.e. it overlaps them instead of pushing them out of the way). It also makes the browser calculate the iframe's position relative to its containing block rather than its sibling elements (though only if used in conjunction with the top, right, bottom, or left properties). That, together with the CSS value, top: 0;, is why the iframe is stuck at the top of the page.
Changing the position value to relative will fix the problem. Deleting the top, right, bottom, and left properties might also work, but I'd try the relative positioning first. Look here for more info on CSS positioning.
Moving the <div id="FormLoginPage"> after the iframe seems to do the job with me in the DOM.
I have two elements (images)
imgA is 2000px high
imgB is 1000px high
I place them one after the other and then move imgB up (I use relative positioning) to overlap the imgA.
Thus, the window in the browser should be 2000px high.
However, it seems, that when placing imgA and then imgB, the browser allocates the place for both of them i.e. 3000px hig, and after I move imgB up to overlap imgA, I have a blank space =1000px left at the bottom of the page.
How can this blank space be prevented?
Thanks
Ignore this
This is because the images are block level elements. To stop the
browser from allocating space you can just add: display:inline-block
to the second image. This will bring the image out of block structure
and so the browser will not allocate it whitespace.
Also have a look at Relatively Absolute positioning, it is very handy for the sort of thing you are doing.
EDITED
As commented below, this does not work. Use instead the Relatively Absolute positioning.
Here is a jsFiddle that shows the code needed to position an image over another
Use display: block on your images, then use position: absolute instead of position: relative to position imgB over imgA.
Don't forget to assign the parent element to anything other than position: static to make the positioning of your image relative to the parent element.
for further clarification you can see the examples of "css block" here
http://www.tutorialswire.com/css/css-display
Absolute positioning is only a specific solution to your case. It may not work in some similar case (For example if you have other elements on top of those two images inside the general containing div).
I believe best solution would be using
margin-top: -1000px;
for the second image.
So, I have a layout where I have a repeating transparent shadow element set to the background of my parent container element. Set atop this, and supposedly hovering over the topmost edge of this background, is supposed to be an image with a frame and drop shadow.
However, because the image frame continues the parent element, the background image also continues upward. This is visible as the vertical lines above the top edge of the frame's drop shadow. See screenshot below:
This happens regardless if I use a transparent image or CSS3's box-shadow property. Setting negative margins doesn't work to bring it out of the parent element, nor does setting positioning as relative or absolute.
Normally I'd try to "fake" the transparency effect by setting a solid image at the top edge of the image frame, but there's a repeating stucco pattern set as the body background, which means there'd be a visible, unnatural-looking edge. (Insert cursing re: repeating patterns here.)
Any suggestions how I could prevent a parent element's background from showing through a child element, or offsetting the image frame somehow?
Many thanks!
I figured it out.
I was modifying the WordPress TwentyEleven theme, which has #primary and #secondary divs as floats atop the main content div. In order to make the background extend all the way to the bottom of the content div (I.e., past the two floats), I had overflow: set to auto.
Since I don't need to float anything (It's one column with no sidebar now), I removed both floats and removed the overflow declaration I had. Tah-dah, totally works now.
If someone else finds him/herself in this issue, have a look at my jsFiddle, which I used to figure it out. Thanks to Paker for the suggestion.