I'm trying to align a graphic which overlaps the main page element and pad elements. How
to do this? I have a blue circle button (click here) that I want placed in the following picture location on the page.
css:
If you want to place an element above all other elements at a specific position, you should move it out of all the other elements so it is a direct child of <body>. If you place it directly before the closing </body> tag, then it should be the topmost element if you're not using the z-index css-property anywhere. If you do so, apply it to your blue circle as well.
Then to place it to a specific location, use the following CSS:
#blue_circle {
position: absolute;
top: [whatever you want]px;
left: [whatever you want]px;
}
of course you can also use relative positioning (% instead of px) to set the position of your element.
Related
I have a <button> with 3 spans in it - each span containing different text. At different times, triggered by Javascript, the class of the button will change. Using CSS transitions & transform, I have one span moving out of the button, and another moving in. That all works.
The problem is that the button has grown to the full width of span 1 + span 2 + span 3. I want the width to be simply large enough to contain the largest of the spans. If all the spans could be placed one on top of the other, this would work.
I can't figure out how to get the 3 spans to sit one on top of the other.
Here's a fiddle showing the problem: http://jsfiddle.net/V9yTs/ (Click the button to see the change)
Edit Here's the final, working fiddle: http://jsfiddle.net/XW3DY/7/
A solution for layering your spans on top of each other would be to use position: relative; (which I see you already have there) and then modify the top margin of spans 2 and 3 so that they move up to the same position as the span 1.
Here's an updated version of your JSFiddle: http://jsfiddle.net/XW3DY/2/
(Please note that floated elements cannot be placed on top of each other. This is why relative positioning is generally used for placing elements of top of one another.)
Since you already use jQuery, you can just calculate the proper width and height
var w = 0;
$('.btn .msg').each(function () {
w = Math.max(w, $(this).width());
});
$('.btn').width(w);
var h = 0;
$('.btn .msg').each(function () {
h = Math.max(h, $(this).height());
});
$('.btn').height(h);
But now the .msg spans are arranged vertically. To compensate for that, depends on what you what to achieve. One solution is to use position: absolute
.btn {
position: relative;
}
.btn-status .msg {
position: absolute;
}
The .msg spans are now lying on top of each other. You must also adjust the vertical transformation.
See modified JSFiddle
I am using iframe to display pdf(asp.net mvc3).While PDF is in the iframe menu item is not visible ,means it is hiding behind the iframe.
Can anyone let me know how to aolve this.
Thanks in advance.
Your question is very bare-bones, please elaborate.
However, here is a solution:
Use z-index in CSS.
Give the iFrame an ID, like so:
<iframe id="pdf-display"></iframe>
Also give the menu item an ID in a similar fashion, for example id="menu-item". If you have multiple other menu items, contain them in a <div> and give the div an ID.
Then, in a separate stylesheet or in <style> tags, enter this code:
iframe#pdf-display {
position: relative;
z-index: 9;
}
#menu-item {
position: relative;
z-index: 10;
}
By increase the z-index by one for the menu item, it places the element "above" the iFrame, so to speak. The higher the z-index, the closer to the 'front' the element is.
Actually the valid solution to all iframe issues where parent frame content is hiding behind child iframe content is to use absolute positioning on the element you want to show above the iframe.
You can use relative positioned parent element with absolute position child elements for menus, popovers and what ever you wish. This is a catch all solution for any type of iframe or window elements.
The problem I'm having is I have two divs at the top of my page, one contains a repeating blue background, the other contains a background image.
I have to set the height of both divs in order for them to expand vertically, the don't expand with the content. I have that form on the right hand side set to overflow. Which I believe is what's causing the problem.
I have tried not having the height css in the code, but it still won't expand vertically.
In order to get the backgrounds to even show up I have to manually set the height.
This is the page: http://www.repipespecialists.com/landing/google/repiping.html
This is the CSS code:
#top_container {
width:100%;
height:1040px;
background-image:url(../images/top_bg_repeat.jpg);
background-repeat:repeat-x;
background-color:#83b4e9;
}
#top_header {
width:1200px;
height:1040px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-color:#83b4e9;
margin: 0 auto;
}
I agree with WDan in that the issue you are having is due to your use of float: left and float: right on the left_content and right_content div elements.
When you use float on an element, you are basically removing it from the normal flow of the document. By default, elements will appear on the page in whatever order you specify in the markup. Using float (or things like position: absolute) will remove the element from this "order", or "document flow", such that the floated element will be ignored when placing other elements in their default position on the page.
Since the space used by these floated elements are ignored, the top_header div does not take the floated element's size into account when determining its own size. This is why your div is not automatically expanding.
Another alternative to float is to use display: inline-block. Here are some links you can read to learn more about the differences:
http://www.ternstyle.us/blog/float-vs-inline-block
http://www.onderhond.com/blog/work/inline-block-vs-float/
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I think the problem is you use float in 'left_content' and 'right_content'
Use “overflow: hidden” in the wrapper div.
I have a 3 elements stacked on top of each other. The top element is the overlay content. The second element is a background border image. The bottom element is a background.
What I want to do is hollow out the middle element, so that I can see through the top element into the bottom element, but leave the border of the middle element surrounding the top element.
http://jsbin.com/unimux/4/edit
As you can see the middle element is blocking the view to the bottom element.
Edit: I did try using border-image but it wouldn't render correctly for me with border-radius.
Edit2: is it possible to get the desired effect with border-image? Kudos to anyone who can make it look not terrible with border-image.
Edit3: Some progress based on Zuul's answer:
http://jsbin.com/unimux/15/edit
Setup a new element, with a class, e.g., .apple and place it over all other existent elements with the same image as the bottom one:
See your JS Bin Example Altered!
div.apple {
margin: 100px;
width: 200px;
height: 200px;
background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center;
}
Having the image centred and by give a correct margin value, it simulates the "hollow" effect at the div.middle.
See the result preview:
If the elements dimensions aren't the same, the use of CSS position helps keepping everything into the proper place:
An example here!
You can't really do that with the current state of CSS. Maybe just put the bottom element on top of the middle one, and work?
As per egasimus, you can't really do that with CSS.
Try something like this though, with four divs creating the 'window'.
I am creating a span in javascript to append to a td. Works great. However, for some reason when I call
document.getElementById("myTd").appendChild(thisNewSpanObject);
the new span seems to think it is a child of the window. So when I set the attribute of
top:-10px;
the span is actually off the page, yet aligned horizontally with where it should be, when in reality, I just want it to display 10 pixels above where it would load if it did not have the css property assigned to it. Should I be using something other than top here? If I don't use top then the span loads right in place, 10 pixels too low (position:absolute; is set).
Add position: relative to the span element.
You are currently using position: absolute, meaning it will be relative to its nearest ancestor with something besides position: static (the default for elements) or the document.
Add position: relative to the element with ID myTd, not the span.