left:50% element not appearing in middle of page - html

I have an absolute positioned popup (hover over "ice white" image to see popup) which has css left:50%. Now this should appear in the middle of page but doesn't. Any suggestions please? Thanks in advance.

You're also supposed to add margin-left with the negative of a half of visible width of the element. So, for example:
width: 400px;
padding: 10px;
border-width: 2px;
/* -(400 + 10 + 2)/2 = -206 */
margin-left: -206px;
left: 50%;
Note that margin: auto suggested by others won't work because you've positioned the element absolutely.

position: absolute;
left: 50%;
transform: translate(-50%,0)

Lol, no. The left side of the image appears at 50% of the page width. Hence; left: 50%.
In order to center your image, set margin: auto instead.

Your code is working correctly. The popup is being positioned with left of 50% ... of the TD tag it's nested inside.
Try either taking the popup out of the table, or setting it to 50% of the document width instead. (Your javascript is minified and unreadable to me, or I'd help further.)

u can try to change CSS Style like this
#displayDiv {
background-color: white;
font-weight: bold;
height: 460px;
left: 50%;
margin: auto auto auto -475px;/* change done here */
overflow: hidden;
position: absolute;
text-align: center;
top: 80px;
width: 950px;
z-index: 1;
}

Looks to me like there's a containing element somewhere in between the "Ice White" image and the body (specifically, Firebug reveals that it's the <a class="popup1" ... >) that is relatively positioned, so your 50% is relative to that rather than the whole page.
I know this seems a bit counterintuitive: Why should it be relative to a parent element if the poput uses absolute positioning? It's basically because relative positioning is relative to where the element is in the normal flow of the document, whereas absolute positioning yanks the element out of that flow. See sections 9.4.3 and 9.6 of the W3C's explanation of the visual formatting model for more info.
Check out a tutorial or two if this is giving you trouble. I like Learn CSS Positioning in Ten Steps and css-tricks.com's "Absolute Positioning Inside Relative Positioning" (to which I'd provide a link if not for the spam filter; first-time answerer here ;) ).
As for what to do about it, you might be able to move the popups out of the relatively positioned parent, as mblaze75 suggests, but it looks (and I'm guessing here) like that <a> is what's triggering your JavaScript event, so you probably can't do that. Instead, I'd try removing the relative positioning and using margins instead.
Also, bear in mind what Greg Agnew said: Even with that problem solved, you're still centering the left edge rather than the center of your popup. I think duri's answer will take care of that.

Related

Have ::before stretch the full page width

Problem
I'm trying to stretch a ::before element from the very left hand side of the page to the right hand side, even though the element it's attached to is centred and somewhat down the page (and thus does not know what the window size is etc).
Here's a working example of what I want:
http://codepen.io/robcampo/pen/dilCe
Problem with this is that I'm using static values to define the width and left position:
left: -9000px;
width: 99999px;
which isn't ideal. I understand this could be solved if I moved the element to another location on the page, but I need it next to the element it's attached to.
Question
Is there a clean way to make the ::before content span the entire page width without using static values?
Note
There is content above and below this element and it is far down the DOM tree away from the body
I could solve using JS but I want a pure CSS solution
If you remove position: relative from the parent element, you can easily do this.
You can center .title like this instead:
.title {
margin: 0 auto;
}
Then you can adjust the ::before like this:
.title::before {
position: absolute;
left: 0;
width: 100%;
}
Bringing it all together: http://codepen.io/anon/pen/xLKGc
PS: Note that IE8 and before don't support the double-colon (CSS3) notation, so if you need to support IE8, make sure to use a single colon (CSS 2.1), which is supported by other browsers as well, and will probably be for a while.

using css -top value to move a div position

Hi I am not sure if this is the right way to do it but I am trying to position a div tag back
over the previous div element
This is what I have working
my css that I have used to get this to work looks like
.page-frame {
background-color: #fff;
padding-top: 40px;
position: relative;
top: -35px;
}
so for the top part the div element looks the way I want it to however the bottom on the element hasn't adjusted for the -35px;
I have tried adding a clear div after the element however that doesnt help. What do I need to change to remove the space between my .page-frame div and the next div?
The use of position: relative only shifts the appearance of the element in the page, but not the actual "space" it takes up on the page. So what you have done made your visual change to show the element 35px higher, but it does not cause other elements to reflow around it. Probably, what you need to add is a margin-bottom: -35px to get the final effect you want.
EDIT: Added better fiddle example to show reflow with margin.
Use position: absolute; instead of relative

CSS Rounded Corners Not Working - Why Not?

<div id="main-solutions">
<div id="main-solutions-top-left"></div>
<div id="main-solutions-top-right"></div>
<div id="main-solutions-body">
blah blah blah
</div>
</div>
css
#main-solutions {
}
#main-solutions-top-left {
position: absolute;
top: 0px;
left: 0px;
background: url('../images/Top-Left-Gray-Corner.gif') no-repeat top left;
width: 434px;
height: 15px;
}
#main-solutions-top-right {
position: absolute;
top: 0;
right: 0;
background: url('../images/Top-Right-Gray-Corner.gif') no-repeat top right;
width: 434px;
height: 15px;
}
#main-solutions-body {
background: url('../images/Gray-Gradient.jpg') repeat-x;
}
I'm expecting to see that main-solutions has two absolutely positioned divs at the top left and right with my rounded corner image, and then followed by the body with the gradient, but when I use HTML element browsers, the top-left and top-right div are not appearing at all, very confused, why are those divs being disregarded?
UPDATE (for others confused by answer):
At the root of my issue is I didn't understand that both absolute and relative define a new coordinate system for their contents, in addition to specifying the posision of the element itself. Found a good explanation here:
http://www.w3.org/TR/WD-positioning-970131#Positioned
from section 2.2
Like 'absolute' positioned elements,
'relative'ly positioned define a new
coordinate system for child elements,
with the origin located in the
position where the first child element
is rendered
Far as i'm seeing, the corners should be appearing at the top left and right of the page, since your container div doesn't have a CSS position property. Absolute-positioned elements' positions are relative to the innermost parent that has a position other than static (the default).
Try adding position: relative to the container div's CSS. It works much like the default, but (1) if you want, you can shift the div's position by some amount (which isn't extremely useful here, but still), and (2) since the position's not static anymore, absolute-positioned stuff inside the div should position itself relative to the container, rather than to the body/page.
Also, some browsers won't even display a div that has no content -- so the background for said div might not show. You'll probably want to have something in the divs. Even a single will work.
Have you considered using CSS border-radius to achieve this rather than messing around with images?
border-radius is supported by all browsers except IE, but even IE can be made to work with it with the use of a clever little thing called CSS3Pie.
(plus as a bonus, CSS3Pie also gives IE CSS gradient backgrounds, so you could kill two birds with one stone)

What is the cleanest way to center a div absolutely (H+V) inside a browser window?

I need to build a webpage of just a humble content (a logo and some text) to be show in the center of a browser window. How do I best achieve this effect targeting today web browsers?
Here's a very simple solution. I take no credit for this:
http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm
Works very well for a simple body > div situation like yours.
Your other option, although I fear the repercussions from some table-haters around here, is you could wrap the div in a table, and using the vertical-align:middle property on it to take care of the vertical align without javascript. Then use margin: 0 auto; on the div to handle the horizontal center.
If you know the dimensions of the element (do the math for the values):
position: absolute;
left: 50%;
top: 50%;
width: ($WIDTH)px;
height: ($HEIGHT)px;
margin: (-$HEIGHT/2)px 0 0 (-$WIDTH/2)px;
What it does it positions the top left corner of the element at the center of the viewport and then uses negative margins to inch the center point to the center of the viewport.
you can put your content inside a div and provide height & width to this div then apply this simple css like u applied width as 300px & height as 300px::
div {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}
then it'll always be in center and make sure u used a valid DOCTYPE.

<div> position:absolute; bottom: 0; not working as expected in IE7

My site, a course catalog tool for universities, has a center pane that contains a dynamically updated list of classes. In Firefox, Opera, and Chrome, the center pane has the intended scrolling behavior: when the class list exceeds the height, the center pane has a scroll bar. IE, however, only shows this bar when the height is explicitly set. Without using JavaScript to reset the center pane height on resize, how can I force Internet Explorer to show the scroll bar?
The center pane:
<div id="middlenav">
<div id="middleheader"></div>
<div id="courselist"></div>
</div>
and its CSS:
div#middlenav {
position: absolute;
left: 250px;
right: 350px;
top: 0px;
bottom: 0px;
}
div#courselist {
overflow: auto;
position: absolute;
top: 55px;
bottom: 0px;
width: 100%;
}
It looks like the center pane isn't obeying the bottom: 0px; statement, and is expanding to the full height of the contained #courselist. I tried body { height: 100% } but that didn't fix it either.
"The top property overrides the bottom property..."
https://developer.mozilla.org/en-US/docs/CSS/bottom
Change top to auto instead of 0px:
div#middlenav
{
position: absolute;
left: 250px;
right: 350px;
top: auto;
bottom: 0px;
}
That should fix the bottom positioning. Remember, if #middlenav is positioned absolutely, it will be relative to whichever parent element has position:absolute; or position:relative;. If #middlenav has no parent elements that are positioned, it will be relative to <body>.
I'm not sure why you have #courselist absolutely positioned; since it is inside of #middlenav I would think you could leave it static or position it relatively. But regardless of what you do, I think you need a height set on #courselist or #middlenav. The default value of height is auto, so there won't be a scrollbar because the element will expand to fit its content.
I know this question was asked 3 years ago, but I'm posting this for other people who may have a problem with CSS positioning. Cheers!
While it is perfectly acceptable to set opposite edges when using absolute positioning in CSS, limitations in Internet Explorer mean that the approach may not work there.
There is no way to avoid the bug in Internet Explorer 6. In Internet Explorer 7 and newer, triggering Standards Mode will resolve the issue.
Faking columns that extend to the bottom of an element is usually achieved using faux columns.
position: absolute; bottom: 0px; sets the element right on the bottom of the element. But it has to know where the bottom of the element is. If you set the height to 100% or have it in another element positioned bottom: 0px; Then it doesn't know where the bottom is, unless one of those elements is inside (taking up the full height of) and element with a fixed size. You can't give the body a height of 100% because it would just sort of go on forever. Try specifying the height of the body or some containing element. :D
Ensure that your doctype is set to HTML strict, otherwise IE will behave quirky and get confused with among others positioning and overflows.
Add this to top of your page:
<!DOCTYPE html>
I am not quite sure if i fully understand but I think you want the center pane to scroll when it reaches past a certain height..this is how I would do it.
#middlenav { position:absolute; left:250px; top:0 }
#courselist { position: absolute;top: 55px; left:0; min-height:400px; _height:400px;
overflow:scroll; overflow-x:hidden; width:500px; }
This sets your course list in all browsers to a minimum height of 400, once that is passed a scrollbar appears. min-height is not supported in IE7 and lower so i used the IE hack _height 400 so it acts as a min height. overflow-x:hidden is hiding the horizontal scroll just in case you only want vertical. I hope this helps you.
Don't use top and bottom positioning in the same class and don't use right and left positioning in the same class, as they are contradictory values to each other.