using css -top value to move a div position - html

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

Related

Add image to the bottom of a adjustable height section

I am trying to created a CSS design on my web app. I am going for a banner that is flapping in the wind. I want the banner to expand/scroll its height so all text will be displayed on the banner but regardless of how tall the banner is, I want to add a ripped section of the banner at the bottom of it. The banner will be the same width in all cases.
Something like the example below (forgive the horrible Paint screenshot):
I can't seem to wrap my brain around how to accomplish this. Any of you smart people have any ideas?
First, I think it'd be helpful if you could provide an example of what you have so far. For example, what's your HTML & CSS for the adjustable-height divs, just without the image at the bottom? Easier to add onto that.
I believe the best way would be to add an image element at the bottom of your adjustable element (assuming it's a <div>). Position it as absolute, and set it relative to the bottom of its parent container. You may have to fiddle with it a bit to get it to work. Don't forget to also set the position of the parent to relative.
If you'd like to see the shoddiest example ever, go here: https://jsfiddle.net/c2ptfv8o/
Good further reading on position: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Give the container element "position:relative" (to create a new positioning context) and some bottom padding (to make space for the image). Then you can either use a background image set to be at the bottom of the container and not repeat vertically or absolutely position an image to the bottom.
You can use pseudo-elements for this. This way you don't require extra markup for each element.
.myDiv {
position: relative;
}
.myDiv::after {
content: url(image.jpg);
display: block;
position: absolute;
left: 0;
top: 100%; /* will be placed immediately where the div ends */
width: 100%;
}
Based on the height of the 'banner curls', set a margin-bottom on .myDiv.
Or directly, without absolute, as long as you don't have paddings:
.myDiv::after {
content: url(image.jpg);
display: block;
width: 100%;
}

Fix <ul><li> menu from pushing <div> below

Another developer has made a menu in a nav tag that is like this:
_layout page
<div>#Html.Partial("_menu")</div>
then in the _menu.cshtl page:
<div>#Html.RenderMenu("mainMenu")</div>
In the C# code a bunch of ul and li nested elements are generated, which looks fine at first on the page.
But when you hover over one of the elements the nested elements drop down and the div right below that gets pushed down the page. It's ugly. How do I fix this? Is there some CSS magic I can do to make it overwrite the div below rather than pushing it down?
Just add position with a property value of absolute and a higher z-index to the element that shows on hover. You can control the position with Top, Bottom, Left and Right properties values.
Example:
ul {
position: absolute;
left: 0; /* Adjust as needed */
right: 0; /* Adjust as needed */
}
Note: Make sure that the element that contains the element that shows on hover has a position property value of relative to help contain the Ul(in this case). Otherwise, it will overlap.
Hard to see without the code, but you can apply absolute positioning to overlapping element.( I have no clue which one is that as you didn't provide any code). So:
position: absolute
You have to make the position of the ul element relative.
ul{
position: relative;
}

Busy indicator in pseudo after element next to/outside button

I want to display a css based busy indicator next to a submit button. I use the after pseudo element for this, but I fail to place the indicator icon next to/ outside the button.
Obviously I can add a rule like left: 100px to push it right and outside the button, but that is not what I am looking for: still the space is reserved inside the button. I cannot use absolute positioning, since the button text is flexible (translations).
So I guess my question is something like "how to I take the after pseudo element out of the flow" or similar.
Note that I do not want to embed the button inside an additional container to place the busy indicator inside the DOM.
Here is a small example to illustrate what I mean: jsfiddle
The HTML markup:
<button>text on button</button>
The CSS rules:
button{
display: inline-block;
position: relative;
float: left;
padding: 10px;
font-size: 60px;
}
button:after{
content: url("https://skitch-img.s3.amazonaws.com/20120509-qf93juewhfhk69k9i42kfxbi3r.png");
position: relative;
padding: 0;
margin: 0;
}
I can't understand this:
I can add a rule like left: 100px to push it right and outside the button, but that is not what I am looking for: still the space is reserved inside the button. I cannot use absolute positioning, since the button text is flexible (translations)
What do you mean?
Here is a jsFiddle which appears to solve your problem. Give the element absolute positioning, and give it a negative right value to push it beyond the right-hand-edge of the parent.
If this answer is not correct can you produce a Fiddle illustrating the problem?
I am not sure if that's what you mean but try this:
http://jsfiddle.net/h5avjzq3/2/
Basically, since the button is dynamic in width, I use
margin-left: calc(100% + 10px);
position: absolute;
left: 0;
that will make sure the button is always right to the button, but you have to actually reserve the space now. (you said it's already done)

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.

left:50% element not appearing in middle of page

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.