So I have a little circle div that says "request invite" which is inside a larger container div.
I want the circle #request-invite div to be positioned in a very particular location (but still flexible and moving with the resizing of the browser window).
At the moment I have got it at the correct location I want, but the position is completely fixed is not flexible with the resizing of the browser window.
Here's what I have:
https://jsfiddle.net/t0j9hwos/
The css that I am struggling with is:
#request-invite {
position: absolute;
margin: 0 auto;
top: -10px;
left: 860px;
width: 100px;
height: 100px;
background-color: white;
border-radius: 50%;
line-height: 100px;
text-align: center;
color: #d31027;
vertical-align: middle;
font-size: 22px;
transform: rotate(10deg);
}
Any ideas how I can get the positioning of the #request-invite div circle how I want it?
Thanks,
Josh
Apparently your present solution fits to a particular window width. Let's say that the window is 1200px wide. So you can convert your left: 860px; to a relative measurement - relative to the window width. Percentage would be the first choice.
So you calculate, which percentage 860px is in relation to 1200px (your assumed window width - replace that with your actual width value). 860:1200 equals 0,716666... , so that's 71,66666 percent.
So instead of left: 860px; you now use left: 71,6666%;, or maybe even better left: 71,6666vw;. As I said, replace the 1200 with your actual window width (at which the positioning works as desired) when calculating that value.
I don't see the circle in your example code.
From what I understand, position:fixed or position:sticky could be what you are looking for.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/position
You could use vw for viewport-width (in percent) and than adjust it using margins like that:
position: absolute;
top: 0;
margin-top: -10px;
left: 50vw;
margin-left: 20px;
jsfiddle Demo based on your code
Related
I've looked around and can't seem to find a solution to the problem.
How come the bottom two divs appear cut in perfect halves to the left and right on a windows 8, but on my android s5 it is not centered?
http://danny4help.com/
#grad4_left img {
height: 100%;
width: 100%;
border-radius: 10px 0px 0px 10px;
}
#grad4_right {
z-index: inherit;
height: 700px;
background-color: #F1EEF7;
top: 705px;
width: 50%;
left: 50%;
text-align: center;
font-size: 80px;
line-height: 40px;
color: #4A4A4A;
}
.grad#grad4_left {
z-index: inherit;
height: 700px;
background-color: black;
top: 705px;
right: 50%;
color: #4A4A4A;
width: 50%;
}
You have several divs that have fixed widths in pixels, both above and below the incorrectly centered divs. These divs are wider than the body, so the viewport automatically expands to show the full width of those elements, making it seem as though your divs are incorrectly centered. Simply replace the pixel units of the width of the too wide divs with either percents of viewport units and you'll be good to go (e.g., .grad has a width of 1280px. Change that to 100vw). For a quick and dirty fix, add this block to the top:
* {
max-width: 100vw;
}
EDIT: Some other answers are advising you not to use absolute positioning in responsive layouts. Using position: absolute is actually OK as long as you are using relative units (e.g., %, em, vw) and not fixed units (e.g., px, in, pt).
Actually it's already centered in mobile. The reason why you see it's not aligned center is because you have set your grid div to width: 1280px while the body element is only 100%. Also as #Michael_B mentioned, besides having no height, it can't get the width of your elements inside your body element. I would advise you to not build a layout solely with position: absolute elements, because it will be better for responsive layouts, and I assume that you are targeting mobile.
Anyway, below are the few fixes I can suggest to you.
html, body add width 100%
.grad remove width
.grad1 remove height
.grad#grad1 img add max-width to 100%, add display: block
#shade remove position: absolute, remove width
#grad1.grad #scrolling_text change to width 100%
#block_text remove width
#nested_skills change to font-size: 16px so that your grad3 div can take the width of your text
.grad#grad4_right add overflow-y: scroll. If you do not want to have the scrollbar then set height: auto but it will be a different height than the image on the left. Also it will not show the left margin on the left div as well as the right margin on the right div because you are using absolute.
.grad#grad5: you have to adjust the font size for this yourself
.grad#grad6 add left: 0; right: 0; margin: 0 auto
.grad#grad7 add display: block
This should be good.
I have two images on the background of the website I am working on, now for me on a 15" screen the position of these look fine, just behind and right/left of the content container. But on a big widescreen (or just other much larger screen sizes than mine) they end up being further away from the content container and look like they are on their own.
They are percentage based but, 25% from the left/right on my screen is different to someone with a widescreen. I need them in the same position regardless. X% from the center is probably more like it. Anyone know a suitable option? I've attached some code of what the images are using right now.
http://bit.ly/1aNgkfa
CSS for the background image of the herbs on the homepage (top-left)
.herb-bg-img {
margin-left: -15%;
margin-top: 5%;
position: absolute;
float: left;
z-index: -2;
}
CSS for the background image of the peppers on the homepage (bottom-right)
.peppers-bg-img-index {
float: right;
position: absolute;
margin-top: -30%;
margin-left: 880px;
z-index: -2;
}
Use the left property along with a minus margin-left to align as needed:
.herb-bg-img {
position: absolute;
left: 50%;
margin-left: -600px; // Change as needed
margin-top: 5%;
z-index: -2;
}
Same with the right-hand image, only use a positive margin-left instead.
This should stay the same regardless of screen width.
You're positioning these two images absolutely. They should be absolutely positioned in relation to a parent element with position: relative, however. Right now they are in relation to the page, which will continue to cause you problems.
I'd recommend adding position: relative to your .container elements.
My fixed header is overlapping my content.
Much like here (Position fixed content overlapping problem)
but my header is dynamic so not always 50px in height sometimes 52, 100 ...
Try to position it in your box better.
When you create a fixed element, it requires an exact position:
Example:
#header{
height: 95px;
width: 640px;
position: fixed;
top: 30px;
right: 30px;
}
So, this is how your browser will read this: I will place a fixed element in the top-right corner of the screen: 30 pixels from the top, and 30 pixels from the right of my screen.
THE REASON those fixed elements are one on top of another it's because he didn't define a top/bottom and left/right position correctly. Add more text and you will see if you can scroll on the fixed elements (you can't..).
Put everything in a div and ID'it #bigBody. Give the #bigBody an exact width and height, let's say 1000 width and 600 height.
Now add these:
#header {
height: 50px;
width: 600px;
position: fixed;
top: 30px;
right: 30px;
}
#footer {
background: #fff;
bottom: 0;
right: 0;
height: 30px;
width: 600px;
position: fixed;
}
min-width is irrelevant here... you use this only if you design big websites that require multiple devices access like iPhones, Tablets etc... if your just playing with the code just stick with the basics.
You can do that via JavaScript, updating both the size of the header and the margin of other widgets. See my fiddle for an example (with CoffeeScript, tested on Firefox and Chrome), or this other fiddle that uses jQuery. Basically it's changing the CSS together for more than one element.
header { height: value + "px"; }
.contents { margin-top: anotherValue + "px"; }
If the size change isn't done by JavaScript/CoffeeScript, you'll have to put a event listener to update the .contents CSS.
I have a div which has its CSS initially defined as:
.mydiv {
position: absolute;
top: 60px;
left: 60px;
right: 60px;
bottom: 60px;
background-color: cyan;
overflow: hidden;
}
That is with equal distance from screen borders and I wanted to make it draggable via jQuery. This wouldn't work because of the right and bottom CSS directives.
So my next idea was to use this CSS definition:
.mydiv {
position: absolute;
width: 90%;
height: 90%;
margin-left: 5%;
margin-top: 5%;
background-color: cyan;
overflow: hidden;
}
Which according to my understanding would create a div with a width and height equal to 90% of the screen width/height and additionally the margin directives (5% on each side) would position it in the center of the screen.
This solution doesn't seem to work for 100%.
It works horizontally, the div is centered horizontally BUT vertically the space in the bottom is less than the space on top. Which is not what I want it to be.
I know I could use calc() to solve it in a different way but I want to avoid it due to browser compatibility (IE8).
I was wondering what I'm doing wrong?
i'm kind of stupid today.
i removed the margins and used:
top: 5%;
left: 5%;
and it solved my problem.
#header
{
position: absolute;
top: 0%;
height: 24px;
}
#body
{
position: absolute;
top: 24px;
bottom: 20%;
overflow: auto;
}
#footer
{
position: absolute;
bottom: 0px;
height: 17.2%;
min-height: 80px;
overflow: auto;
}
My problem is that when I compress the browser window, the middle element (the 'body') starts to slip into the footer's area (when 20% from the bottom becomes larger than the minimum height of the footer). The footer can be larger in height than its minimum, but it cannot be smaller.
Any good way to do this without Javascript code?
No. When an element is positioned absolutely it is removed from the flow of the document and has no knowledge of any other elements.
I have not seen a sticky-footer solution that will work with a variable height footer.
There are some examples of headers and footers on Dynamic Drive. These are pure CSS layout examples.
You should be able to achieve the same effect with a combination of these two.