I created a contact form with a banner at the top of it. I created the entire thing and was planning on moving it to the right, off the screen, so that it will slide onto the screen when it is hovered over. I intended to just wrap a div around all of it and then relatively position it and move it however far I needed it to go to the right to be off the screen. However, when I tried to do this, it made the banner and the contact form box, as well as everything inside of those two elements, show up in a bunch of different random spots around the screen. I figured this was because it applied the relative positioning, as well as the left:100px value I set with it, to every element within the div and that, mixed with the other positioning I had set for each object, caused the weird displacements? Does anyone know how I can move the form and the banner so that they stay attached to each other and everything inside stays where it is?
Here's the JSFiddle where I set up the contact form box and banner: LINK
Thanks for any help
i'm not sure about all your absolute and relative positioning insde of your form - if you dont want to place the elements at very specific points you wouldnt need this.
here's a jsfiddle for what i think you want to have:
https://jsfiddle.net/spmhxteu/
basically you will need to set this for your email wrap
position: absolute;
right: -200px;
and you should set this for your body or whatever is wrapped around
overflow: hidden;
width: 800px; // example
all elements INSIDE your absolute positioned div do not have to be relative or absolute again.
UPDATE: As requested here an absolute positioning inside the element:
https://jsfiddle.net/spmhxteu/1/
Note: Ofcourse your padding etc. of the parent div will not apply on absolute positioning
Related
I'm building a demo for an app I want to create and I am trying to create buttons on a mobile phone. I brought in an image of a phone and created buttons set to absolute positioning which allows me to layer them over the phone, but when I go to resize the page, the element moves a lot and does not stay in the same place on the phone. How can I fix this? Please see fiddle to see exactly what I mean: http://jsfiddle.net/x313vkup/
I would really appreciate a modification of my fiddle link so I can understand how this works.
This is a snippet of the code that shows the list set to absolute positioning:
#phone_view {
position: absolute;
margin-top: -65%;
margin-left: 15%;
}
The beauty of position:absolute is that you can accomplish a lot without setting margins -- you can go straight to using top, left, etc.
An absolutely-positioned element needs to be positioned relative to a wrapper, however. I would recommend setting your #phone element to position: relative and then setting the position and dimensions of #phone_view "manually" in the CSS.
I would also recommend creating another wrapper element inside of phone to act as the relatively positioned element, since your h4 can wrap onto a second line, drive down the phone image, and get it out of sync with the absolute positioning.
EDIT: link to JSFiddle. Note the relatively-positioned wrapper (.phone-wrap). Child elements with position: absolute will define their position based on this wrapper. Also, no need for margins on #phone_view.
Also, re: #phone_view, background-color is just to make it visible for the demo, and while overflow: auto seemed appropriate for the demo, it doesn't affect the positioning of the object itself.
I have to add a small banner at the top of a page and am having trouble with pushing the existing content down 40px so I can fit in the banner above.
The current layout has a lot of strangley positioned elements and they all keep moving out of place if I wrap the whole body area in a relative block div with a top margin.
Is there a technique that should work for this other than wrapping in a div like this?
If you do this, then you have to be careful that your CSS positioning on the divs that you want to move is not absolute. Because if it is, then they will just stay where they are. It should however, work if you add a div that encompasses everything and put a few pixels of padding on the top with CSS.
Why not just put a at the top of the page and set that div to clear:both afterwards. This should shift the rest of the page down 40px, or whatever you set the height of that div to. Of course, I'm just guessing here without looking at code and/or a sample site. Since I assume by strangely positioned you mean weird usage of position:absolute, this should allow your current setup to remain consistent.
I have a div with which I display basic user information. The 'search-person' div has a height of 'auto'. This is so that profile pictures can be dynamic in size, up to 170px tall. Now, I would like to have a button displayed over the profile picture, and I thought to add relative positioning to the contents in the div and move it up and under the button, button it doesn't seem to want to work right. What can I do wrong?
here is my problem:
http://jsfiddle.net/C9Zj5/
#wrap {
position: relative
height: auto;
width: auto;
}
Make the #person-wrap position:relative and then the #buttons div position:absolute. That should give you the effect you're looking for.
div containing relative position should contain within another div having absolute position so that it can float correctly
If you set position:absolute to #buttons them you will have the button over the profile picture. Use left and top to positioning the button wherever you want inside #person-wrap.
I'm not sure what you mean with "and I thought to add relative positioning to the contents in the div and move it up and under the button", but if you want to show the info inside #person-wrap you can use position absolute or negative margin.
Aside: Is not a good practice to have div elements inside the link tag. Also why you need a button? Maybe you need to rethink the html structure as well ;)
So, I am working on a fansite, and I can't figure out why my "content" class div will not stretch. It's supposed to be 100% min-height, but it's not doing that. Also, I can't get it to stretch to the "column2" div, which is seated inside of it. Sorry if this is a simple fix, I'm very new to this. I wouldn't know where to start as far as posting coding for you guys to reference, so if you want, just go to here and view the page source.
Actually, it does stretch to the bottom --- the bottom of the html element. The problem is that your right column is position: absolute. Whenever you set an element to absolute positioning, it is detached from the normal flow, and so its container will not strech to contain it (which is a desired effect in drop-down menus and such).
Instead, you should use the float: right property on the right column and then add an empty div at the bottom which is clear: both, to ensure that the div stretches correctly.
Basically, I have a form, outside of that form in this random space on my page I want to position a div (containing two buttons). I've looked at using absolute positioning. However, it is positioning it outside of the page wrapper.
How can I get the positioning to be specified from the corner point of the actual page and not the window?
How can I get the positioning to be
specified from the corner point of the
actual page and not the window?
You need to add position: relative to the element you would like the top and left values to be offset from.
That might be your form, or it might be your #container/#wrapper element.
See here for details and a visual: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Looks like you have your answer by now. But ill post this anyways.
A simple and short example which shows how relative positioning to parent is done.
http://jsfiddle.net/EadXw/
If you want it positioned top:0;left:0 on the page, place it immediately after the <body> tag.
If it is wrapped in anything the containers may change it's position. Make sure it is independant and not influenced by any containers.
Sounds like you should read up a bit on the flow of the DOM.
Positioning with CSS and HTML
Make sure your <form> element wraps your whole "page" and that the <div> with the buttons is the first child of <form>.
When you do this you can add the rule position:relative to the form and position:absolute to the <div> and move it around with top and left.
Another option is to have no position rule on the form and have position:relative on the <div>. This is more compatible with iPad and iPhone devices, which don't like absolute positioning. When you go for this approach be sure to have a fixed height for the <div> and a negative margin-bottom of the same size.